This guide walks you through everything you need to build and deploy your first web app. It’s designed for folks who have some basic technical familiarity but have never built a full-stack product from scratch.

You’ve got an idea. It’s been sitting in your notes app or bouncing around in your brain for months. You’ve maybe dabbled with a little code before, followed a few tutorials or played with ChatGPT, but haven’t yet built a complete, working product.

This guide is for you.

Whether you’re a designer, PM, marketer, ops lead, or just a curious professional, you don’t need to become a software engineer to build a working MVP. You just need a clear plan and the right tools.

This guide will help you:

• Define what you’re building

• Set up a modern web development environment

• Understand how web apps work

• Start coding with real tools

• Deploy your project live

• Know where to go when you get stuck

Let’s go.

🧩 Step 0: Define What You're Building First

Before you start coding, you need a plan. Devplan breaks this down into 3 parts:

1. PRD (Product Requirements Document)

Write what your product does from the user’s perspective. Focus on functionality, not implementation. Example:

• "Users can sign up with email and password"

• "They see a personalized dashboard after login"

2. Technical Design

Define what components, pages, logic, and data are needed to implement the PRD. This gives structure to your code before you write it.

3. Build Plan

Devplan turns your tech design into scoped tasks. Each task comes with a pre-written AI coding prompt. You’ll use these directly inside your IDE (we recommend Cursor).

After generating your plan:

• Copy/paste the prompts into Cursor

• Or download the plan and run through them as you go

🧱 Tech Stack Overview

Here’s the modern web dev stack we’ll be using:

This is a professional-grade stack used by teams at real startups. You’re not building a toy app.

🖥️ Step 1: Set Up Your Environment

Open your terminal. (You’ll be using it often—it’s where most real development happens.)

1. Install Node.js + npm

Go to https://nodejs.org
Download the package and install it as you would any other app.

Check that it worked:

node -v
npm -v

You should see version numbers.

2. Install Git

Download from [https://git-scm.com/downloads]
Install with default settings.

Check it:

git --version

💻 Step 2: Install and Use Cursor

Cursor is a developer environment based on VS Code with built-in AI. It’s perfect for working with Devplan’s AI prompts and helping you through roadblocks.

Install it and open the app.

Inside Cursor:

• Create or open your project folder

• Use the built-in terminal (View > Terminal or `Ctrl+``)

• Use the AI agent panel (right-hand side) to paste in prompts or ask for help

⚙️ Step 3: Create a New Project with Next.js

In the Cursor terminal, run:

Choose these options:

• TypeScript → Yes

• Tailwind CSS → Yes

• App Router → Yes

• Customize src directory → No

• Import alias → No

• Install dependencies → Yes

When complete:

cd your-app-name
npm

What’s happening here?

• You’re starting a local server on your machine

• Your app runs at http://localhost:3000 — this is only visible to you

• Next.js watches your files — every time you save, it auto-refreshes the browser

Open app/page.tsx, change some text, and save. Watch the browser update instantly.

🧑‍💻 Step 4: Get Comfortable with the Command Line

You’ll be using terminal commands a lot. Here are a few you’ll use regularly:

When things go wrong, most errors will show up in the terminal. Read it carefully—it usually tells you what broke.

🛠️ Step 5: Start Building Features in Cursor

Once your Devplan Build Plan is ready:

1. Open Cursor and your project folder

2. Go to your Devplan task list

3. Copy the AI prompt for the first task

4. Paste it into Cursor’s AI panel

5. Cursor will generate code inside the file it thinks you need. Review it before saving

6. Use the dev server to check progress at http://localhost:3000

Repeat for each task in your plan.

• If something breaks or errors show up: copy/paste from the browser and say “I just added this code and now I’m getting this error. What’s wrong?”

• Let the AI do some of the heavy lifting, but try read and understand the code it writes.

🧰 Step 6: Common Errors and Fixes

🌍 Step 7: Deploy to Vercel

Once your app works locally, deploy it:

1. Push your project to GitHub

git init
git add .
git commit -m "initial commit"
gh repo create your-app-name --public --source=. --remote=origin --push

If you don’t have GitHub CLI (gh) installed, you can create a repo on the GitHub site and push it manually.

2. Deploy to Vercel

• Go to https://vercel.com

• Sign in with GitHub

• Import your repo

• Click Deploy

Vercel gives you a public URL in seconds. Push to GitHub again anytime you want to update the live site.

✅ Summary: What You Just Set Up

🧘 Final Notes

You will hit errors. That’s part of it. But now you have:

• A plan (Devplan)

• An assistant (Cursor)

• A working stack (Next.js, Tailwind, Node, Git)

• A feedback loop (localhost → fix → refresh → repeat)

Take it one feature at a time. Each small thing you ship teaches you how real software is built.