Tutorialthe whole build, step by step

Make apps like a pro for $20 a month (Claude Code stack)

The five-tool stack for building real apps you own: Claude Code writes it, VS Code shows it, GitHub keeps every version, Vercel puts it online, Supabase holds the data. Set up all five and give Claude the keys, safely.

By Eric Snyder, founder 14 min readChecked on Oct 6, 2026
Save this guidereceiptsgroup.com/guides/own-your-app-stack
SetupA few hours, most of it sign-ups and installs
Running costClaude Pro $20 a month (checked 2026-10-06). VS Code and GitHub free. Vercel and Supabase free to start; see the costs table for when they aren't.
You needA computer, an email address, and a paid Claude plan
Works onMac, Windows or Linux
Safe by defaultKeys never leave .env.local and Vercel. Claude asks before every push, deploy and database change.
In this guide
Start here
  1. The easy way: let Claude set it up with you
The manual way
  1. How the five fit together
  2. Why own the stack instead of an app builder
  3. Make the accounts
  4. Install the tools
  5. Start the app
  6. Put it on GitHub
  7. Set up the database (Supabase)
  8. Put it online (Vercel)
  9. Give Claude Code the keys (safely)
  10. First test: build a feature end to end
  11. Pro tip: talk instead of typing (Wispr Flow)
  12. Real use: prompts for real jobs
  13. What it costs
  14. Rules that keep you out of trouble
  15. When it breaks
  16. Sources, checked Oct 6, 2026

Here's the whole idea. You tell Claude Code what you want. It writes the code. You watch it in VS Code. GitHub keeps every version. Vercel puts it online every time you push. Supabase holds your data, your logins and your files. The only one with a monthly bill to start is Claude, at $20.

And it's all yours: the code sits in your GitHub, the database in your Supabase account, the site in your Vercel account. receiptsgroup.com runs on this stack, and so does our CRM and dialer.

This guide sets up all five, connects them, and gives Claude Code access to each one so it can run them for you, with a stop for your yes before anything goes live.

Checked on Oct 6, 2026

Start herepart 1

The easy way: let Claude set it up with you

Two things first, by hand: get Claude Pro at claude.com/pricing and install Claude Code (one command, in Install the tools below). Then paste one prompt and Claude walks you through the rest, one step at a time. You do the clicks that need your accounts; Claude does the typing.

bashMake the folder and start Claude in it
mkdir -p ~/apps
cd ~/apps
claude
PromptThe setup prompt (copy all of it)
Hi Claude. Please be my patient setup helper. I don't code: one step at a time, tell me exactly what to type or click, and wait for me after each step.

Goal: set up my own app stack so I can build real apps with you:
- you (Claude Code) write the code
- VS Code is where I see it
- GitHub keeps the code and every version of it
- Vercel puts it online every time we push
- Supabase is the database (data, logins and file storage)

Follow this guide. Its manual-way sections are the source of truth for every command, file and menu path:
https://receiptsgroup.com/guides/own-your-app-stack

