Transcription
In this video, I'm going to show you how, as a beginner who doesn't know how to code, you can build a simple web application like the one I just created in under one hour without writing a single line of code.
We will be using five different AI tools for this, and I'll guide you through the exact process, taking you from zero to live, where this app is actually deployed on the internet and can be used by others.
Alright, let's go! I'm starting the one-hour timer now. I want to build a habit tracker, and the first thing we're going to do is brainstorm how the UI should look. We'll use v0 for that.
I want to build a habit tracker in a web app. Let's start with this simple prompt and iterate from there.
Let's test it out. Drinking water. Okay, it added this. Add a navigation bar on the left. I also want it to be full screen.
Alright, navigation bar on the left looks good: dashboard, calendar, settings. Okay, nice!
What happens if I go to the calendar? Please also make the calendar view show a green dot for habits that were completed. I guess that's fine so far.
On the dashboard, I actually want an options switch to toggle into the next week. That's cool!
Next, we're going to head into Bolt with a blank Next.js app. We can just copy the code. Please implement the following design as a web app. We could deploy this right away, and anyone can start using this very simple version already.
The problem with that is, once we refresh the page, these habits will probably go away because they're not stored anywhere. By the way, we're 10 minutes in now, and we have a functioning version of a habit tracker that we can deploy. This is already really amazing!
But let's take it to the next level. I'm going to open this in StackBlitz and create a repository on GitHub called Simple Habit Tracker.
Open Cursor. I'm going to fetch this repository into Cursor. I'm going to git clone this. Let's run this again. Now it should work.
Alright, our habit tracker is here running locally. I like this simple version because it has no clutter and allows us to track our habits easily.
What I don't like right now is that the calendar only shows a dot. It doesn't really give us much information.
Let's add a feature to the calendar view that shows me the details for each day, not just the green dots. That's good! I like the hover feature that shows how many habits were completed and how many were not completed on that day: one completed, one not completed.
Okay, I want to add some information about streaks: how long have you been doing the habit every day? There we go, streak: three days. Cool!
So the streak works. Let's think of some settings that would make sense for this app: dark mode, nice; flexible streaks, okay, that's interesting. I like that.
When should a new day start? Alright, daily reminders, not bad. I like it!
We're half an hour in now, and we've already made significant progress. We have a basic functioning app, and I want to add the more important stuff first, which is the backend and user authentication.
Let's go ahead and integrate this app with Supabase. We'll do the backend integration first.
First thing, let's open up Supabase. Okay, new project: Simple Habit Tracker. It basically gave us the steps here. Since I've done this before, I kind of know, but we'll just follow them.
The first thing is to install the dependencies. Let's do that and then create a Supabase project. That's what we just did.
Now, let's create the environment variables. So let's do that locally. Apply that. Alright, and then we can copy our keys in there.
Okay, this should do it. Now let's create a client utility file. Let's create the file ourselves.
Yeah, we need to run these in Supabase now to set up our databases. We can do that here in the SQL editor. Basically, paste what it just gave us. Success!
So let's check if it created the databases for us: habit completions and habits. Okay, cool!
I guess this is for the streak, and this is just to store the habits. It probably took it one step further already to create the user authentication stuff, which is pretty cool.
Let's just implement that and follow its advice here. Contexts? No, there. Contexts. Yeah, let's apply this code in there. Accept that and then update the root layout.
By the way, if you're wondering why I'm doing this with the AI chat instead of the composer, I just want a little more control over this part because I know a lot of changes are happening. I want to avoid the composer doing too much at once and running into errors that we cannot fix.
Okay, let's test if it worked. If it does, that would be incredible!
Going to refresh this. We need to run it again.
Okay, so eating this and take this off, and drinking, take it like this.
Okay, let's see if something happened. No, nothing happened.
Alright, let's fix that. Let's use the composer again. It seems like if I create the habits in the front end, they're not actually being stored in the backend yet.
Okay, after a bit of debugging, I got this to work. So, it's now saving my habit in my habit database.
The problem is often when you hook this up, it expects you to be logged in with a user. When you write things into the database, it gives an error because the whole user login stuff is not really set up yet.
So what I did was assign a fake user ID to test this part, and that made it work. This means I can now add another habit, and here it also adds the completed dates.
Help me set up the user login and sign-up pages.
Okay, the sign-up and sign-in pages work now. You see that it loads the habits I created before, and I can add new ones, tick them off, and they're being added to the database with this user ID.
Now, what does not work yet is the signup. So let's implement the signup.
Yeah, let's implement the signup page, and then I think we're done for now. Let's implement this, and then we can test it.
Okay, test home, test two, three, three. Boom! There we go!
So, this is a new user. Let's see if this was created. User? Yep, new user ID.
Okay, awesome! Cool! We have a way to log in. We're pretty much done.
Let's just quickly test this because we have basically two users now.
Yeah, we had three habits there, and then if we log out, we had the other user, which was here. Perfect!
So this is the new user. Nice! It works! We have a simple habit tracker now. People can use it, create an account, log in, and it will save your data so you can track your habits.
This is awesome! All we need to do now is deploy this.
So let's try doing that. Let's go into Vercel, and we're going to try to actually put this live with Resell: Simple Habit Tracker, import, deploy. Boom!
Okay, so we got an error. Let's see. Ah, of course!
Let us... where is this now? Let's add the environment variables. We forgot to do that.
So these were added. Okay, let's try it again. Yes!
Alright, it's live! Cool! You can see this is a live link. Anybody can access that, and I'm going to try to use my login details from before and sign in.
Yes, it works! We have our app live, and anybody can start using this theoretically. We just need to share this.
Okay, cool! I hope you learned something. This is how you, as a beginner who doesn't know how to program, can use AI to build a web app from start to finish.
Now, there are some points where I had to go in and debug and redirect the AI to do things in a different way. Yes, it's not like one click yet. You still need to watch over it a bit and direct it, but this is incredible what you can do with this nowadays.
We literally started from zero. I did not write any code for this; I just used AI for all of it, and now we have a live app.
Okay, cool! See you in the next one. Bye!