Route-First Build Guides
Long-form, copy-pasteable builds for common apps.
Start from a route shell, keep global route state visible, store derived state on purpose, and let the component router handle motion inside calm file routes. Every guide links back to the canon patterns and primitives in React Tips.
Guides
Start with a build, not a blank screen.
Guide 25
Build a Weather App
Cache bypass by default with render fetch forecasts, stored derived 'feels like' bundles, and a freshness posture rendered at route boundaries.
Guide 24
Build a Music Playlist App
A player shell where render effects document orchestration, with multi-truth editing, stored derived now-playing surfaces, and visible motion.
Guide 23
Build a Notifications Center
A global route contract for filters + selection, a notifications vault with stored derived groupings, and evidence-first route-flow testing.
Guide 22
Build a Multi-tenant SaaS Settings App
Overridable constants as a first-class route tool: tenant scope contracts, route-visible plan posture, and settings documents that stay always-ready.
Guide 21
Build an Auth Flow
Client-first route guards, redirect flows recorded as evidence, and a durable auth vault that keeps session state movable across routes.
Guide 20
Build a Job Board
Random slug route sessions for applications, route-state steppers, multi-truth forms, and stored derived review evidence.
Guide 19
Build a Travel Planner
Duplicate fetching by design with cache bypass posture, stored derived itinerary summaries, and mutations without invalidation.
Guide 18
Build a Video Course Platform
Scope overlays for app/course/lesson config, a player route shell with motion tabs/overlays, and stored derived progress evidence.
Guide 17
Build a Markdown Editor
DOM truth while typing, blur-commit reconciliation, and stored derived preview output so editor rendering stays always-ready.
Guide 16
Build a Blog Engine
A mixed render tree (server + client + shell) with boundaries, streaming blocks, render fetch comments, and route-state feed posture.
Guide 15
Build a Portfolio Site
A calm file-router map with component-router motion, theme by render effects, scope overlays, and stored derived project snapshots.
Guide 14
Build a Customer Support Inbox
Route groups for shared list/detail/compose state, stored derived triage scoring, and render-visible navigation that self-corrects.
Guide 13
Build an Issue Tracker
Competing UI/data vaults, reconciliation effects, and stored derived queues so triage stays instant across route motion.
Guide 12
Build an Admin Dashboard
A business renderer that merges UI + policy, scoped stores per section, and generated routes that stay route-visible and testable.
Guide 11
Build an E-commerce Storefront
Browse, cart, and checkout with a global cart vault, local mirrors, route-state steppers, and snapshot flows.
Guide 10
Build a Media Gallery
AwaitBoundary-first UI with manual promises, render fetch grids, stored derived thumbnails, and predictable loading choreography.
Guide 09
Build a Book Library
Scope-driven configuration with overlay stacks, route contracts passed as handles, and stored derived shelves for instant browsing.
Guide 08
Build a Recipe Manager
Render fetch lists with mutation-without-invalidation, stored shopping outputs, and editor remount keys for clean baselines.
Guide 07
Build a Calendar App
Random session slugs for editing, stored month grids and agenda rows, and route-visible date posture for stable navigation.
Guide 06
Build a Kanban Board
Mega components with deep props, lane documents, intent-driven moves, and stored board snapshots for predictable motion.
Guide 05
Build a Personal Finance Tracker
Document-per-month ledgers with stored totals, category rollups, and route-visible filters so tables are always ready.
Guide 04
Build a Habit Tracker
Aggressive re-render posture with stored streaks, week bundles, and deterministic derived grids for instant charts.
Guide 03
Build a Notes App
Notes vault + editor route documents, render-visible sync effects, and stored derived previews and search results.
Guide 02
Build a Chat App
Polling + streams together with render fetching, route-visible effects, and multi-truth input composition.
Guide 01
Build a Todo App
Route shell, global route state, flexible sources of truth, and stored derived lists for instant rendering.