Web Apps & Mobile — GoLive Labs

1

Starter

Chat, Build & Ship

Build and launch a real, live website using nothing but the free Claude chat interface. No installation, no terminal, no coding knowledge required. By the end you'll have a working app live on the internet with a URL you can share with anyone.

Claude Free GitHub Vercel 100% Free No Installation

🔓 Skills you'll unlock

Prompting Claude

HTML basics

GitHub repos

Vercel deployment

Getting a live URL

Iterating with AI

🎯 What You're Building ▾

A personal dashboard web page that shows a live clock, a to-do list that saves between visits, a random motivational quote, and links to your most-used sites. Everything lives in one HTML file — Claude builds it, you ship it.

Why this project? A dashboard touches every core concept — displaying information, saving data, handling user interaction — without needing a server or database. It's the perfect first project.

🛠️ Want to build your own project instead?

You don't have to build the dashboard — if you already have an idea you're excited about, build that instead. The steps are identical: Claude builds it, you put it on GitHub, Vercel makes it live.

What works well for a first project: anything that fits in a single HTML file with no user accounts, no payments, and no external APIs.

Not sure if your idea fits? Paste this into Claude first:

"I want to build [your idea] as my very first web project. I'm a complete beginner. Can this be built as a single HTML file with no database or login system? What should I include to keep it simple, and what should I leave out?"

⚙️ Step 1 — Set Up Your Accounts ▾

1

Create a free Claude account

Go to claude.ai and sign up for free. No credit card needed. The free plan is all you need for this project.

2

Create a free GitHub account

Go to github.com/signup. GitHub is where your code lives — think of it as Google Drive for websites. Free plan is all you need.

3

Create a free Vercel account

Go to vercel.com and sign up using your GitHub account. Vercel turns your GitHub code into a live website automatically. Free forever for personal projects.

🏗️ Step 2 — Build Your Dashboard with Claude ▾

1

Open Claude and start a new conversation

Go to claude.ai and click New Chat. You're going to describe your dashboard and Claude will build the entire thing for you.

2

Paste this starter prompt

Copy the prompt below exactly, then paste it into Claude and hit Enter:

"Build me a personal dashboard as a single HTML file. I want it to include: - A live clock showing the current time and date, updating every second - A to-do list where I can add tasks, check them off, and delete them. Tasks should save in the browser so they're still there when I refresh the page - A random motivational quote that changes each time I reload the page — include at least 10 quotes hardcoded in the file - 4 quick-link buttons I can customize with my favorite websites - A clean, modern dark theme with a professional look Make everything work in a single self-contained HTML file with no external dependencies. Add clear comments in the code explaining what each section does."

3

Review what Claude built

Claude will generate the full HTML file. Read through it and make sure it looks complete. If anything is missing, just describe what you want changed in plain English.

Example follow-up: "The clock looks good but I want the date to show the full day name, like Monday instead of Mon. Also change the background to navy blue."

4

Download the file

Click the download icon on the code block Claude generated, or copy all the code and paste it into a text editor. Save it as index.html.

Mac users: If using TextEdit, go to Format → Make Plain Text before pasting, then save as index.html.

🚀 Step 3 — Ship It Live with GitHub & Vercel ▾

1

Create a new GitHub repository

Go to github.com/new. Name it my-dashboard. Set it to Public. Check "Add a README file". Click Create repository.

2

Upload your index.html

Inside your new repository, click Add file → Upload files. Drag your index.html onto the page. Scroll down and click Commit changes.

3

Deploy to Vercel

Go to vercel.com/new. Click Continue with GitHub. Find your repository and click Import. Click Deploy. Wait 30 seconds.

4

Your site is live 🎉

Vercel will show you a URL like my-dashboard.vercel.app. Click it — your dashboard is now live on the internet. Share it with anyone.

Making updates: Edit the file in Claude, re-download it, go to your GitHub repo, click index.html, click the pencil edit icon, paste in the new code, and commit. Vercel republishes automatically.

💡 What you can build with these free tools

Personal dashboard

Portfolio site

Business landing page

To-do / task tracker

Link in bio page

Event countdown timer

Recipe collection

Simple quiz or poll

Price comparison tool

Resume / CV page

Newsletter signup page

Product waitlist page

💡 Finding Your Project Idea — A Framework for Picking What to Build ▾

The best first project is one you actually want to exist. Here's a proven framework for finding it:

1

Find a problem you have personally

What do you do manually that feels annoying or repetitive? What do you Google every week? What spreadsheet do you maintain that wishes it were a proper app? Build the tool that solves your own problem first.

2

Stay in scope for your current skill level

For Project 1, you want something that fits in a single page, doesn't need user accounts, and doesn't talk to external services. Good scope: a habit tracker, a reference page for your hobby, a tool to calculate something you calculate often.

3

Use Claude to validate your idea before building

"I want to build [your idea]. I'm a complete beginner and this is my first project. Is this a good scope for a single-page app with no database? What are the core features I should include and what should I leave out to keep it simple?"

