Recipes
How to build the things you keep needing
The problems every builder hits — auth, payments, email, search, deploy. Each recipe: the right approach, the tools that help, a real snippet, and the gotchas nobody warns you about.
22 recipes · 20 areas
- Auth
Add authentication
Almost every app eventually needs to know who the user is — to gate pages, scope data to the right account, and bill people. Authentication is the identity layer that everything else (authorization, multi-tenancy, payments) is built on, and it's the one part of your stack you should never hand-roll.
Intermediate·~1–2 hours - Payments
Accept payments
Let users pay you money — a one-time purchase, and the mechanics you need so paid access actually gets granted reliably. Get this wrong and you either leak product to people who never paid or fail to unlock it for people who did.
Intermediate·~an afternoon - Email
Send transactional email
Transactional emails are the one-to-one messages your app sends in response to a user action: password resets, magic links, receipts, order confirmations, "someone invited you." They're not marketing — they're load-bearing, and if they land in spam or never send, users get locked out or think you took their money for nothing.
Beginner·~1 hour (plus DNS propagation wait) - Files
Handle file uploads
Almost every app eventually needs users to upload something — profile pictures, PDFs, CSVs, video. Done wrong it blows up your server, leaks private files, or lets someone upload a 2GB payload. This is how to do it so it scales and stays secure.
Intermediate·~1-2 hours - Search
Add search to your app
Search lets users find things in your app — products, docs, notes, orders — by typing words instead of scrolling or clicking through menus. Weak or missing search quietly kills retention: people expect a box that returns the right result instantly, and when it doesn't, they assume the thing they wanted isn't there.
Intermediate·an afternoon - Data
Set up a database
You need somewhere to store the data your app creates — users, posts, orders — that survives restarts and can be queried reliably. Getting this right early saves you from painful migrations and data corruption once real users show up.
Beginner·~1 hour - Realtime
Add realtime updates
Your UI shows stale data until someone hits refresh. Realtime updates push changes — new chat messages, order status, live dashboards, presence and typing indicators — to every connected client the instant they happen, so no one has to reload.
Intermediate·~1-2 hours - SEO
Get SEO right
Search engines and AI answer engines (Google AI Overviews, ChatGPT, Perplexity) drive most discovery, but they can only rank what they can crawl, understand, and load quickly. Getting SEO right means your pages actually show up when people search for what you built — instead of being invisible.
Intermediate·an afternoon - Analytics
Add analytics
You've shipped an app but you're flying blind — you don't know which pages people visit, where they drop off, or whether anyone actually uses the feature you just built. Analytics turns "I think" into "I know" so you stop guessing about what to build next.
Beginner·~1 hour - Theming
Add dark mode
Users expect to be able to switch between light and dark themes, and to have the app respect their operating system preference by default. Done wrong it flashes the wrong colors on load and leaves half the UI stuck in the old theme.
Beginner·~1 hour - Motion
Add scroll & motion
Static pages feel flat, and you want elements to reveal as the user scrolls, a scroll-progress indicator, and subtle micro-interactions — without tanking frame rate or making people motion-sick. This is about adding polish that reads as intentional, not a fireworks show.
Intermediate·an afternoon - Forms
Build forms that validate
Users fumble forms — malformed emails, blank required fields, 3-character passwords — and if you don't catch it, garbage lands in your database or your server crashes on bad input. A form that validates gives instant, clear feedback and refuses bad data before it's ever saved.
Intermediate·~1 hour - Deploy
Deploy your app
You built something that works on your laptop, but "works on my machine" helps no one. Deploying puts your app on the internet with a real URL, HTTPS, and env-based secrets so actual people can use it — and so every future change ships safely instead of breaking prod.
Beginner·~1 hour for your first deploy - Config
Manage env vars & secrets
Every app needs API keys, database URLs, and other secrets — and the #1 way vibe coders get burned is committing them to git or shipping them to the browser. This recipe is how you keep secrets out of your repo, typed and validated, and correctly wired into both local dev and production.
Beginner·~1 hour - Performance
Optimize images
Unoptimized images are the single biggest cause of slow page loads — a few oversized JPEGs can dwarf all your JS and CSS combined, tanking your LCP score, mobile data usage, and Google ranking. This recipe makes images load fast without hurting quality.
Intermediate·~1 hour - Backend
Add rate limiting
Stops one client from hammering your endpoints — brute-forcing logins, draining your email/SMS/LLM budget, or knocking the app over. Without it, a single script (or one buggy retry loop) can run up your bill or take everyone else down.
Intermediate·~1 hour - Backend
Run background jobs & cron
Some work shouldn't block an HTTP request — sending emails, generating reports, syncing third-party data, nightly cleanup. You need to run code outside the request/response cycle, either on a schedule (cron) or in response to events, and have it survive failures and restarts.
Intermediate·~1 hour - AI
Add an AI chat feature
Adds a conversational assistant to your app: the user types a question and gets an answer that streams in token-by-token. It matters because users now expect chat UX, and a 10-second blank spinner reads as broken — streaming is what makes it feel alive.
Intermediate·an afternoon - AI
Build RAG over your own docs
You have a pile of your own docs — an internal wiki, product manuals, a support knowledge base — and you want to ask questions and get answers grounded in them, with citations, instead of the model guessing. RAG (retrieval-augmented generation) fetches the passages that actually matter and feeds them to the LLM, so answers stay factual and traceable to a source.
Intermediate·an afternoon - i18n
Add internationalization (i18n)
Your app only speaks one language, and every user-facing string is hardcoded in JSX. i18n is the discipline of pulling those strings out into per-locale message catalogs and formatting numbers, dates, and plurals correctly for each locale — so you can serve users in their own language without forking your UI.
Intermediate·an afternoon for the setup; string migration is ongoing - Observability
Catch errors in production
Your app throws exceptions in production that you never see — a user hits a broken checkout, closes the tab, and never tells you. This recipe sets up automatic error tracking so every crash (client and server) reaches you with a stack trace and enough context to actually fix it.
Intermediate·~1 hour - Frontend
Ship a landing page fast
A landing page is the single URL you point people at to explain your product and capture intent — email signups, waitlist spots, or checkout. Shipping one fast lets you validate an idea, start a launch, or run ads before you've built the actual app, and momentum matters more than polish at this stage.
Beginner·an afternoon
Keep exploring
More of the library
- 383tools→Tools
Every tool, with an honest take on each.
- 8stacks→Stacks
Tool combinations that work together.
- 10showdowns→Comparisons
Honest head-to-heads with a verdict.
- 12guides→Guides
The craft of building with AI.
- 6paths→Learning paths
An ordered route through the library.
- 40prompts→Prompts
Reusable prompts worth stealing.
- 10ideas→Build ideas
Project blueprints with a stack to match.
- 52terms→Glossary
Plain-language words for what AI writes.
- 10notes→What's new
The shifts worth knowing about.