How to build your first web app with AI

A web app is software people use in a browser: a planner, a private reading list, or a dashboard for customers. An AI coding assistant can edit its code and help explain errors. You still choose what to build, connect the services it needs, and check the result. You can learn those tasks one step at a time.

1. Turn your idea into one complete interaction

For a reading-list app, start with: “A signed-in reader can save a book title, refresh the page, and find it again.” Leave recommendations, sharing, and payments for later. This first interaction gives you something you can actually test.

Write down three checks before asking for code: a valid title saves, an empty title is rejected, and another reader cannot see the book. These become your definition of a working first version.

2. Choose your coding tool and starting point

Use one AI coding tool you can open a project in: Codex, Claude Code, or Cursor. You do not need all three. Follow the tool overview and installation guide; both are free to read.

You can start from an empty project or from a starter kit. Starting from scratch lets you choose every part. A starter gives you existing patterns for accounts, data, and payments, but you adopt its initial choices. Compare the tradeoffs before buying anything.

Ghoststack is the paid starter behind this guide. It supplies the foundations below and written setup steps. Your reading-list feature is something you build on top.

• Pages and buttons: Next.js, Tailwind CSS, and DaisyUI.
• Sign-in and saved data: Supabase.
• Subscriptions, when needed: Stripe.
• Email and AI features, when needed: Resend and OpenRouter.

3. Get one page running on your computer

With Ghoststack, accept the repository invitation after purchase, download the code, and open the extracted folder in your AI tool. After installing Node.js, run these commands in that folder:

npm install
npm run dev

The first command installs the project’s packages. The second starts its preview. Open the address printed in the terminal and keep the command running. Success means you can see the starter in your browser. It is running on your computer; it is not a public website yet.

The full workspace guide explains each step and common errors. Ghoststack’s public pages preview before service keys are added. Other projects may require configuration first.

4. Ask for a small plan, then build it

First configure sign-in and the database using your project’s guide. For the reading-list example, ask your agent:

Read the project instructions and inspect the existing app.
I want each signed-in reader to save a book title and view their own list.
Reject empty titles and titles longer than 200 characters.
A reader must never access or change another reader's books.

Propose the smallest complete implementation using the existing stack.
Explain the database changes, access rules, and setup I need to complete.
Give me checks for valid input, invalid input, and two separate accounts.
I'm new to coding: explain unfamiliar terms. Wait for my feedback.

Check the plan, then ask the agent to implement it. Save database changes in the project so you can repeat the setup. Keep credentials out of chat, screenshots, and Git. Save a checkpoint after a working change; the next request should build on it.

5. Test the behavior, including what should fail

• Save a title, refresh, and confirm it is still present.
• Try an empty title and an overlong title; both should produce a useful error.
• Use a second account and confirm the first account’s list stays private.
• Ask your agent to check access rules on the server and database too. Hiding a button is not an access check.
• Check the page on a narrow screen and run the project’s lint, type, test, and build checks.

If something fails, describe the exact steps, expected result, and actual result. Share relevant error text with private values removed. Our bug-fixing prompt shows how.

6. Publish a small version and watch someone use it

Deploy to hosting that supports your project, configure its service settings, and repeat your checks at the public URL. A successful build alone does not prove sign-in or data access works. Use the public launch checklist.

Ask a potential user to save a book without your help. Observe where they get stuck before adding features. Your first goal is a reliable interaction someone understands.

What should you budget for?

A starter purchase and an AI coding subscription are separate from running your app. Hosting, a domain, email, database usage, payment fees, and AI API usage can cost money. Free plans have limits. Ghoststack’s offer and cost FAQ explain what is included and link to provider pricing. You will also need time to learn, test, and maintain what you build.