Hey Warrior,

Today, we're diving into a super hands-on, step-by-step tutorial, where I’ll be building a simple web app from start to finish, completely with AI.

If you prefer watching over reading, check out this video here:

The AI coding space is exploding with incredible tools, and it’s hard to keep track of them. For this task I’ll be using 5 of the most essential ones to achieve different parts of the build.

You'll see just how easy the process has become with AI by your side and I’ll be walking you through the entire process end-to-end.

Here's what we’ll cover:

1. Design with v0

2. Scaffold with Bolt

3. Develop with Cursor

4. Backend and auth with Supabase

5. Deploy with Vercel

Read time: 7 minutes

🎨 Design with v0

When starting a project, you should sketch out the rough components and features you want to include.

v0 is a fantastic starting point for that because you can communicate your vision in natural language, and it will create a design based on your description.

The cool thing?

v0 uses beautiful elements and state-of-the-art design components, ensuring your app looks good and feels intuitive for users right from the start.

For this post, let's build a simple habits tracker.

I'll head into v0 and use this simple prompt to start.

The beautiful thing is that you can go back and forth with v0 as if you had your own personal UI designer.

Once you're happy with the design, we can use what we have there as our foundation.

For now, we just want to have the rough features and get a sense of the layout. It doesn't have to be perfect at this stage.

The goal is to get a general idea of the interface before diving into the next steps.

⚡️ Scaffold with Bolt

The next tool in our lineup is Bolt (I wrote about in in detail last week).

It's a fantastic tool for quickly building the basic skeleton of your app.

Bolt is super fast and efficient, making it a good choice for this part of the build process.

To get started, head over to bolt.new and click on "Start blank app with Next.js".

Note: Next.js is currently the most popular framework for building beautiful web applications, and it's also what V0 is optimized for, along with a component library called shadcn.

Now, let's copy the design we created with V0 and let Bolt turn this into a functional web app.

And with just one prompt, we have a functional (albeit simple) web app. (still can't get over how crazy this is.)

Once we have a simple version up and running, let’s upload it to GitHub (Click on 'Open in Stackblitz', then “Create a repository”)

This will allow us to seamlessly transition to the next steps in our development process, which is to take this project into Cursor.

While Bolt is great for getting started, I've found that as applications become more complex, it can be challenging to continue development within Bolt itself.

By switching to Cursor, we'll have more flexibility and control over our project as it grows in complexity.

👨‍💻 Develop with Cursor

Now that we have our basic app scaffolded with Bolt and uploaded to GitHub, it's time to clone our application into Cursor and continue adding features from there.

Use this command in the Cursor Terminal to get your app form Github into Cursor:

Cursor has two powerful AI features (relevant for beginners that use AI to code): Composer and AI Chat.

When you're confident about the changes you want to make, Composer is your best friend. It allows you to make big changes relatively quickly.

On the other hand, when you're unsure about certain aspects of your code or want to take things slowly, the AI chat is best. It's more like having a coding assistant by your side, ready to answer questions and suggest code.

You can read more about my development process with Cursor in my “Cursor Tutorial for Beginners” here.

As you work on your project in Cursor, you should regularly save your progress to GitHub. This is important because it allows you to revert back to a previous version in case the AI breaks everything and you don’t know how to fix it!

💿 Add backend and auth with Supabase

Most production-ready applications need a backend (i.e. a place to store your data) and user authentication (i.e. user login & signup).

Supabase is an open-source provider that makes this really simple.

Ask Cursor for the steps to integrate Supabase. Then just follow the steps.

The main thing you need to do is to create a project in Supabase and copy over your API keys.

Cursor will take care of most of the rest. Just make sure to keep telling the AI to take it step by step and let you test every step.

Sometimes it will get ahead of itself and start to implement too much too quickly, which is a recipe for bugs.

You should get a working backend and simple user authentication in a couple of minutes.

📦 Deploy with Vercel

When we're done, it's time to deploy our app (i.e. put it live on the internet).

Since we've built our app with the Next.js framework, we can use Vercel to easily deploy it. (It’s all the same company).

First, let's upload our finished project to GitHub. This will serve as our central repository and make it easy to import our project into Vercel.

Next, create a new project in Vercel and import the project from GitHub.

Vercel will automatically detect that it's a Next.js application and configure the necessary settings for deployment.

Before we hit the deploy button, there's one important step we need to take: storing our API keys. Go to the Environment Variables section in Vercel and store your API keys there.

In this case we only have our Supabase API keys, but if you would have set up other integrations, we would be storing those API keys too.

Now we hit deploy and hope for the best!

And BOOM! your app is live and you can share the link with other people.

As a non-coder, we’ve just built and shipped a simple web app, without writing a single line of code. These are crazy times we live in.

Thanks for reading!

If you enjoyed this, consider forwarding this newsletter to a friend or colleague.

What would you like me to write about in the next post? Reply to this email and let me know.

Moritz

P.S. We're doing another LIVE build event this Thursday (Nov. 7th, 11am EST)!

1. Submit your app ideas

2. We will pick one of them

3. We build it for you (with AI)

4. You get to keep the finished app

Link to join: https://discord.gg/bptfwMMYnr

(Then click on “Events” and “Interested”)