Steps, in order. Check what's already installed before installing anything:
1. Check node, git, code, gh and vercel are installed (the guide's "Install the tools" section). Install what's missing, one at a time, after telling me what it is.
2. Walk me through the accounts I still need: GitHub, Vercel (Hobby, signed up with GitHub), Supabase (Free, signed in with GitHub). I do the sign-ups myself.
3. Create the starter app in this folder with: npx create-next-app@latest my-app -e with-supabase
4. Log in the GitHub CLI (gh auth login; I do the browser part), then create a PRIVATE repo from the app and push it.
5. Walk me through creating the Supabase project in the dashboard. I copy the Project URL and publishable key into .env.local myself. Never ask me to paste a key into this chat.
6. Set up the Supabase CLI in the project (npm install supabase --save-dev, then npx supabase login, init and link), and push the guide's first migration, with a dry run first.
7. Walk me through importing the repo on Vercel and adding the two environment variables, then the Supabase URL Configuration step.
8. Log in the Vercel CLI and link the project. Add the Supabase and Vercel MCP servers from the guide, then tell me to type /mcp to sign in.
9. Write CLAUDE.md and .claude/settings.json from the guide's boxes.
10. Finish with the guide's first test.

Rules:
- Never read, print or ask for keys, tokens or passwords. Tell me which line of .env.local to fill in and let me do it.
- Never commit .env.local or any .env file.
- Ask me before: installing anything, git push, any Vercel deploy, and npx supabase db push.
- If a step fails, show me the error and the guide's fix before trying something else.

Start with step 1.
The manual wayparts 2 to 16

How the five fit together

This is the manual way: every account, command and file. Use it by hand, or keep it open to check what Claude is doing.

  1. 1
    YouTyping, or talking with Wispr Flow (the pro tip at the end)→ what you want built
  2. 2
    Claude Code: the builderReads your project, writes and edits the code, runs the commands→ working code on your computer
  3. 3
    VS Code: the editorWhere you see every file and every change Claude makes→ changes you've looked at
  4. 4
    GitHub: your code and every versionA private repository; every commit is a version you can go back to→ your code, backed up
  5. 5
    Vercel: puts it onlineBuilds and deploys every time you push to GitHub→ a live link
  6. 6
    Supabase: the databasePostgres database, logins (Auth) and file storage→ your data, in your account
The loop: you ask, Claude builds, you check it locally, Claude commits, you say yes to the push, and Vercel has it live a minute or two later.

Words you'll see

  • Repository (repo): your project's folder on GitHub, with its full history.
  • Commit / push: a commit saves a version on your computer; a push sends it to GitHub (and, here, to Vercel).
  • Deploy: Vercel building your app and putting it online.
  • Environment variable: a setting like a key or a URL that lives outside the code, in .env.local on your computer and in Vercel's settings.
  • Migration: a file that changes the database (add a table, a column). Kept in GitHub like the code.
  • Row Level Security (RLS): Supabase's rules for who can read or change which rows.
  • CLI: a command-line tool (gh, vercel, supabase). Logged in once, Claude can run it for you.
  • MCP: a connector that lets Claude talk to a service (Supabase, Vercel) directly.

Why own the stack instead of an app builder

App builders like Lovable and Base44 are a fast way to get a first version on screen, and both let you get code out. The difference is who holds the pieces and how you pay. Here's what their own pages say, checked 2026-10-06:

From Lovable's and Base44's own docs and pricing pages, linked in the sources. Plans change: check before you choose.
App builders (Lovable, Base44)This stack
How you pay for buildingCredits. Lovable: plan mode is 1 credit per message, build mode varies with the request; the free plan gets 5 a day. Base44: monthly message credits (25 on Free, 100 on Starter).Claude Pro, $20 a month, with usage limits that reset every 5 hours plus weekly limits. No per-message credits.
Where the code livesIn the builder, synced to GitHub if you connect it. Lovable: two-way GitHub sync on every plan. Base44: GitHub sync from the Builder plan up.In your GitHub repository, from the first commit.
Where the database livesBy default, on their platform. Lovable's built-in backend (Lovable Cloud) is on by default; you can connect a Supabase project you own instead. Base44 includes its own backend and database.In your own Supabase account, with full dashboard access.
Changing tools laterPossible, with work. For example, Base44's eject copies your app into a new project with an empty database.Each piece is a standard tool. Swap any one without rebuilding the rest.

Make the accounts

  1. Claude Pro

    Pro is $20 a month, or $17 a month billed yearly ($204). The free plan doesn't include Claude Code.

  2. GitHub

    The Free plan is enough: unlimited public and private repositories. Sign up with the email you'll use for everything else here.

  3. Vercel

    Pick Hobby and Continue with GitHub, so Vercel can see your repositories.

    PermissionsVercel asks to read your GitHub repositories so it can deploy them. You can limit it to the repos you pick.
  4. Supabase

    Sign in with GitHub. The Free plan gives you 2 active projects.

Install the tools

You'll install Node.js (runs the app on your computer), Git, VS Code, Claude Code, and two command-line tools: GitHub's gh and Vercel's vercel. Supabase's command-line tool installs inside the project later. Windows works natively; every command below has a Windows line where it differs.

  1. Open a terminal

    • Mac: Command + Space, type Terminal, Return.
    • Windows: Start, type PowerShell, Enter.
    • Linux: Ctrl + Alt + T.
  2. Mac only: Homebrew

    Wherebrew.sh

    Homebrew installs the rest with one word each. Skip this if brew --version already works.

    bashInstall Homebrew (Mac)
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  3. Node.js and Git

    Next.js needs Node.js 20.9 or newer. On Windows, use the installers: the LTS from nodejs.org and Git for Windows (Claude Code uses its Git Bash too). Open a new terminal afterwards.

    bashMac
    brew install node git
    node --version   # v20.9 or newer
    git --version
  4. VS Code

    Download and install it. It's free for private or commercial use. On a Mac, open VS Code, press Command + Shift + P, and run Shell Command: Install 'code' command in PATH, so code . opens a folder from the terminal. (The Windows installer sets this up for you.)

  5. Claude Code

    Install it, open a new terminal, check the version, then run claude once and sign in with your Claude account in the browser.

    bashMac, Linux, WSL
    curl -fsSL https://claude.ai/install.sh | bash
    # open a NEW terminal window, then:
    claude --version
    claude doctor   # read-only health check
    powershellWindows PowerShell
    irm https://claude.ai/install.ps1 | iex
    # open a NEW PowerShell window, then:
    claude --version
  6. Claude Code inside VS Code

    In VS Code press Command + Shift + X (Mac) or Ctrl + Shift + X (Windows), search Claude Code, and install the one from Anthropic. It adds a Claude panel that shows each change as a diff you can review before accepting. You can also just run claude in VS Code's own terminal (Terminal → New Terminal).

  7. GitHub's and Vercel's command-line tools

    gh lets Claude create repos and pull requests; vercel lets it read deploy logs and settings. Linux: see cli.github.com for gh.

    bashMac
    brew install gh
    npm i -g vercel
    gh --version
    vercel --version
    powershellWindows PowerShell
    winget install --id GitHub.cli --source winget
    npm i -g vercel
    # open a NEW PowerShell window, then:
    gh --version
    vercel --version

Start the app

One command makes a Next.js app that's already wired to Supabase, with sign-up, login and password reset pages built in. It also starts your Git history with a first commit.

bashMake the app and open it in VS Code
cd ~/apps
npx create-next-app@latest my-app -e with-supabase
cd my-app
code .

Good: VS Code opens on a folder with app/, components/, lib/ and .env.example. Don't run it yet: it needs your Supabase keys first (two sections down).

Put it on GitHub

  1. Log in the GitHub CLI

    Pick GitHub.com, HTTPS, yes to authenticating Git, and log in with a web browser. It shows a one-time code to paste on the page it opens.

    bashLog in
    gh auth login
    gh auth status
    PermissionsGitHub asks you to authorize GitHub CLI on your account. That's what lets Claude create repos and push for you, so keep this login on your own computer only.
  2. Create a private repo and push

    Run this inside my-app. It makes the repo on GitHub, links it, and pushes your first commit.

    bashCreate and push
    gh repo create my-app --private --source=. --push
    gh repo view --web

Good: your browser shows the repo with your files. .env.local is not there, and never will be: the starter's .gitignore already blocks .env*.local and .env.

Set up the database (Supabase)

  1. Create the project

    WhereSupabase dashboard → New project

    Name it, generate a strong database password and save it in your password manager (the CLI asks for it later), and pick the region closest to your users.

  2. Copy the URL and the publishable key into .env.local

    WhereYour project → Connect

    Make .env.local from the example file, open it in VS Code, and paste the two values yourself. The publishable key is made to be public. The secret key (and the old service_role key) is not: it never goes in this file, in chat, or anywhere with NEXT_PUBLIC_ in front of it.

    bashMake .env.local
    cp .env.example .env.local
    code .env.local
    .env.local
    NEXT_PUBLIC_SUPABASE_URL=<your Project URL>
    NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<your publishable key>
  3. Run it locally and sign up

    Open localhost:3000, click Sign up, and use your email. Supabase sends a confirmation email; after you confirm, you're logged in to your own app. Stop it with Ctrl + C.

    bashRun
    npm run dev
NEXT_PUBLIC_SUPABASE_URL

Your project's address. Fine to be public.

Where: Supabase → your project → Connect
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

The browser-safe key. Row Level Security decides what it can reach.

Where: Supabase → your project → Connect (older projects call it the anon key; it works here too)

Database changes as files: the Supabase CLI

Every table you add should be a migration file in your repo, so GitHub has the history of your database too, and Claude can write the next one. The CLI installs inside the project, so it works the same on Mac and Windows.

  1. Install, log in, link

    Your project ref is the 20-letter code in your Supabase project's URL (supabase.com/dashboard/project/<ref>). link may ask for the database password from step 1. If init asks about VS Code settings for Deno, answer no.

    bashIn my-app
    npm install supabase --save-dev
    npx supabase login
    npx supabase init
    npx supabase link --project-ref <your project ref>
    Permissionssupabase login opens your browser to approve the CLI on your Supabase account. It saves an access token on your computer; don't share it.
  2. Your first table, with Row Level Security

    Make a migration and paste this in. It creates a notes table where each logged-in user only ever sees their own rows. Supabase's rule: turn on RLS for every table, because without it the publishable key can read the table.

    bashMake the file
    npx supabase migration new create_notes
    # opens nothing: find the new file in supabase/migrations/ and paste the SQL below
    sqlsupabase/migrations/<timestamp>_create_notes.sql
    -- A notes table: each signed-in user sees and edits only their own notes.
    create table public.notes (
      id bigint generated always as identity primary key,
      user_id uuid not null default auth.uid() references auth.users (id) on delete cascade,
      body text not null,
      created_at timestamptz not null default now()
    );
    
    alter table public.notes enable row level security;
    
    create policy "Users manage their own notes"
      on public.notes
      for all
      to authenticated
      using ((select auth.uid()) = user_id)
      with check ((select auth.uid()) = user_id);
  3. Push it, dry run first

    Good: the dry run lists your one migration; the real push applies it, and the table shows up in Supabase's Table Editor with RLS enabled.

    bashApply the migration
    npx supabase db push --dry-run
    npx supabase db push
    git add -A && git commit -m "Add notes table"

Put it online (Vercel)

  1. Import the repo

    Pick my-app from your GitHub list. Vercel detects Next.js by itself. Open Environment Variables and add the same two lines from your .env.local (name and value). Click Deploy.

  2. Tell Supabase where the site lives

    WhereSupabase → Authentication → URL Configuration

    Set Site URL to your live address (the https://...vercel.app link Vercel gives you). Under Redirect URLs add http://localhost:3000/** and https://*-<your-vercel-account-slug>.vercel.app/** so sign-up emails work locally and on preview links.

  3. Log in the Vercel CLI and link the folder

    So Claude can read build logs and settings. vercel link asks which project: pick my-app.

    bashIn my-app
    vercel login
    vercel link
    vercel env ls

From now on, a push is a deploy. Every push to main becomes a production deployment; every other branch gets its own preview link. Claude pushes only after you say yes (that's in the settings file below).

Give Claude Code the keys (safely)

This is the part that makes it feel like having a developer. Claude Code can already run gh, vercel and npx supabase, because you logged them in. Two connectors (MCP servers) add direct access to Supabase and Vercel, and two files tell Claude how to behave.

  1. Check the three logins

    bashAll three should answer with your account
    gh auth status
    vercel whoami
    npx supabase projects list
  2. Add the Supabase connector, scoped to this project

    Supabase's official MCP server lets Claude look at your tables, run queries, read logs and search Supabase's docs. Scope it to one project. Add &read_only=true to the URL if you want it look-only. Supabase recommends connecting a production project only when the task needs it.

    bashIn my-app
    claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=<your project ref>"
  3. Add the Vercel connector

    Vercel's official MCP server lets Claude search Vercel's docs, look at your projects and deployments, and read deploy logs. Vercel's own warning: it acts with the same access as your Vercel account.

    bashIn my-app
    claude mcp add --transport http vercel https://mcp.vercel.com
  4. Sign in to both

    Start claude in my-app, type /mcp, and sign in to each one in the browser. Then check them.

    bashCheck
    claude mcp list
    PermissionsEach connector asks you to approve Claude Code on that account. You can revoke it any time in that service's settings.
  5. The settings file: what Claude may do without asking

    Create .claude/settings.json. Builds, diffs and commits run freely; pushes, Vercel commands and the real database push ask you first; reading your .env files is blocked. Ask rules still prompt even in auto mode.

    json.claude/settings.json
    {
      "permissions": {
        "allow": [
          "Bash(npm run *)",
          "Bash(git status)",
          "Bash(git diff *)",
          "Bash(git add *)",
          "Bash(git commit *)",
          "Bash(npx supabase migration new *)",
          "Bash(npx supabase db push --dry-run)"
        ],
        "ask": [
          "Bash(git push *)",
          "Bash(vercel *)",
          "Bash(npx supabase db push)"
        ],
        "deny": [
          "Read(./.env)",
          "Read(./.env.local)",
          "Read(./.env.*.local)"
        ]
      }
    }
  6. CLAUDE.md: the rules Claude reads every session

    Save this as CLAUDE.md in my-app. Claude Code loads it at the start of every session. You can also run /init to have Claude draft one from your code, then add these rules.

    markdownCLAUDE.md
    # My app
    
    Built with: Next.js (App Router), Supabase (database, logins, file storage), deployed on Vercel from GitHub.
    
    ## Commands
    - `npm run dev`: run it locally at http://localhost:3000
    - `npm run build`: must pass before any push
    - `npx supabase migration new <name>`: every database change is a migration file in supabase/migrations
    - `npx supabase db push --dry-run`, then `npx supabase db push`: apply migrations (ask me first)
    
    ## How we work
    - Plan first for anything bigger than a small fix. Show me the plan, then build.
    - Small changes, one feature at a time. Run `npm run build` after each change.
    - Commit with a clear message. Ask me before `git push`: a push to main goes live on Vercel.
    - Turn on Row Level Security on every new table, with a policy, in the same migration.
    
    ## Secrets
    - Keys live only in .env.local (on my machine) and in Vercel's environment variables. Never in code, chat, commits or screenshots.
    - Only NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY may be used in browser code.
    - Never use a Supabase secret or service_role key in anything with NEXT_PUBLIC_ in front of it.
    - Never read or print .env.local.
    
    ## When something breaks
    - Read the error first. For a failed deploy, check the Vercel build logs (vercel logs, or the Vercel MCP) before changing code.

Commit both files (git add -A && git commit -m "Claude settings") so they travel with the project.

First test: build a feature end to end

Start claude in my-app, press Shift + Tab until it says plan mode, and paste this. Claude plans first; you approve; it builds.

PromptPrompt: a notes page
Add a /notes page for logged-in users: a box to write a note, a list of my notes, newest first, using the notes table we just made. Plan it first and wait for my yes. Then build it, run npm run build, and commit. Don't push.

Then check it yourself: npm run dev, log in, add two notes. Look at the changes in VS Code's Source Control panel. When it's right, tell Claude to push. Vercel builds it, and the live link has your notes page a minute or two later.

Good: two different accounts never see each other's notes. That's Row Level Security doing its job.

Pro tip: talk instead of typing (Wispr Flow)

Most of this work is describing what you want. Wispr Flow turns your voice into text in any app, including the terminal and VS Code, so you hold a key and talk your prompts instead of typing them.

  1. Install and sign in

    Download it for Mac or Windows, open it, and sign in.

    PermissionsOn a Mac it asks for Microphone (to hear you) and Accessibility (to type the words into other apps). If you skipped one: System Settings → Privacy & Security → Microphone or Accessibility, and turn on Wispr Flow.
  2. Hold the key and talk

    Default push-to-talk: hold Fn on a Mac, Ctrl + Win on Windows. Let go and the text appears where your cursor is. Hands-free mode: Fn + Space (Mac), Ctrl + Win + Space (Windows). You can change the keys in its settings.

The free plan covers 2,000 words a week on desktop. Pro is $15 a month, or $12 a month billed yearly, for unlimited dictation (checked 2026-10-06).

Real use: prompts for real jobs

Prompt1. A new feature, the safe way
I want <describe the feature>. Plan it first: which pages, which tables, which migration. Wait for my yes. Build it in small steps, run npm run build after each, and commit. Ask me before pushing.
Prompt2. A database change
Add <what you need> to the database as a new migration in supabase/migrations, with Row Level Security and a policy in the same file. Show me the SQL, run npx supabase db push --dry-run, and wait for my yes before the real push.
Prompt3. A failed deploy
My last Vercel deploy failed. Read the build logs with the Vercel MCP or vercel logs, tell me the cause in one sentence, fix it, run npm run build, and commit. Ask before pushing.
Prompt4. A safety check before launch
Read-only review: check every table has Row Level Security on, no secret or service_role key is used in browser code or committed anywhere, and .env files are gitignored. List anything wrong with the fix. Don't change anything yet.

What it costs

List prices checked 2026-10-06 on each tool's pricing page (sources below). Prices change: check before you buy.
ToolIts jobFree to start?When you pay (list price)
Claude CodeThe builderNo: needs a paid Claude planPro $20/mo, or $17/mo billed yearly ($204). Max from $100/mo.
VS CodeThe editorYesFree for private or commercial use
GitHubYour code and every versionYesFree plan: unlimited public and private repositories
VercelPuts it onlineYes, Hobby: personal, non-commercialPro $20/mo per seat, needed for any commercial site
SupabaseDatabase, logins, filesYes, Free: 2 active projects, 500 MB database, 1 GB file storage, 50,000 monthly active users; paused after 1 week of inactivityPro from $25/mo
Wispr Flow (optional)Talk instead of typingYes, 2,000 words a week on desktopPro $15/mo, or $12/mo billed yearly

To build and test: $20 a month. To run a business app on it: add Vercel Pro ($20 a month per seat), and Supabase Pro (from $25) once you outgrow the free tier or can't have the project pause. Claude Pro's usage resets every five hours, with weekly limits on top; bigger builds can hit them, and Max raises them.

Rules that keep you out of trouble

When it breaks

claude, gh or vercel: command not found
Open a new terminal window after installing. Still missing? For Claude Code, claude doctor and its troubleshooting page show the PATH fix for your shell.
The local site shows an error about Supabase environment variables
.env.local is missing or a value is blank. Check both lines, then stop and restart npm run dev.
Sign-up email links go to localhost on the live site (or the other way round)
Set Site URL and Redirect URLs in Supabase → Authentication → URL Configuration, as in the Vercel section.
The Vercel deploy fails but it builds on your computer
Usually a missing environment variable in Vercel. Add both, then redeploy. Ask Claude to read the build logs (prompt 3).
Your data comes back empty, with no error
Row Level Security is on with no policy that matches, or you're not logged in. Check the table's policies in Supabase.
supabase link or db push fails on the password
It's the database password from when you created the project, not your Supabase login. Reset it in the project's Database settings if it's lost.
The Supabase project went quiet
Free projects pause after a week of inactivity. Restore it from the dashboard; upgrade to Pro if it can't pause.
Vercel won't deploy a private repo from a GitHub organization
Hobby can't deploy private repos owned by an organization. Use a repo on your personal account, or Vercel Pro.

That's the stack

Five tools, one monthly bill to start, and every piece in your name: the code in your GitHub, the data in your Supabase, the site in your Vercel. Claude Code does the typing; you do the deciding.

Build the first small thing this week. A notes page is boring on purpose: once it works end to end, everything after it is the same loop.

Checked on Oct 6, 2026 against

Every claim about a third-party tool in this guide (plans, prices, menu paths, commands, limits) was checked against these official pages on Oct 6, 2026. These screens change often: if something looks different, trust the page over this guide.

Rather skip the setup?

Want help setting this up?

Receipts Group builds these systems. Thirty minutes with Eric tells you which piece is worth building first, or that none of them are. The guides stay free either way.

Keep going

more free guides