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

Walkthrough · Project build

beginner

Ship your first web project

Step 5 of 6 · linear, one-off

0 of 19 done

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

Deploy

Put it online today, while there is nothing to break. Pick one host and follow its steps.

Going live early turns every change after this into a small, safe step, instead of one big scary leap at the finish. You also get a real link to send people the moment it is worth showing off. All three hosts below have a free plan that covers a project like this, and all three redeploy by themselves whenever you push to GitHub. Not sure? Pick Vercel.

Pick a host

Vercel is made by the team behind Next.js, so there is nothing to set up. 1. Go to vercel.com/signup and choose Continue with GitHub. When asked, pick the free Hobby plan, which is for personal projects. 2. Open vercel.com/new. If my-project is not listed, click Adjust GitHub App Permissions and give Vercel access to it. 3. Click Import next to my-project. 4. Leave every setting as it is and click Deploy. 5. Wait a minute or two for the Congratulations screen, then open your site. Its address ends in .vercel.app.

Stuck? Pick a prompt and ask your AI tool

My deploy failed. This is my first time deploying anything. My host: [Vercel, Netlify or Cloudflare] Here is the build log: [paste the red part of the log] Tell me: 1. What actually broke, in one or two plain sentences 2. Which file to change, and what to change it to 3. How to check the fix works on my computer before I push again

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).

  • Deployed and opened my live link
  • Pushed a second change and watched it go live by itself
  • 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