Build a Web App in an Hour

You will build and deploy a real, public-facing landing page in under 60 minutes without writing a single line of code yourself. This tutorial is for product managers, founders, marketers, and anyone who needs a working web presence but does not write JavaScript. You talk to Claude Code in plain English. Claude writes the code, commits it to git, and pushes it to production. At the end you have a live URL you can share with your team, a customer, or an investor.

This is not a demo or a toy. The page you build uses Next.js -- the same framework powering Vercel, Notion, and thousands of production apps. You get real routing, responsive design, and a deploy pipeline that updates every time you push to GitHub.

What you'll need

Item	Details
Time	45--60 minutes, including account setup
Cost	Free. Claude Code has a free tier, GitHub is free, and Vercel's hobby plan is free
Stack	Claude Code (AI agent in your terminal), Next.js 14 (React framework), GitHub (source control), Vercel (deployment)
Prerequisites	A GitHub account, a terminal on your machine (macOS Terminal, Windows WSL, or Linux), and Node.js 18+ installed
Skill level	Zero coding required. If you can type sentences in a chat window, you can do this

If you do not have Node.js installed, run node --version in your terminal. If nothing appears, install it from nodejs.org (choose the LTS version). That alone takes two minutes and a few clicks.

How it works

You open a terminal, ask Claude Code to scaffold a Next.js project, describe the page you want, and Claude does the rest. Claude reads your instructions, writes files, runs commands, and commits to git. You push to GitHub, connect GitHub to Vercel, and your site goes live. Every future change you push to main deploys automatically.

The magic is in the loop between you and Claude Code. You do not write HTML, CSS, or JSX. You say "make the hero section taller and add a CTA button that says Start Free Trial" and Claude edits the component, shows you a diff, and asks if you want to apply it. You say yes. It commits. This is the entire workflow.

Build it

Step 1: Install Claude Code

Open your terminal. Install Claude Code from Anthropic:

npm install -g @anthropic-ai/claude-code

Verify it works:

claude --version

The first time you run claude, it prompts you to authenticate via your Anthropic account. Follow the browser-based OAuth flow. If you do not have an Anthropic account, create one at console.anthropic.com. Claude Code's free tier gives you enough usage for this entire project and many more.

Step 2: Create a project directory

mkdir my-landing-page
cd my-landing-page

Now start Claude Code in this directory. This is the command that opens a chat session where Claude can see and edit your files:

claude

The terminal transforms into a chat interface. You are now talking directly to an AI agent that has full access to your project directory. Everything you type from here forward is a conversation with Claude.

Step 3: Scaffold the Next.js project

Tell Claude to bootstrap the project. Use this exact prompt:

Create a new Next.js 14 project with TypeScript and Tailwind CSS. Use the App Router. Run the create-next-app command and set up the directory structure. Do not use the interactive prompts -- pass the flags to create-next-app directly.

Claude runs npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --no-turbopack --import-alias "@/*" (or the equivalent). It may take a minute. When it finishes, Claude confirms that the project scaffold is ready.

If Claude asks for confirmation before running a command, type "yes" or press Enter. Claude Code uses a permission system; you can grant blanket approval for the session by telling it "proceed with all commands."

Step 4: Describe your landing page

Now the real work begins. Tell Claude what you want to build. Be specific about sections, copy, and the business purpose. Here is an example prompt for a SaaS landing page:

Build a modern SaaS landing page for a product called Streamline -- an AI-powered meeting summarizer. Include these sections:

1. A hero section with a headline "Meetings that write themselves", a subheadline explaining that Streamline joins your calls, takes notes, and sends summaries to your team, and a CTA button that says "Start Free Trial"
2. A three-column features section showing: Automatic Transcription, Action Item Detection, and Slack Integration. Each card should have an icon, a feature name, and a two-sentence description.
3. A pricing section with three tiers: Free ($0/month, 5 meetings), Pro ($19/month, unlimited meetings), and Enterprise ($49/month, SSO + admin dashboard). Highlight the Pro tier as recommended.
4. A footer with the company name, copyright year, and placeholder links for Privacy Policy and Terms of Service.

Make it fully responsive. Use Tailwind CSS for all styling. Add smooth scroll behavior. Use a professional color palette: navy blue primary, white backgrounds, and an accent color for CTAs.

Claude writes the page component, the layout, and any helper components. You will see file edits scroll past in the terminal. When Claude finishes, it tells you what it built and asks if you want to see or test anything.

Step 5: Preview the page locally

Tell Claude to start the dev server:

Start the Next.js dev server so I can preview the page

Claude runs npm run dev. Open http://localhost:3000 in your browser. You should see your landing page.

Now iterate. This is where the hour really delivers. Point at anything you want to change and describe it. Example prompts that have worked for real projects:

The hero headline feels too small on mobile. Increase the font size and add more vertical padding on small screens.

Change the pricing cards. Instead of stacked vertically on mobile, make them scroll horizontally like a carousel.

Swap the placeholder icons in the features section for emoji. Use a microphone emoji for transcription, a checkbox emoji for action items, and a lightning bolt for integration speed.

