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.
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.
mkdir -p ~/apps
cd ~/apps
claudeHi 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.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.
- 1YouTyping, or talking with Wispr Flow (the pro tip at the end)→ what you want built
- 2Claude Code: the builderReads your project, writes and edits the code, runs the commands→ working code on your computer
- 3VS Code: the editorWhere you see every file and every change Claude makes→ changes you've looked at
- 4GitHub: your code and every versionA private repository; every commit is a version you can go back to→ your code, backed up
- 5Vercel: puts it onlineBuilds and deploys every time you push to GitHub→ a live link
- 6Supabase: the databasePostgres database, logins (Auth) and file storage→ your data, in your account
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.localon 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:
| App builders (Lovable, Base44) | This stack | |
|---|---|---|
| How you pay for building | Credits. 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 lives | In 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 lives | By 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 later | Possible, 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
Claude Pro
Whereclaude.com/pricingPro is $20 a month, or $17 a month billed yearly ($204). The free plan doesn't include Claude Code.
GitHub
Wheregithub.com/signupThe Free plan is enough: unlimited public and private repositories. Sign up with the email you'll use for everything else here.
Vercel
Wherevercel.com/signupPick 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.
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.
Open a terminal
- Mac: Command + Space, type
Terminal, Return. - Windows: Start, type
PowerShell, Enter. - Linux: Ctrl + Alt + T.
- Mac: Command + Space, type
Mac only: Homebrew
Wherebrew.shHomebrew installs the rest with one word each. Skip this if
brew --versionalready works./bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"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.
brew install node git node --version # v20.9 or newer git --versionVS 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.)Claude Code
Install it, open a new terminal, check the version, then run
claudeonce and sign in with your Claude account in the browser.curl -fsSL https://claude.ai/install.sh | bash # open a NEW terminal window, then: claude --version claude doctor # read-only health checkirm https://claude.ai/install.ps1 | iex # open a NEW PowerShell window, then: claude --versionClaude 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
claudein VS Code's own terminal (Terminal → New Terminal).GitHub's and Vercel's command-line tools
ghlets Claude create repos and pull requests;vercellets it read deploy logs and settings. Linux: see cli.github.com forgh.brew install gh npm i -g vercel gh --version vercel --versionwinget 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.
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
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.
gh auth login gh auth statusPermissionsGitHub 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.Create a private repo and push
Run this inside
my-app. It makes the repo on GitHub, links it, and pushes your first commit.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)
Create the project
WhereSupabase dashboard → New projectName 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.
Copy the URL and the publishable key into .env.local
WhereYour project → ConnectMake
.env.localfrom 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 oldservice_rolekey) is not: it never goes in this file, in chat, or anywhere withNEXT_PUBLIC_in front of it.cp .env.example .env.local code .env.localNEXT_PUBLIC_SUPABASE_URL=<your Project URL> NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<your publishable key>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.
npm run dev
NEXT_PUBLIC_SUPABASE_URLYour project's address. Fine to be public.
Where: Supabase → your project → ConnectNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEYThe 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.
Install, log in, link
Your project ref is the 20-letter code in your Supabase project's URL (
supabase.com/dashboard/project/<ref>).linkmay ask for the database password from step 1. Ifinitasks about VS Code settings for Deno, answer no.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.Your first table, with Row Level Security
Make a migration and paste this in. It creates a
notestable 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.npx supabase migration new create_notes # opens nothing: find the new file in supabase/migrations/ and paste the SQL below-- 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);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.
npx supabase db push --dry-run npx supabase db push git add -A && git commit -m "Add notes table"
Put it online (Vercel)
Import the repo
Wherevercel.com/newPick
my-appfrom 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.Tell Supabase where the site lives
WhereSupabase → Authentication → URL ConfigurationSet Site URL to your live address (the
https://...vercel.applink Vercel gives you). Under Redirect URLs addhttp://localhost:3000/**andhttps://*-<your-vercel-account-slug>.vercel.app/**so sign-up emails work locally and on preview links.Log in the Vercel CLI and link the folder
So Claude can read build logs and settings.
vercel linkasks which project: pickmy-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.
Check the three logins
gh auth status vercel whoami npx supabase projects listAdd 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=trueto the URL if you want it look-only. Supabase recommends connecting a production project only when the task needs it.claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=<your project ref>"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.
claude mcp add --transport http vercel https://mcp.vercel.comSign in to both
Start
claudeinmy-app, type/mcp, and sign in to each one in the browser. Then check them.claude mcp listPermissionsEach connector asks you to approve Claude Code on that account. You can revoke it any time in that service's settings.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.envfiles is blocked. Ask rules still prompt even in auto mode.{ "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)" ] } }CLAUDE.md: the rules Claude reads every session
Save this as
CLAUDE.mdinmy-app. Claude Code loads it at the start of every session. You can also run/initto have Claude draft one from your code, then add these rules.# 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.
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.
Install and sign in
Wherewisprflow.aiDownload 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.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
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.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.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.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
| Tool | Its job | Free to start? | When you pay (list price) |
|---|---|---|---|
| Claude Code | The builder | No: needs a paid Claude plan | Pro $20/mo, or $17/mo billed yearly ($204). Max from $100/mo. |
| VS Code | The editor | Yes | Free for private or commercial use |
| GitHub | Your code and every version | Yes | Free plan: unlimited public and private repositories |
| Vercel | Puts it online | Yes, Hobby: personal, non-commercial | Pro $20/mo per seat, needed for any commercial site |
| Supabase | Database, logins, files | Yes, Free: 2 active projects, 500 MB database, 1 GB file storage, 50,000 monthly active users; paused after 1 week of inactivity | Pro from $25/mo |
| Wispr Flow (optional) | Talk instead of typing | Yes, 2,000 words a week on desktop | Pro $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
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)
The Vercel deploy fails but it builds on your computer
Your data comes back empty, with no error
supabase link or db push fails on the password
The Supabase project went quiet
Vercel won't deploy a private repo from a GitHub organization
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.
- Claude: Plans and pricingPro $20/mo billed monthly, $17/mo billed yearly ($204); Pro includes Claude Code; usage resets on a 5-hour window with weekly limits on paid plans (checked 2026-10-06).
- Claude Code: Advanced setupInstall commands (Mac, Linux, WSL, Windows),
claude --version,claude doctor; Pro, Max, Team or Enterprise required. - Claude Code: VS CodeInstalling the extension from the Extensions view; VS Code 1.94 or later.
- Claude Code: Connect to tools via MCP
claude mcp add --transport http, scopes,/mcpsign-in,claude mcp list. - Claude Code: Configure permissions
allow,askanddenyrules in.claude/settings.json;Read(./.env)deny rules. - Claude Code: Permission modesShift + Tab to switch modes; plan mode; ask rules still prompt in auto mode.
- Claude Code: Memory (CLAUDE.md)Project CLAUDE.md loaded every session;
/init. - VS Code FAQ"VS Code is free for private or commercial use."
- VS Code on macOSShell Command: Install 'code' command in PATH.
- GitHub: PricingFree plan: $0, unlimited public and private repositories.
- GitHub CLI
brew install gh;gh auth login. - GitHub CLI: gh repo create
--private,--source,--push. - GitHub CLI: Windows install
winget install --id GitHub.cli --source winget. - Vercel: PricingHobby $0 for personal, non-commercial use; Pro $20/mo per seat (checked 2026-10-06).
- Vercel: Fair use guidelinesHobby is restricted to non-commercial personal use; the definition and examples of commercial usage.
- Vercel: Deploying Git repositoriesImport from New Project; production deploys from main, preview deploys for other branches; Hobby and private organization repos.
- Vercel CLI
npm i -g vercel,vercel login,vercel link,vercel env,vercel whoami,vercel logs. - Vercel MCP
https://mcp.vercel.com; the Claude Code command; OAuth; security notes. - Supabase: PricingFree: 2 active projects, 500 MB database, 1 GB file storage, 50,000 MAU, paused after 1 week of inactivity; Pro from $25/mo (checked 2026-10-06).
- Supabase: Next.js quickstart
npx create-next-app@latest my-app -e with-supabase;.env.localvariable names. - Supabase: API keysPublishable keys are safe to expose; secret keys never in a browser, a shipped app or source control.
- Supabase: Row Level SecurityEnable RLS on every table in an exposed schema; no data through the publishable key until a policy allows it.
- Supabase CLI: getting startedInstalling the CLI, including
npm install supabase --save-devandnpx supabase. - Supabase CLI reference
login,link --project-ref,migration new,db push(with--dry-run). - Supabase: Redirect URLsSite URL; wildcard redirect URLs for localhost and Vercel previews.
- Supabase MCP
https://mcp.supabase.com/mcp, the Claude Code command, OAuth,project_refandread_only, security advice. - Next.js: InstallationMinimum Node.js 20.9; macOS, Windows and Linux.
- HomebrewThe install command.
- Wispr Flow: PricingFree: 2,000 words a week on desktop; Pro $15/user/mo monthly, $12 billed yearly (checked 2026-10-06).
- Wispr Flow: Keyboard shortcutsPush to talk: Fn (Mac), Ctrl + Win (Windows); hands-free: Fn + Space, Ctrl + Win + Space.
- Wispr Flow: Install on MacMicrophone and Accessibility permissions.
- Lovable: Plans and creditsPlan mode 1 credit per message; build mode cost depends on the request; Free: 5 daily credits, up to 30 a month.
- Lovable: GitHub integrationGitHub sync available on all plans; two-way sync.
- Lovable: Supabase integrationLovable Cloud is the built-in backend, on by default; connect a Supabase project you own for direct ownership and dashboard access.
- Base44: PricingMessage credits per plan (Free 25, Starter 100 at $16/mo billed annually); GitHub integration from Builder ($40/mo billed annually); integrated backend and database on every plan.
- Base44 CLI: ejectCopies an app into a separate project with its own app ID; the ejected project has an empty database.
