DSA & System Design

Build · Stack builder

Pick a product. Get its architecture.

Tell us what you are building and what matters most. We draw the services, choose a sensible option for each, and show how they connect.

1 What are you building?

2 What does it need?

Switch parts on and off. Hosting and a database are always in: every app needs somewhere to run and somewhere to remember.

  • Hosting
  • Database

What matters most right now? We use it to choose a default for each box.

3 Your architecture

Balanced: 7 partsA real product. Add the later boxes only when you feel the pain.

Press play to follow a request. Click any box to open it below.

Press Play to watch it run · 4 steps

Services in this stack: Vercel, Supabase, Clerk, Stripe, Inngest or Trigger.dev, Resend (or AWS SES), Sentry.

Your app's architectureServices in this stack: Vercel, Supabase, Clerk, Stripe, Inngest or Trigger.dev, Resend (or AWS SES), Sentry.HTTPSwho is this?queriescheckoutslow jobspulls jobssendserrors, logsYour usersbrowser or phonePush to Git and your Next.js app is live, with serverless and edge functions.VercelHostingDrop-in sign-in screens, user management and sessions, hosted for you.ClerkAuthPostgres plus login, file storage and an instant API in one dashboard.SupabaseDatabaseThe most common payment platform, with hosted checkout and subscriptions.StripePaymentsA hosted job runner. You write functions, it calls them with retries and logs.Job runnerQueues and jobsA small program that takes jobs off the queue and does them in the background.Workerdoes the slow jobsSend email from your code with one API call. SES is the cheaper, rougher cousin.ResendNotificationsCatches crashes in your app and shows the exact line, user and steps.SentryObservability
  • Client
  • Service
  • API gateway
  • Database
  • External API
  • Queue
  • Worker
Open in playground
Text description
  1. Someone opens your app.
  2. The app reads from Supabase.
  3. The rows come back.
  4. The page is shown.

4 Your stack

Worth knowing

  • Serverless functions open many short connections. Use your database's pooled connection string so you do not run out.

Hosting · suggestedCompare all 5 options

Your code needs a computer that is always on and reachable from the internet. Hosting is renting that computer. Some hosts run your code only while a request is being handled (serverless), some keep a program running all day (a server or container), and you pick how much of the setup you do yourself.

Managed service

Vercel

Push to Git and your Next.js app is live, with serverless and edge functions.

Pick it when You build with Next.js and want deploys, preview links and HTTPS with no server work.

Skip it if You need long-running jobs, always-open connections or a bill you can predict under heavy traffic.

  • Deploys on every Git push, with a preview link per branch
  • Made by the Next.js team, so features work first
  • No servers to patch
  • Functions are short-lived, so long tasks do not fit
  • Cost can jump when traffic grows
  • Some lock-in to its platform features
Quick to set up
Cheap while small
Easy to leave
Room to grow

PriceFree tier for hobby use, then per seat and per use

How to connect it

  1. Push your project to GitHub.
  2. Import the repository in the Vercel dashboard.
  3. Add your environment variables under project settings.
  4. Deploy, then attach your own domain if you have one.
Put these in your .env file
  • DATABASE_URL
  • NEXT_PUBLIC_APP_URL
terminal
npm i -g vercel
vercel login
vercel          # first deploy, creates a preview link
vercel --prod   # ship to your real domain