Everything a user interacts with — pages, buttons, forms, dashboards. It lives in the browser. When something needs to happen (save data, process a payment) it sends a request to the backend and displays the result. Hosting is just where it lives 24/7 — Vercel deploys your frontend automatically when you push to GitHub.
Think of it as: the shop floor — what customers walk around in. It looks nice and has clear signs, but it doesn't store the stock or handle the money.
Start with
Next.js + Tailwind + Vercel
Free / open source · Vercel hobby free
The brain of your app. It receives requests from the frontend, runs your rules ("is this user allowed to do this?", "charge them £9/mo", "send a welcome email"), talks to the database, and sends a response back. Users never see it. With Next.js, backend and frontend live in the same project — no separate server needed when starting out.
Think of it as: the staff room and manager's office — handling everything that makes the shop actually work, invisible to customers.
Start with
Next.js Server Actions / API Routes
Free — same project as your frontend
Permanent storage. Every user account, subscription status, setting, piece of content — anything that needs to survive after the browser closes — lives here. Your backend reads from and writes to the database. Without it, your app resets to zero every time someone refreshes.
Think of it as: the stock room and filing cabinets — everything that needs to persist, organised so the right people can find it.
Start with
Supabase (PostgreSQL)
Free tier (500MB) · Pro $25/mo
Handles sign up, login, logout, and password reset. More importantly — it proves to your backend that "this request is coming from user X." Without auth, anyone could read or change anyone's data. It's the bouncer at the door — and it issues wristbands that let you back in without re-checking ID every time.
Think of it as: the membership system at a gym — verifying who you are at the door, then trusting the wristband for the rest of the session.
Start with
Supabase Auth
Free — built into Supabase already
Handles charging customers — subscriptions, one-time purchases, free trials, upgrades and downgrades. You never handle card numbers yourself (that's a legal minefield). A payment processor does it securely, then fires a webhook to your backend when something happens ("user just paid", "subscription cancelled").
Think of it as: the card machine and till — you don't build that yourself, you plug into one that's already certified and trusted by banks.
Start with
Stripe
No monthly fee · 2.9% + 30¢ per transaction
Your backend sends emails automatically — welcome messages, password resets, payment receipts, upgrade prompts. You can't do this from a regular Gmail at scale — it'll get flagged as spam immediately. A transactional email service handles deliverability, open tracking, and bounce handling for you.
Think of it as: the postal service — you write the letter and hand it over. They guarantee it gets delivered properly and doesn't end up in a skip.
Start with
Resend
Free (3,000 emails/mo) · Pro $20/mo