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

Walkthrough · Project build

beginner

Ship your first web project

Step 1 of 4 · linear, one-off

0 of 14 done

  1. 1Idea
  2. 2Stack
  3. 3Deploy
  4. 4Launch

Idea

The hardest part of a first project is choosing one small enough to finish.

Pick something with one screen and one job. A page that lists your favourite recipes. A countdown to a date that matters. A form that emails you. The test is whether you can describe it in one sentence without the word and. If you need and, it is two projects, and you will finish neither.

Paste this into your AI tool to pressure-test the idea

I want to build this as my first web project: [describe it in one sentence]. Before any code, tell me: 1. Is this one screen or several? If several, what is the smallest one-screen version? 2. What data does it need to store, if any? 3. What is the single thing that would make this take a week instead of an evening? Be blunt. I would rather cut scope now than abandon this on Thursday.

  • Written the idea as one sentence, with no and in it
  • Cut it down to a single screen
  • Decided what done looks like, so I can tell when I am finished
  • 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
  • Tools

    Vercel

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

    Freemium