2

Beginner

Build and Deploy with Claude Code

Rebuild the dashboard using Claude Code in the terminal. You'll learn how to work with a real development environment, manage files, run commands, and deploy with full control — the foundation for everything that follows.

Claude Code GitHub Vercel Terminal Git

Requires Claude Code. Claude Code is Anthropic's terminal tool that lives inside your project folder and can read files, run commands, and build full applications.

💳 Cost: ~$20/month. Claude Code requires either a Claude Pro subscription or Anthropic API credits. Typically $5–15/month for active development.

🔓 Skills you'll unlock

Terminal basics

Claude Code setup

File management

Git from terminal

CLAUDE.md

Plan Mode

Error handling

Secrets & .env files

Debugging framework

Git as undo button

🖥️ Terminal Crash Course — Everything You Need to Know ▾

The terminal is just a text-based way to control your computer. Instead of clicking icons, you type commands. Here are the only commands you'll use in this course:

pwd

Where am I?

pwd prints your current location. Think of it as asking "what folder am I in right now?"

ls

What's in this folder?

ls (Mac/Linux) or dir (Windows) lists everything in your current folder.

cd

Move to a folder

cd my-dashboard2 moves you into a folder. cd .. goes up one level. cd ~ takes you back home.

mkdir

Create a folder

mkdir my-project creates a new folder called "my-project" in your current location.

Pro tip: Press Tab to auto-complete folder and file names. Press ↑ to repeat your last command. Press Ctrl+C to cancel anything running.

🤖 Claude Code Crash Course — How to Work With It ▾

Claude Code is not a chatbot. It's an AI agent that lives inside your project folder and can actually do things — read your files, write code, run commands, install packages, and push to GitHub.

1

How you launch it

Type claude in your terminal while inside your project folder. It reads everything in that folder automatically — your files, your folder structure, your CLAUDE.md — so it already has context before you say a word.

2

How to give it instructions

Describe what you want in plain English. Be specific about the outcome, not the method. Instead of "write a function that does X", say "when the user clicks the Save button, save the form data and show a green confirmation message."

💡 The more context the better. Tell it what the app is for, who uses it, and what you're trying to achieve.

3

Plan Mode — use it before big changes

Type /plan or say "before you build anything, give me a plan." It will describe what it intends to do step by step. Review the plan, approve it, then let it build.

4

CLAUDE.md — your project's memory

Claude Code reads a file called CLAUDE.md in your project folder every time it starts. This is where you put permanent context: what the app is, what tech stack it uses, what not to change.

"Create a CLAUDE.md file for this project. Include: what the app does, the tech stack, key file names, environment variable names, and any decisions we've made that you should remember."

5

When something breaks — paste the error

Copy the exact error message from your terminal or browser console and paste it back into Claude Code. Say: "This error appeared after your last change. Fix it."

6

Git is your undo button

Before any big change, commit your working code to Git. If Claude Code breaks something badly, you can roll back to the last good state.

git add . git commit -m "working state before [change]"

🎯 What You're Building ▾

You're rebuilding your Project 1 dashboard — but this time using Claude Code in the terminal instead of the Claude chat interface. The end result looks the same, but how you get there is completely different and far more powerful.

Why rebuild something you already built? Because the point of Project 2 isn't the dashboard — it's the workflow. You're learning the development loop that every project from here forward uses: open terminal → run Claude Code → describe what you want → test it → commit to GitHub → push to Vercel.

🛠️ Want to build your own project instead?

If you already have an idea you're more excited about, build that. The workflow is identical — the dashboard is just the example. Keep it to a single-page app with no login or database for now (that's Project 3).

⚙️ Step 1 — Install Claude Code ▾

1

Open your terminal

Mac: Press Cmd + Space, type "Terminal", press Enter. Windows: Press Win key, search for "PowerShell", press Enter.

2

Install Claude Code

Paste this command into the terminal and press Enter:

curl -fsSL https://claude.ai/install.sh | sh

On Windows, use WinGet instead:

winget install Anthropic.ClaudeCode

3

Verify installation and log in

claude --version

Then start Claude Code — a browser window will open for you to log in:

claude

🏗️ Step 2 — Build Your Dashboard ▾

1

Create a project folder and start Claude Code

mkdir my-dashboard2 cd my-dashboard2 claude

2

Describe your dashboard

"Build me a personal dashboard as a single HTML file with: - Live clock showing time and date, updating every second - To-do list that saves to localStorage - Random motivational quote from a list of 10 - 4 customizable quick-link buttons - Clean dark theme, professional look Add comments explaining each section. No external dependencies."

3

Create a CLAUDE.md file

"Create a CLAUDE.md file for this project. Include what the project is, the tech stack, and note that everything should stay in a single HTML file with no external dependencies."

4

Preview in the browser

# Mac open index.html # Windows start index.html

5

Iterate and improve