Add a testimonials section between features and pricing. Show three quotes with names and titles. Use a light gray background for this section to break up the white.

Every time you ask for a change, Claude edits the relevant file and shows you the diff. Say "looks good" or "apply" to accept.

Step 6: Initialize git and commit

Once you are happy with the page, tell Claude to set up version control:

Initialize a git repository in this project and commit everything with the message "Initial landing page: Streamline SaaS site"

Claude runs git init, creates a .gitignore, and commits. It may ask you to configure your git username and email if this is your first time using git. Provide those when asked.

Step 7: Push to GitHub

Now create a GitHub repository and push your code. The fastest way:

1. Go to github.com/new in your browser
2. Name your repository (e.g., streamline-landing)
3. Leave it public (private repos work too but require a Vercel token)
4. Do NOT check "Add a README file" -- your project already has files
5. Click "Create repository"
6. Copy the three lines GitHub shows under "...or push an existing repository from the command line"

Back in your terminal, exit Claude Code by typing /exit or pressing Ctrl+C, then paste those lines. They look like this:

git remote add origin https://github.com/YOUR_USERNAME/streamline-landing.git
git branch -M main
git push -u origin main

Your code is now on GitHub. Anyone can see it. This is your source of truth.

Step 8: Deploy to Vercel

Vercel is the company that created Next.js, and their platform is the simplest way to deploy a Next.js site. Their free tier handles moderate traffic and includes automatic HTTPS.

1. Go to vercel.com and click "Sign Up"
2. Choose "Continue with GitHub" -- this lets Vercel see your repositories
3. Authorize Vercel to access your GitHub account
4. On the Vercel dashboard, click "New Project"
5. Find streamline-landing in the repository list and click "Import"
6. Vercel detects that you have a Next.js project. All settings are pre-filled correctly. Leave everything as default.
7. Click "Deploy"

Vercel builds your project and returns a URL like streamline-landing.vercel.app. Your landing page is live. Open it on your phone. Send it to someone. It works.

Step 9: Iterate and redeploy (optional)

You are not locked into this initial version. Any change you commit and push to main triggers an automatic redeploy. The workflow is:

claude                     # Start Claude Code again
# Describe your changes...
# Claude edits files and commits
git push origin main       # Vercel auto-deploys in ~30 seconds

This is the production loop. Your site evolves as fast as you can describe what you want.

What goes wrong

Mistake	How you notice it	The fix
Node.js not installed	npm or node command not found	Install from nodejs.org; takes 2 minutes
Claude Code permission denied on install	EACCES error from npm	Use sudo npm install -g @anthropic-ai/claude-code or follow npm's fixing permissions guide
Claude Code not authenticating	Stuck on auth step or "not authorized" message	Run claude logout then claude again; redo the browser OAuth flow. Check that your Anthropic account has available credits
create-next-app fails	Scary-looking error about dependency conflicts	Delete the directory, recreate it, and try again. Sometimes stale npm caches cause issues. Run npm cache clean --force before retrying
Port 3000 already in use	"Something is already running on port 3000" error	Kill the other process with `lsof -ti:3000
Page looks wrong in browser	Layout is broken, styles missing, images not loading	Check the browser console (F12, Console tab) for red error messages. Tell Claude what you see: "the pricing cards are stacked vertically on desktop instead of in a row"
Vercel build fails	Red "Build Failed" on the Vercel dashboard	Click the deployment to see build logs. Common issues: missing dependencies or TypeScript errors. Show the error to Claude and ask it to fix the issue, then commit and push again
GitHub push rejected	Error about remote containing work you don't have locally	You checked "Add a README" when creating the repo. Delete the GitHub repo, create a new one without the README, and push again. Or run git pull origin main --allow-unrelated-histories first
Vercel doesn't auto-deploy on push	You pushed but the site didn't update	Go to your project on Vercel > Settings > Git > check that the production branch is set to main. If you pushed to a different branch, Vercel only auto-deploys main (unless you configure preview deploys)
Claude Code writes something wrong	Component renders but with incorrect content or broken layout	This is normal. Be more specific. Instead of "fix the header" say "make the header sticky, change the background to white, and reduce the logo size to 32px." Claude works better with concrete feedback

The result

You now have three things:

1. A local Next.js project in my-landing-page/ that you can run anytime with npm run dev
2. A GitHub repository at github.com/YOUR_USERNAME/streamline-landing that serves as your source of truth and collaboration hub
3. A live, public URL on Vercel (streamline-landing.vercel.app) that auto-deploys every time you push to main

To verify everything works end to end, open your Vercel URL in a private browser window, scroll through every section, and test the page on your phone. Then make one small change through Claude Code, commit, push, and watch Vercel redeploy within a minute. That cycle -- describe, build, ship -- is the skill you just learned.

What you can build next

The same workflow scales. Use it for a portfolio site, a waitlist page for a new product, a job board for your industry, a documentation site, or an internal team dashboard. Any static or semi-static web page that benefits from fast iteration and zero-coding overhead is a fit. When you need a database, authentication, or server-side logic, the Next.js foundation you already have supports all of that -- Claude Code handles it with a different prompt.

Start your next project. Open a terminal. Run claude. Describe what you want.