Questions? hello@viberation.devGet supportBlogDocsChangelog
Get started
← All walkthroughs

Walkthrough · Project build

beginner

Ship your first web project

Step 1 of 6 · linear, one-off

0 of 19 done

  1. 1Idea
  2. 2Setup
  3. 3Stack
  4. 4GitHub
  5. 5Deploy
  6. 6Launch

Idea

Your first project should be small enough to finish. Then make it a bit smaller.

Pick something with one screen and one job. A page of your favourite recipes. A countdown to a date that matters. A form that emails you. Here is the test: can you describe it in one sentence without the word "and"? If you need an "and", you have two projects. You will finish neither, and both will live forever in a folder called final-v2.

Pick a prompt, copy it, and paste it into your AI tool

I want to build this as my first web project: [describe it in one sentence]. Before we write any code, answer three questions: 1. Is this one screen or several? If several, what is the smallest one-screen version? 2. Does it need to save any data? If so, what? 3. What one thing would turn this from an evening job into a week-long job? Be honest. I would rather cut it down now than give up on Thursday.

Open it in your AI tool. Clicking copies the prompt, and ChatGPT and Grok open with it already filled in.

More tools

Code editors on your computer. Open app only works once it is installed, so use Get it first if you do not have it.

Want the full list? Browse all app builders and coding editors (IDEs).

  • Wrote my idea as one sentence, with no "and" in it
  • Cut it down to one screen
  • Decided what done looks like, so I know when to stop
  • Sign in to tick these off and pick up where you left them.

Tools used in this build

Everything this walkthrough reaches for, with the directory entry for each.

  • Models

    Claude

    Anthropic's model family, strong at long-context coding work.

    Freemium
  • CLIs

    Claude Code

    Anthropic's agentic coding tool in your terminal.

    Paid
  • Models

    Gemini

    Google DeepMind's multimodal model family.

    Freemium
  • Models

    GPT

    OpenAI's model family, behind ChatGPT and Codex.

    Freemium
  • Frameworks

    Next.js

    The React framework most AI tools generate best.

    Open source
  • Templates

    shadcn/ui

    Copy-paste React components you own outright.

    Open source
  • Tools

    Supabase

    Postgres, auth, storage and row-level security in one box.

    Freemium
  • Hosting

    Vercel

    Deploy Next.js with a preview URL per pull request.

    Freemium