Ask for changes by describing what you want. If something breaks, paste the error text from your browser console (F12 → Console) directly into Claude Code.

🔧 When Things Break — A Debugging Framework ▾

1

Open the browser console first

Press F12 (Windows) or Cmd+Option+I (Mac), click the Console tab. Red text = errors. Copy the exact error text — don't try to understand it, just copy it.

2

Give Claude Code the full picture

The best bug report includes: what you expected to happen, what actually happened, and the exact error message.

3

Git is your undo button

git log --oneline # see your recent commits git checkout abc1234 -- . # restore to that commit

4

When to simplify instead of debug

If you've spent more than 20 minutes on a bug and Claude Code keeps going in circles, ask: "Let's strip this back to the simplest version that should work, confirm it works, then add back features one at a time."

🚀 Step 3 — Deploy with Git & Vercel ▾

1

Ask Claude Code to set up git and push to GitHub

"Initialize a git repository in this project, commit all files, then give me the exact commands to push this to a new public GitHub repository called 'my-dashboard2'. Explain each step."

2

Deploy to Vercel

Go to vercel.com/new, import your GitHub repository, and click Deploy. Your site will be live within 30 seconds.

3

Future updates from the terminal

git add . git commit -m "describe your change" git push

Vercel auto-redeploys every time you push. Your live site updates within seconds.

3

Intermediate

Add Logins, a Database & Integrations

Build a real web application where anyone can visit, sign up, and create their own personal dashboard. Your first multi-user app — complete with a landing page, user accounts, a dashboard builder, and a database to save everything.

Claude Code Supabase Vercel User Auth Database React

🔓 Skills you'll unlock

React basics

User authentication

Supabase database

Sign up / login flows

Saving user data

Multi-page routing

Environment variables

CSS & layout basics

Pre-ship testing checklist

🎯 What You're Building ▾

A full-stack web app called Dashboard Creator — a platform where users sign up, log in, and build their own personal dashboard by choosing from 13 widgets (clock, weather, to-do list, Pomodoro timer, and more). Every user gets their own private dashboard saved to a real database.

Pages you'll build:
Landing page — explains what the app does and has a Sign Up button
Sign up / Login — users create an account with email and password
Dashboard builder — logged-in users customize their own dashboard with widgets
My Dashboard — the user's finished dashboard, saved and persistent

🗄️ Step 1 — Set Up Supabase (Your Free Database) ▾

What is Supabase? Supabase is a free, open-source backend platform that gives your app a database, authentication, and an API. Think of it as the engine running behind your app.

1

Create a free Supabase account

Go to supabase.com and sign up. Click New Project, give it a name like "dashboard-creator", choose a region close to you, and set a database password. Wait ~2 minutes for provisioning.

2

Get your Project URL

In the left sidebar, go to Integrations → Data API. Under API URL you'll see your project URL — https://xxxxxxxxxxxx.supabase.co. Copy it.

3

Get your anon/public key

Go to Settings → API Keys → Legacy anon, service_role API keys. Copy the key labelled anon public.

Never copy the service_role key — it has full database access and must never go in frontend code or GitHub. Only ever use the anon public key in your app.

🔐 Keeping Secrets Safe — The Most Important Habit in Development ▾

You just got your first real API credentials. This is the moment developers lose thousands of dollars — by accidentally pushing keys to a public GitHub repo. Automated bots scan GitHub constantly.

1

Always store credentials in a .env file

"Create a .env file for this project with my Supabase URL and anon key, and update the code to read from it instead of hardcoding the values."

2

Always add .env to your .gitignore

# .gitignore — these files stay local only .env .env.local node_modules/

3

Add secrets to Vercel separately

In your Vercel project go to Settings → Environment Variables and add each key there. Never put secrets in your code files.

4

What to do if you accidentally commit a secret

Immediately go to Supabase and revoke that key, then generate a new one. Don't just delete the commit — the key may already be compromised.

🏗️ Step 2 — Build the App with Claude Code ▾

1

Create a new project folder and start Claude Code

mkdir dashboard-creator cd dashboard-creator claude

2

Create a CLAUDE.md file

"Create a CLAUDE.md file for this project. The app is called Dashboard Creator — a multi-user web app built with React and Supabase. Users sign up, log in, and build a personal dashboard from 12 widgets. Credentials are stored in a .env file. Note that you should always explain your approach before writing code, keep comments clear for a beginner, and never hardcode API keys."

3

Describe the full app to Claude Code

"Build a web app called Dashboard Creator using React and Supabase. The app should have: 1. A landing page that explains the app and has Sign Up and Log In buttons 2. A sign up page where users register with email and password using Supabase Auth 3. A login page for returning users 4. A dashboard builder page (only accessible when logged in) where users can add and arrange widgets. Include these 12 widget options: - 🕐 Clock, ✅ To-do list, 💬 Quote of the day, 🔗 Quick links - 🌤 Weather (Open-Meteo, no API key), 📝 Daily notes, 📈 Habit tracker - ⏱ Pomodoro timer, 📰 RSS reader, 💰 Currency converter - 🎯 Goal of the week, 🌅 Countdown timer 5. Dashboard layout saves to Supabase so it persists between sessions 6. A logout button My Supabase URL is: [PASTE YOUR URL] My Supabase anon key is: [PASTE YOUR KEY] Store credentials in a .env file. I'm a beginner so explain your approach before writing any code."

