Emergent

I'm a programmer and I have a YouTube channel with almost 300,000 subscribers where I make coding tutorials. Now, I recently decided to stop making videos for this channel because I genuinely think that AI will make coding obsolete. A few months ago, these vibe coding tools could really only build a pretty front end, but they couldn't handle the back end. But the back end is where all the complex important stuff happens. This is where you store information in a database and retrieve it later or where you make requests to third-party services to do stuff like sending an email to a user. The back end is also where you handle authentication so users can create an account and log in and save their data. Without a back end, you really only have a toy app. Writing backend code is more difficult because you have more logic there. You need to make sure that it's secure and there are just more moving pieces that have to fit together. And up until recently, AI couldn't really do this. But this has changed and now they can. And in this video, we will use Emergent, a vibe coding tool to build a fully functional app together. But this will not just be a toy app. This app will have a real database. It will have user login. It will have admin features where only we can make certain changes. We will even send automatic emails to our users when something important on our website happens. And of course, the website will look beautiful and modern. And the best thing is you can adapt this to any use case. You can really build any kind of app you want. I will walk you through the whole process step by step. We will build this together and at the end we will look at the result and I will tell you how much I would have charged if I would have coded this by hand. My name is Florian Walther and this is the AI tool corner where I review the latest AI software to find out which ones can actually improve our lives and businesses. To use the app, go to emergent.sh. I will also put this link into the video description below together with a 5% discount code. However, you also get free credits when you create an account so you can try this out for free. So, go ahead and create your account. Now, full disclosure, Emergent reached out to me and they are sponsoring this video. But I'm genuinely impressed by how good this is. So, I would have made a video about this anyway. And when we scroll down here inside the app, we can see a few examples. Let's take a quick look. Those are some examples of what you can build. Let's open this page in a new tab. And look at how amazing this looks. The animations are on point. Looks really sleek and modern. We can click some stuff. We have a contact form here. But this is just one example of what you can build. We will build something different. Let's go back to the app. And then we tell the AI what we want to build in plain English. And I have already prepared a prompt. Design a modern-looking directory website for AI tools with a dark blue theme and white and yellow accents. The title is AI tool corner directory. On the front page, present the tools in a nice-looking grid. When a tool is clicked, navigate to a details page where we show more information and a button that links to the tools website. So, we are building an AI tool directory page. Each tool has a title, description, logo, and URL. So, you have to tell the AI exactly what you need, and the more specific and detailed you are, the better the results you get. Users can optionally create an account with email and password, which allows them to bookmark tools for later. They can get to their existing bookmarks via a navigation menu. Prepopulate the database with a few popular AI tools. Add a page that allows only me, the admin, to add or remove tools. Make the design mobile first and add micro animations, transitions, and hover and reveal effects where it looks good. But keep it subtle and don't overwhelm the user. Add an attention-grabbing hero section. That's like a big image at the top that you often see on landing pages with parallax scrolling above the tools grid. If you need images, get them yourself because the AI can search images online and I think it can even create them via AI image generation. Okay. Below we have some simple settings. We can change the agent. We have E1.1 and it says fast and flexible. And then we have E1 stable and thorough. So the E1 model is better for bigger apps that have more complex features. And since we have user login and admin features, I would consider this a big app. So we select the E1 model which is better for large apps. Then we have this ultra toggle which we can use for very complex situations where we need a larger context window where the AI has to keep more information inside the chat but we don't need this here. So we keep this unselected and as you can see up here you can also build mobile apps with Emergent now but we will build a web app together. Then we have some advanced settings where we can configure MCP tools and choose the model that we use here but we actually don't want to change anything here. You can try out GPT-5. I'm not sure which one is better right now. I think Claude 4 and GPT-5 are pretty similar. So, let's keep Claude 4 selected. Yeah. And then we just send this message and the AI will get to work. And without getting too technical, Emergent has different sub-agents that are responsible for different tasks. For example, we have this image agent here which can generate images using AI and it also searches them apparently. Now, this is very technical and you don't need to understand this. It's just nice to know. You can click around here in the chat to see what the AI is thinking and what it's generating. But by default, this is hidden from you because you don't really need to have anything to do with it. Now, what I really like about Emergent is instead of just blindly building, the agent asks us clarifying questions back. So, it asks us, for example, how we want to handle the admin access. Should it use a specific email address as the admin or should it create a separate login system or which AI tools it should use to prepopulate the database? So let's answer these questions. So I give it my answers and then it will get back to work. I told it to use florian@codingflow.com as the admin email, which is my email address. So when we later log in with this email address, we should have additional admin features that other users don't have. And I also told it to prepopulate the database with 8 to 10 popular AI tools so that we don't start out with an empty list. And voila, there is the first version of our application. Of course, we can modify this further, but let's try this out. We can open it in a new tab via this button. And it looks really professional. So up here, this is the hero section. We even have categories just like we told it. We have a grid of AI tools. We can open a details page with a link to the website of the AI tool. We have an authentication system. So up here we can create an account. And this is the part that these vibe coding tools struggled with in the past because building a login system is more involved. It needs more logic on the back end. Let's see if this works. So I create a new account with this email address. This is not the admin email address yet. This will be a regular user. After signing up, we are now logged into the app. We can see email address up here. When we refresh the page, we should still be logged in. Voila, we are so nice. And now we can bookmark tools. So I can click the bookmark icon. There is a little glitch with this border that shows up when I click the button, but we can fix all of this later. So let's bookmark a few tools, go to the bookmarks page, and there are our bookmarks. And we can remove them. And this all works really nicely. Let's log out of our account. I want to try logging back into this account but typing in a wrong password because this should block the login of course. Invalid credentials. Now let's create an account with the admin email address. Remember earlier we told the agent to use this email address florian@codingflow.com as the admin and the admin should be able to add new tools. So I create an account with this email address. Turns out the agent already created this account, but we need to know the password. So, we can just ask it what's the password for the Florian at Coding Flow account. Okay, it's telling me that this account doesn't yet exist. But I think this is wrong because we get the email already registered error message. So, let's copy this into the chat as well. But the signup email already exists for florian@codingflow.com. So sometimes you have to help the agent a bit because remember all of these LLMs are not 100% exact. They sometimes make up stuff. We call it hallucinating but it's pretty much lying. But of course these agents keep getting better and better in the future. Let's try to figure out our admin password. There we go. Now it found the admin password. Let's try this. So we sign in florian@codingflow.com with this password and indeed we get into our account which now has this additional admin navigation item here at the top where we get to a list of all the tools stored on the website and here we can add a new tool. So let's add emergent.sh as another tool. It's a code generation tool. We add the URL and a description and we can get the logo URL from Google image search. Copy image address. We paste it here. Add this tool and this will now be stored in our database. We can also delete tools. Let's see if we can see it on the front page. There we go. And when we refresh the page, the tool is still there because again this is all stored in our database. We also told the agent to make this page mobile responsive. So it also works on small screens. Still looks very good. The text size changes, the layout changes, and even the nav here at the top changes. And this is exactly how a website should behave. Now let's tell the AI to make some more changes. For example, here on this password input field on the login and signup page, I want to have a little password visibility toggle so I can see what I actually typed in. So I tell the AI add a visibility toggle to the password field on the signup and login pages. And when you make a change, only ever change one thing at a time. Don't tell it to add multiple features at once or fix errors and add features at the same time because this will just confuse the agents and create worse results. Tell it to change one thing at a time like adding this visibility toggle. Then test if it works and if it does, go on to the next feature. And not even a minute later, we now have this password visibility toggle that actually works. We can also upload screenshots and the agent can see them. For example, let's say we want to remove these two texts here. Then I can make a screenshot only of this part and maybe make a circle around this. There is an image snipping tool available on Windows. I assume that Mac has something similar. Just make a screenshot of what you want to change. Upload it here and ask the AI to remove the text in the red circle. And the AI made the change we requested. But actually, I just decided that I liked this text and I want to get it back. So you can also roll back changes. We can go up to a state where we liked the result up here before we asked it to remove this text and we can roll back to this state. You can decide if you want to revert the code or only the messages. We want to revert the code changes. Right? So we confirm this. And now we have our text back and we can continue with the agent just like before. And if you ever see some kind of error message on your website, just copy the message, put it into the chat and ask the AI to fix it. Let's say I want to change this hero image here at the top. I want to replace it for my own image, but I don't know how. So, I simply ask the AI, how can I replace the hero image? Okay, so it told me that the image is loaded from an external URL and we can replace it. But actually, I want to use an image from my computer. I'm not sure if the AI can implement this. Let's try this out. Can you use this image instead? Okay, it still wants me to upload the image somewhere and give it the URL. But I actually want to store the image in the project. So the agent can't really figure it out. But let me try one more time. Instead of me uploading the image somewhere, can you store it directly in the project? Let's try it out. Okay, so the AI didn't use our image, but what it did is it added this newer hero image placeholder to a certain directory and then it told us how we can replace this image ourselves. This means we have to go into the code ourselves. Sometimes you can't avoid this. Luckily, you don't have to download anything or install a code editor. Instead, we can close the app preview and click on code up here. And here we get a link and a password. So, let's copy the password and open this link. We enter the password here. And then we get to an online code editor. So, this is the actual code of our project. And it's always good to have access to this even if you don't want to write code yourself. Right? And now we can just follow these instructions. So we need to upload this herobbg file to this folder app front end public images hero. So let's search this. Here we see front end folder public images. And here is the hero bg file. And we want to replace this for our own file, right? So we delete this one. We rename our image on the computer to herobg or whatever name the AI tells you to use. Then we drag it in the same folder where the old image was before. And now this is in our project. And then we can close the code editor. And when we now refresh our page, we see the new hero image. So sometimes you have to go into the project, but it's always useful to know how to do this. There is one more pretty advanced feature I want to add to our app. Whenever a new tool is added to the database, send an email notification to all users. And this is not a simple feature. We have to figure out when a new tool was added, and then we need some kind of email service to send an email to all users automatically. Now, up until recently, we couldn't really do complicated features like this with vibe coding tools, but now we can. Now, the AI gives us a bunch of different options. Let's use the recommended option which is SendGrid. That's an email sending service. Let's tell it to go with SendGrid. And now it tells us exactly what we have to do. So we have to get a SendGrid API key. And we have to decide from what email address we want to send these notifications. And if we don't have a SendGrid account yet, it tells us how to create one because SendGrid is a third-party service. I already have an account on SendGrid. They also have a free tier. So if you want to send transactional emails, they are pretty good. So I'm in my SendGrid account and the AI told us to go to settings API keys. So let's do that. And here we need to create an API key. Let's see with full access or mail permissions. Let's give it full access. I call it AI tool corner directory. If we copy this API key and put it into the chat API key colon, we paste it in here. And by the way, you should always keep these keys secret because other people can use it to send emails on your behalf and you don't want this. And of course, I'm going to delete this key later. And the AI also wants to know from which email address it should send these notifications. And this email needs to be verified by your SendGrid account. I've already done this. Under Sender Authentication, I added florian@codingflow.com. If you ever have questions about how to do something, just ask the AI. It has detailed instructions for all of this. So I also tell it to use this email address as the sender. So the AI has finished. Let's see if this actually works. Let's log in with the admin account. And now when I add a new AI tool as an admin, it should automatically send an email to all users. So I'm going to add Jogg AI, which is a cool image and video editing tool that I also have a video about if you want to check this out. Let's add this tool. There it is. And now in our SendGrid account, when we look into the activity, we hopefully see that this sent emails. And indeed, it sent the email for the Jogg AI entry. And if we would have created more user accounts, it would have sent an email to all of them. Let's look into the email inbox. It also sent a test email earlier. The agent did this automatically to verify that the email feature works. And up here is our email. Now, this is in the spam folder, but this is my fault because I haven't verified this email address properly in SendGrid yet. After we did this, it will not land in spam anymore. But let's take a look at the email. It even has a nice design. New AI tool edit AI tool corner directory Jogg AI explore this tool and this is a link to the tool itself. Don't forget to bookmark your favorite tools and explore the growing collection of AI innovations. Isn't this cool? I'm really blown away by how well this works. And you can even implement payment features with Stripe the same way we added this email feature. If you want to build a real SaaS application where users have to pay something, you can implement this as well. No problem. And I will leave a link in the video description below to this Emergent guide which explains how to do this step by step, but it's basically exactly what I showed you in this video. And they also have some tips on how to structure your prompts, for example. I will put this into the video description. Now, let's talk about how much I would have charged if I would have written this website by hand like a caveman. So, let's recap. We have a nice looking UI. We have this grid. We have a database where we can store AI tools. We have authentication, we have bookmarks, we have admin features and categories. I would say I would have needed at least half a week, so 20 hours to build this by hand. I charge €80 to €100 per hour for my work. So it would have cost around €2,000 probably for a website like this. And we have built it in half an hour for a fraction of the price. I don't know how much credits we spent, but it was probably the equivalent of a few bucks, less than 10. So times are changing. You can now build fully functional websites with a back end and with real cool advanced features yourself in half an hour. This is the best time in history to build something and the best time to subscribe to the channel because I will keep showing you the best AI tools to build your apps and businesses. Let's quickly talk about how to deploy your app. So if you just want to share this app with someone, you can click on share and you get this temporary address. As it says here, this is a preview that expires after 30 minutes. So, this is only useful to quickly show your website to someone. But if you actually want users to use your app on a real domain, you have to click on deploy and then you have to follow these instructions here. This is a real deployment which means your website is online on the internet and other people can use it. They can create user accounts, they can use all the features and you can also connect a custom address. Just click on start deployment and follow the instructions. It's as easy as the rest. And with this button here, you can also save your project to GitHub. If you're not technical, GitHub is basically a platform where you can put code for free. And this makes sure that you never lose your code. Even if Emergent disappears for some reason, you always have access to your code and it's stored forever. You can do this by saving it on GitHub. Again, the link to Emergent is in the video description together with a 5% discount code. But remember, they have a free tier, so you can try it out completely for free. And if you build something cool, please tell me in the comments what you have built. I read all my comments, and I would really love to check out your apps. Subscribe to the channel if you haven't yet, and then we see us in the next video. Take care.