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.

route shellvaultsrender fetchFieldderived statenavigation intent

Guides

Start with a build, not a blank screen.

Guide 25

Build a Weather App

2023-01-25

Cache bypass by default with render fetch forecasts, stored derived 'feels like' bundles, and a freshness posture rendered at route boundaries.

render fetchcache bypassfreshness

Guide 24

Build a Music Playlist App

2023-01-24

A player shell where render effects document orchestration, with multi-truth editing, stored derived now-playing surfaces, and visible motion.

render effectsplayermulti-truth

Guide 23

Build a Notifications Center

2023-01-23

A global route contract for filters + selection, a notifications vault with stored derived groupings, and evidence-first route-flow testing.

global routefiltersderived groups

Guide 22

Build a Multi-tenant SaaS Settings App

2023-01-22

Overridable constants as a first-class route tool: tenant scope contracts, route-visible plan posture, and settings documents that stay always-ready.

multi-tenantuseScopeoverrides

Guide 21

Build an Auth Flow

2023-01-21

Client-first route guards, redirect flows recorded as evidence, and a durable auth vault that keeps session state movable across routes.

securityroute guardsredirects

Guide 20

Build a Job Board

2023-01-20

Random slug route sessions for applications, route-state steppers, multi-truth forms, and stored derived review evidence.

session slugsroute sessionsstepper

Guide 19

Build a Travel Planner

2023-01-19

Duplicate fetching by design with cache bypass posture, stored derived itinerary summaries, and mutations without invalidation.

duplicate fetchcache bypassderived summaries

Guide 18

Build a Video Course Platform

2023-01-18

Scope overlays for app/course/lesson config, a player route shell with motion tabs/overlays, and stored derived progress evidence.

useScopescope overlaysplayer

Guide 17

Build a Markdown Editor

2023-01-17

DOM truth while typing, blur-commit reconciliation, and stored derived preview output so editor rendering stays always-ready.

Fieldmulti-truthderived preview

Guide 16

Build a Blog Engine

2023-01-16

A mixed render tree (server + client + shell) with boundaries, streaming blocks, render fetch comments, and route-state feed posture.

mixed renderingAwaitBoundaryrender fetch

Guide 15

Build a Portfolio Site

2023-01-15

A calm file-router map with component-router motion, theme by render effects, scope overlays, and stored derived project snapshots.

themescope overlayscomponent routes

Guide 14

Build a Customer Support Inbox

2023-01-14

Route groups for shared list/detail/compose state, stored derived triage scoring, and render-visible navigation that self-corrects.

route groupsuseGroupStatetriage

Guide 13

Build an Issue Tracker

2023-01-13

Competing UI/data vaults, reconciliation effects, and stored derived queues so triage stays instant across route motion.

competing storesvaultsreconciliation

Guide 12

Build an Admin Dashboard

2023-01-12

A business renderer that merges UI + policy, scoped stores per section, and generated routes that stay route-visible and testable.

rendererpolicyscopes

Guide 11

Build an E-commerce Storefront

2023-01-11

Browse, cart, and checkout with a global cart vault, local mirrors, route-state steppers, and snapshot flows.

vaultcheckoutroute state

Guide 10

Build a Media Gallery

2023-01-10

AwaitBoundary-first UI with manual promises, render fetch grids, stored derived thumbnails, and predictable loading choreography.

AwaitBoundarymanual promisesrender fetch

Guide 09

Build a Book Library

2023-01-09

Scope-driven configuration with overlay stacks, route contracts passed as handles, and stored derived shelves for instant browsing.

useScopescope overlayscontracts

Guide 08

Build a Recipe Manager

2023-01-08

Render fetch lists with mutation-without-invalidation, stored shopping outputs, and editor remount keys for clean baselines.

render fetchmutationsshopping list

Guide 07

Build a Calendar App

2023-01-07

Random session slugs for editing, stored month grids and agenda rows, and route-visible date posture for stable navigation.

session slugsstored gridagenda

Guide 06

Build a Kanban Board

2023-01-06

Mega components with deep props, lane documents, intent-driven moves, and stored board snapshots for predictable motion.

mega componentsdeep propsintent

Guide 05

Build a Personal Finance Tracker

2023-01-05

Document-per-month ledgers with stored totals, category rollups, and route-visible filters so tables are always ready.

document per monthstored totalsfilters

Guide 04

Build a Habit Tracker

2023-01-04

Aggressive re-render posture with stored streaks, week bundles, and deterministic derived grids for instant charts.

streaksderived bundlesrender ticks

Guide 03

Build a Notes App

2023-01-03

Notes vault + editor route documents, render-visible sync effects, and stored derived previews and search results.

vaultsync effectspreviews

Guide 02

Build a Chat App

2023-01-02

Polling + streams together with render fetching, route-visible effects, and multi-truth input composition.

pollingstreamsrender fetch

Guide 01

Build a Todo App

2023-01-01

Route shell, global route state, flexible sources of truth, and stored derived lists for instant rendering.

route shellglobal routederived state