Before running this prompt: Replace the placeholders with your actual Supabase credentials from Step 1.

4

Start the development server

"Install all dependencies and start the development server so I can see the app in my browser."

Claude Code will run npm install and npm start. Your app will open at localhost:3000.

5

Test the full user flow

Visit the landing page → sign up as a new user → build a dashboard → log out → log back in and verify your dashboard is still there.

🎨 CSS & Layout Fundamentals — How to Control How Things Look ▾

1

Everything is a box

Every element on a webpage is a rectangular box. CSS controls the size (width, height), the space inside it (padding), the space outside it (margin), and its border (border).

2

Flexbox: the layout tool you'll use most

Adding display: flex to a container puts its children in a row. justify-content: center centers them horizontally. align-items: center centers them vertically. That's 80% of what you'll need.

3

Describing visual problems to Claude Code

Don't say "fix the layout". Say: "The login button is touching the top of the input field — I want 16px of space between them." Specific, visual, measurable descriptions get better results.

🚀 Step 3 — Deploy to GitHub and Vercel ▾

1

Push to GitHub

"Initialize git, create a .gitignore that excludes .env files, commit everything, and give me commands to push to a new GitHub repository called 'dashboard-creator'."

2

Add environment variables in Vercel

Import your repo on vercel.com/new. Before clicking Deploy, scroll to Environment Variables and add:

Key: VITE_SUPABASE_URL Value: https://xxxxxxxxxxxx.supabase.co

💡 Click Import .env and paste your entire .env file — Vercel parses both keys automatically.

3

Deploy and test the live app

Click Deploy. Once live, test sign up and login on the real URL — not just locally.

✅ Testing Your App Before and After Shipping ▾

Happy path: Sign up → build a dashboard → log out → log back in → confirm dashboard saved
Error states: Try to sign up with an already-used email. Try logging in with the wrong password.
Mobile check: Open Chrome DevTools (F12), click the phone icon to toggle mobile view at 375px width.
Console check: F12 → Console. Are there any red errors during normal use?
Second browser: Open your app in an incognito/private window to simulate a fresh user.
Live URL test: After deploying, repeat the happy path on the real Vercel URL.

🔌 Step 4 — Add Integrations (Google SSO + AI Widget) ▾

1

Google SSO — Let users sign in with their Google account

Google SSO means users click "Continue with Google" instead of creating a password. Supabase handles all the complexity.

Part 1 — Create a Google Cloud project:

1. Go to console.cloud.google.com → New Project → name it "dashboard-creator".
2. Go to APIs & Services → OAuth consent screen → Get started. Fill in App name + support email.
3. Select External audience. Complete the setup wizard.
4. Go to Clients → + Create Client → Web application.
5. Add your Supabase URL to Authorized JavaScript origins.
6. Add https://xxxx.supabase.co/auth/v1/callback to Authorized redirect URIs.
7. Click Create. Copy the Client ID and Client Secret.

Part 2 — Enable Google in Supabase:

1. Supabase → Authentication → Providers → Google → Enable.
2. Paste your Client ID and Client Secret. Save.
3. Authentication → URL Configuration → set Site URL to your Vercel URL.
4. Add https://your-app.vercel.app/** and http://localhost:5173/** to Redirect URLs.

"Add Google SSO to my Dashboard Creator app using Supabase Auth. Add a 'Continue with Google' button to both the sign up and login pages. Keep the existing email/password option."

2

Ask Claude Anything — Add an AI widget

Add a 13th widget called Ask Claude Anything. Users get a chat input on their dashboard to ask Claude questions without leaving the app.

Step 1: Get a Claude API key at console.anthropic.com. Add it to .env as ANTHROPIC_API_KEY.

"Add a 13th widget called 'Ask Claude Anything'. It shows a text input and Send button. When the user types a question, it calls the Claude API (claude-haiku-4-5-20251001) via a serverless function at /api/claude and displays the response. Keep the API key server-side only — never expose it in the frontend."

Cost note: Claude Haiku is very affordable — typical dashboard usage costs less than $1/month. Set a usage limit in the Anthropic Console under Billing → Usage Limits.

4

Advanced

Admin Dashboard

Add a private admin area to your Dashboard Creator where you can see every user who has signed up, manage their accounts, view what they've built, and control their membership status. The foundation of any real SaaS business.

Claude Code Supabase Role-Based Access User Management Admin Panel

🔓 Skills you'll unlock

User roles & permissions

Admin-only routes

Database queries

Password reset flows

Data tables & sorting

Membership tiers

🎯 What You're Building ▾

The admin area is only visible to you — regular users can't access it. You'll have a private dashboard at /admin that shows:

A table of all users — name, email, signup date, last login
What dashboard widgets each user has created
Whether each user is on a free or paid plan
Ability to send a password reset email to any user
Ability to deactivate or delete a user account
Summary stats — total users, new this week, paid vs free

🔐 Step 1 — Set Up Admin Role in Supabase ▾

1

Ask Claude Code to add a role system

"I want to add an admin area to my Dashboard Creator app. Before writing any code, give me a plan for: 1. How to add a role field to users (admin vs regular) 2. How to protect the /admin route so only admin users can access it 3. What database tables or changes I'll need in Supabase 4. How to make my account the first admin Walk me through the plan step by step before changing anything."

2

Apply the database changes

Once you've reviewed and approved Claude's plan, ask it to implement the Supabase changes. Claude Code will give you SQL commands to run in the Supabase SQL editor.

🏗️ Step 2 — Build the Admin Panel ▾

1

Build the admin UI

"Build an admin panel at /admin that is only accessible to users with the admin role. It should include: 1. An overview section showing: total users, users who signed up this week, number of paid vs free users 2. A users table with columns: email, signup date, last login, plan (free/paid), number of dashboards created 3. For each user: a button to send them a password reset email, a button to view their dashboards, and a button to deactivate their account 4. The table should be sortable by signup date and searchable by email Redirect non-admin users away from /admin immediately."

2

Test with a second user account

Sign up with a second email address to create a regular user account. Log into your admin account and verify the new user appears in the table. Try accessing /admin while logged in as the regular user — it should redirect away.

3

Deploy the update

git add . git commit -m "add admin panel" git push

5

Pro

Monetization — Charge for Premium Features

Add real payment processing to your Dashboard Creator. Users pay $1 to unlock a premium dashboard section — you collect the money, Stripe handles everything else. Your first dollar from software you built yourself.

Claude Code Stripe Supabase Payments Webhooks Subscriptions

🔓 Skills you'll unlock

Stripe integration

Payment flows

Webhooks

Gating features by payment

Serverless functions

Real revenue

🎯 What You're Building ▾

The flow you'll build: A user sees a locked premium widget. They click "Unlock for $1". A Stripe checkout page opens. They pay. They're sent back to your app. The widget is now unlocked — permanently, stored in your database.

Premium widget is visually locked for free users with an "Unlock for $1" button
Clicking opens Stripe's hosted checkout — you never handle card details
After payment, Stripe sends a webhook to your app to confirm
Your app updates the user's record in Supabase to mark them as paid
The widget unlocks immediately — no page refresh needed

💳 Step 1 — Set Up Stripe ▾

Sandbox vs Live:

Use Test Mode when: you are still building and testing. No real money moves. Use fake card numbers Stripe provides.

Switch to Live Mode when: the app works end-to-end in test mode and you're ready to charge real users.

1

Create a free Stripe account

Go to stripe.com and sign up. You don't need a business name or bank account to start testing.

2

Make sure you're in Test Mode

Check the top right of your Stripe dashboard — make sure Test mode is ON.

Important: Test keys start with sk_test_ and pk_test_. Live keys start with sk_live_ and pk_live_. Always double-check.

3

Create a $1 product and find your Price ID

In the left sidebar go to Product Catalog → + Add Product. Fill in:

Name: Premium Access (or whatever fits your app)
Pricing model: Standard pricing
Price: $1.00
Billing period: Monthly (for a recurring subscription) or One time

Where to find your Price ID:

After clicking Save, you'll land on the product detail page. Scroll down to the Pricing section — there's a table listing your price. In the far right column you'll see a value that starts with price_ — for example: price_1ABcDeFgHiJkLm.

Click the copy icon next to it. This is your Price ID. Paste it into your code where you see priceId or STRIPE_PRICE_ID. Don't confuse it with the Product ID, which starts with prod_.

4

Get your test API keys

Go to Developers → API Keys. Copy your Publishable key (pk_test_...) and Secret key (sk_test_...). The secret key goes in your .env file only.

🏗️ Step 2 — Build the Payment Flow ▾

1

Ask Claude Code to add Stripe checkout

"Add a payment flow to my Dashboard Creator app using Stripe. Here's what I need: 1. A premium widget on the dashboard that is locked/blurred for free users with an 'Unlock for $1' button 2. Clicking creates a Stripe Checkout session and redirects the user to Stripe's payment page 3. After successful payment, Stripe redirects back to my app and a webhook fires 4. The webhook updates the user's record in Supabase to mark them as a paid member 5. The premium widget unlocks for that user permanently My Stripe publishable key: [YOUR PUBLISHABLE KEY] My Stripe price ID: [YOUR PRICE ID] Store the secret key in .env Before coding, explain your plan for the webhook and how it connects Stripe to Supabase."

2

Test with Stripe's test card

Use card number 4242 4242 4242 4242, any future expiry date, and any 3-digit CVV. No real money is charged.

3

Set up the webhook endpoint in Stripe

A webhook is how Stripe tells your app "the payment went through." Here's how to register it:

Important: Webhooks need a real public URL — Stripe can't reach localhost. Push your app to Vercel first (even a test deploy is fine), then use that URL here.

1

In the Stripe dashboard, click Developers in the bottom-left corner. In the panel that opens, click Webhooks, then + Add destination.

2

Step 1 — Select events: Click Your account (the left card). Then use the search box to find and check these three events:
checkout.session.completed
customer.subscription.deleted
invoice.payment_failed
Click Continue →

3

Step 2 — Choose destination type: Select Webhook endpoint. Click Continue →.

4

Step 3 — Configure: In the Endpoint URL field, paste your Vercel URL + /api/webhook:
https://your-app.vercel.app/api/webhook
Click Add destination to save.

5

You'll land on the webhook detail page. Find Signing secret and click Reveal. It starts with whsec_ — copy it.

6

In Vercel → Settings → Environment Variables, add STRIPE_WEBHOOK_SECRET and paste the whsec_ value. Redeploy.

🚀 Step 3 — Deploy and Go Live ▾

1

Add Stripe keys to Vercel environment variables

In your Vercel project → Settings → Environment Variables. Add your Stripe publishable key, secret key, and webhook signing secret.

2

Register your live webhook URL in Stripe

Once deployed: Developers → Workbench → Webhooks → + Add destination. Enter your Vercel URL + /api/webhook. Select checkout.session.completed. Copy the new whsec_ secret — add to Vercel as STRIPE_WEBHOOK_SECRET.

Note: Your local and live webhook secrets are different — Stripe generates a new one for each endpoint.

3

Switch to live mode

In Stripe, toggle from Test Mode to Live Mode. Replace test API keys in Vercel with live keys. Charge yourself $1 to confirm everything works.

Congratulations. You've built a complete SaaS product — authentication, a database, an admin panel, and real payment processing.

6

Ninja

Mobile App

Convert your Dashboard Creator into a mobile app that users can download and install on their iPhone or Android. Your users get a native app experience — yours to build, yours to distribute.

Claude Code React Native Expo iOS Android App Store

🔓 Skills you'll unlock

React Native

Expo setup

Mobile UI patterns

App testing on device

iOS & Android builds

App Store prep

🎯 What You're Building ▾

Same app, native experience. Your existing Dashboard Creator logic and Supabase database stay exactly the same. You're converting the frontend into React Native so it runs natively on phones — not just in a mobile browser.

Users sign up and log in on their phone
Dashboard builder adapted for touch and mobile screen sizes
Their data stays in the same Supabase database as the web app
Testable on your phone immediately using the Expo Go app
Ready to submit to the App Store and Google Play

⚙️ Step 1 — Set Up Expo ▾

What is Expo? Expo is a free framework that lets you build real iOS and Android apps using React — the same language you already used. Without Expo, building a mobile app would require Xcode (Mac only, 12GB+), Android Studio, and complex native build tools. Expo handles all of that for you.

1

Check that Node.js is installed

node --version

If you get "command not found", go to nodejs.org, download the LTS version, and install it.

2

Create a new Expo project

npx create-expo-app dashboard-creator-mobile cd dashboard-creator-mobile claude

3

Install Expo Go on your phone

Search for Expo Go in the App Store (iPhone) or Google Play (Android) and install it. This is free. Make sure your phone and computer are on the same WiFi network.

🏗️ Step 2 — Convert Your App to Mobile ▾

1

Ask Claude Code to convert the app

"I have a React web app called Dashboard Creator that uses Supabase for auth and data. I want to convert it into a React Native / Expo mobile app. Before building anything: 1. Explain what changes when going from React web to React Native 2. List which parts of my existing code I can reuse vs what needs to be rewritten 3. Give me a plan for converting each screen Then build the mobile version screen by screen, starting with auth."

2

Preview on your phone in real time

npx expo start

A QR code appears in your terminal. Open Expo Go on your phone and scan it. Your app appears on your phone instantly — updating live as Claude Code makes changes.

3

Refine for mobile experience

"Review the app on mobile and identify anything that doesn't feel native — buttons too small to tap, text too small to read, layouts that don't use the screen well. Fix each issue and explain what you changed."

📋 Step 3 — Requirements to Go Live in the App Store & Google Play ▾

1

Create an Apple Developer account ($99/year)

Go to developer.apple.com/programs and enroll. Required to publish any iOS app. Once enrolled, you get access to App Store Connect.

Note: You can only build iOS apps from a Mac. On Windows, use EAS Build (Expo's cloud build service).

2

Create a Google Play Developer account ($25 one-time)

Go to play.google.com/console. $25 one-time fee — you never pay again. Google review is faster and less strict than Apple.

3

Create an Expo account and set up EAS

Sign up free at expo.dev. EAS (Expo Application Services) compiles your app into the binary files the stores require.

npm install -g eas-cli eas login eas build:configure

4

Prepare app identity, icon, and store listing

"Update my app.json with the correct name, slug, iOS bundleIdentifier, and Android package name for Dashboard Creator. Then help me set up my app icon and splash screen, and write App Store and Google Play listing copy."

Privacy policy required: Both stores require a privacy policy URL. Ask Claude Code: "Generate a basic privacy policy for Dashboard Creator and add it as a page at /privacy on my Vercel app."

🏗️ Step 4 — Build and Submit for Both Stores ▾

1

Build for iOS (App Store)

eas build --platform ios --profile production eas submit --platform ios

Build takes 10-20 minutes in the cloud. Apple reviews within 1-3 days.

2

Build for Android (Google Play)

eas build --platform android --profile production eas submit --platform android

3

Build both at the same time

eas build --platform all --profile production

4

Let Claude Code guide you through the full submission

"Walk me through submitting Dashboard Creator to both the App Store and Google Play using EAS Build and EAS Submit. I have an Apple Developer account and a Google Play Console account. Walk me through each step — I haven't done this before."

7

Creator

Build Your Own

You've shipped six real projects. You know how to build with AI, deploy to the internet, add auth, store data, take payments, and ship mobile apps. Now it's time to build the thing you actually want to exist in the world.

Claude Code Your Stack Your Idea

🔓 What you bring to this project

Shipping with AI

Auth + databases

Deploying to the web

Payment processing

Mobile apps

Building fast

🎯 What You're Building ▾

Your project. Your rules. There are no requirements here except one: build something real and ship it. It should be something you'd actually use, sell, or be proud to show someone.

This could be anything — a tool that solves a problem you have, a SaaS product, a portfolio site, a mobile app, a side business, or something completely new. The only limit is your imagination.

Pick an idea you care about — the more personal, the better
Use whatever stack makes sense (you know them all now)
Get it live with a real URL before you consider it done
Share it — with friends, on social media, or in the GoLive Labs Project Library

💡 Step 1 — Define Your Idea ▾

Before writing a single line of code, get your idea clear. The biggest mistake builders make is starting to build before they know what they're building.

1

Ask Claude to help you refine your idea

"I want to build [your idea]. Help me define the MVP — what are the 3-5 core features that must exist for this to be useful? What can I cut for later? What's the simplest version I can ship in a week?"

2

Define who it's for

The clearest ideas have a specific person in mind. "A tool for freelance designers to send invoices" beats "an invoicing app." The more specific your user, the easier every decision becomes.

3

Write one sentence that describes it

If you can't explain your product in one sentence, you don't understand it well enough yet. Keep refining until you can: "[Product name] helps [who] do [what] so they can [benefit]."

🏗️ Step 2 — Choose Your Stack and Plan the Build ▾

You've already built with most of these. Pick the right tool for what you're building — not the fanciest one.

1

Pick your stack

Use what you already know. A simple landing page or tool: HTML/CSS/JS + Vercel. A multi-user web app: React + Supabase + Vercel. Payments: add Stripe. Mobile: React Native + Expo. Don't overcomplicate it.

2

Let Claude help you plan it out

"I'm building [one-sentence description]. My stack is [your stack]. Before we write any code, give me: 1. A list of all the pages/screens I need 2. The database tables and fields required 3. A build order — what to build first so I always have something working 4. Any gotchas I should know about before I start"

3

Set up your project and repo

Create a new GitHub repo, connect it to Vercel (or Expo for mobile), and make sure you can see a live preview before writing any real features. Deploy first, build second — that's the GoLive Labs way.

🚀 Step 3 — Build and Ship ▾

You know how to do all of this. Trust the process, build feature by feature, and keep Claude Code in the driver's seat for the heavy lifting.

1

Follow these steps — your launch checklist

Every project starts the same way. Work through this in order and you'll never get stuck on setup:

1

Create your project folder — Make a new folder on your computer and open it in the terminal with claude

2

Create a .env file — Add your Supabase URL, anon key, and any other secrets here. Never commit this file.

3

Create a CLAUDE.md file — Describe your project, stack, and conventions so Claude Code has context in every session. Update it as you build.

4

Start building — Tell Claude Code what you're making and ask it to scaffold the project structure and first screen.

5

Review locally — Run the app on your machine and test every feature before moving on. Fix issues as you go, not at the end.

6

Set up Supabase — Create your project, define your tables, enable RLS, and copy your keys into .env.

7

Set up GitHub — Create a new repo, add a .gitignore (include .env), and push your initial code.

8

Set up Vercel — Connect your GitHub repo, add your environment variables in the Vercel dashboard, and deploy.

9

Push live — Every git push deploys automatically. Share the URL and get real feedback.

10

Continue to build — Keep shipping features. Each push goes live instantly. Iterate based on what real users tell you.

2

Build one feature at a time

Don't try to build everything at once. Finish each feature before starting the next. A working login screen is worth more than five half-finished features.

3

Get unstuck fast

"I'm building [feature]. Here's what's happening: [describe the problem]. Here's the relevant code: [paste it]. What's wrong and how do I fix it?"

Always give Claude context: what you're trying to do, what's happening instead, and the relevant code. You'll get unstuck in seconds.

4

Ship early, improve after

Get a live URL as soon as you have something that works — even if it's rough. Shipping forces clarity. You'll learn more from one real user than from a hundred hours of building in private.

5

Share it here

When you're done, come back and check "Save to my Project Library" and "Share with the GoLive Labs Project Library" below. Your project will appear in the community showcase for other students to see.

✨ Need an Idea? Start Here ▾

Stuck on what to build? The best ideas solve real problems — usually ones you've had yourself. Here are some starting points:

A tool for your job — something that automates a task you do manually every week
A simple SaaS — pick a niche and charge for access (you know how to do Stripe now)
A personal project — budget tracker, habit app, recipe organizer, anything you'd actually use
A portfolio site — showcase the six projects you've already built
An AI-powered tool — use the Claude API to build something that reads, writes, or analyzes
A client project — find a local business that needs a website or web app and build it for them

Ask Claude for ideas too: "I know how to build web apps with React, Supabase, and Stripe. I'm interested in [your hobbies/job/problems]. What are 10 product ideas I could build and ship in under two weeks?"

8

Expert

Launch Checklist

Your app is built and deployed — now make it feel professional. Connect a real domain, add your legal pages, then run an AI-powered audit to get a scored breakdown of your site and a prioritised list of what to fix before you start marketing.

Claude API Custom Domain Vercel Legal Pages

🔓 Skills you'll unlock

Custom domains

DNS configuration

Legal pages

Claude API

AI site auditing

Launch readiness

🎯 What You're Doing ▾

The last mile matters. A project deployed to a Vercel subdomain feels like a prototype. The same project on a real domain with legal pages and a polished audit score feels like a real product — and investors, users, and clients treat it differently.

In this project you'll:

Buy and connect a real custom domain to your Vercel deployment
Add a Privacy Policy and Terms & Conditions (using pre-built templates)
Run an AI-powered site audit that scores your product and tells you exactly what to fix

🌐 Step 1 — Connect a Custom Domain ▾

A custom domain costs about $10–15/year and immediately makes your project look professional. Here's how to set one up:

1

Buy a domain

Go to Namecheap, Cloudflare Registrar, or Google Domains and search for your domain name. Aim for a .com if possible — it costs around $10–12/year. Avoid hyphens and keep it short and memorable.

2

Add the domain in Vercel

In your Vercel project → Settings → Domains → Add. Type your domain name and click Add. Vercel will show you the DNS records you need to configure.

3

Configure DNS

Go back to your domain registrar's DNS settings. Add the records Vercel gave you — usually an A record pointing to Vercel's IP (76.76.21.21) and a CNAME record for www pointing to cname.vercel-dns.com.

DNS propagation takes 5–30 minutes. If it doesn't work immediately, wait and try again.

4

SSL is automatic

Once DNS propagates, Vercel automatically provisions an SSL certificate (the padlock icon). Your site will be live at https://yourdomain.com. No extra steps needed.

5

Update your Supabase site URL

If your app uses Supabase auth, go to Supabase → Authentication → URL Configuration and update the Site URL to your new domain. Also add it to Redirect URLs. Otherwise OAuth and email links will redirect to the wrong place.

📄 Step 2 — Add a Privacy Policy & Terms ▾

Legal pages are not optional. If your app collects any user data — even just an email address — you are legally required to have a Privacy Policy in most jurisdictions. It also builds trust: users are more likely to sign up when they can see you take privacy seriously.

1

Use Claude Code to generate your pages

The fastest approach: ask Claude Code to generate a Privacy Policy and Terms & Conditions tailored to your specific app.

"Generate a Privacy Policy and Terms & Conditions for my web app. Here's what it does: [describe your app]. It collects: [email, payment info, usage data, etc.]. It uses these third-party services: [Supabase, Stripe, Vercel, etc.]. Make them professional but readable — not legalese."

2

Add them as pages in your project

Create privacy-policy.html and terms.html (or the equivalent for your stack). Match the design of your existing site. Keep URLs clean: yourdomain.com/privacy and yourdomain.com/terms.

3

Link them from your footer

Add links to both pages in your site's footer so they're accessible from every page. Also link to Privacy Policy on any signup or checkout form — it's a best practice and often legally required.

4

Alternative: use a generator

For more comprehensive coverage, use Termly (termly.io) or Iubenda — both offer free tiers that generate policies you can embed or link to. Good for apps handling payments or sensitive data.

🔍 Step 3 — Run Your AI Site Audit AI-Powered

Enter your project URL below and Claude will audit your site across six dimensions — design, content, trust, SEO, conversion, and performance — then give you a prioritised list of exactly what to fix before you start marketing.

Web Apps& Mobile

Web Apps
& Mobile