Track · ~10 months · 42 nodes
Full-Stack.
Frontend + Backend depth, with the seams that connect them.
Foundations
What full-stack means and the request lifecycle end to end.
- What is full-stack?The role, the stack, and what 'owning a feature' means.
- Request lifecycle end to endFollowing one request from a click to the database and back.
- The client-server contractHTTP, JSON, and the agreement both halves must honor.
- Dev environment setupRunning client, server, and database together locally.
- Git workflowBranches, PRs, and shipping across frontend and backend.
Frontend essentials
Enough frontend to build the client half well.
- HTML & CSS foundationsSemantic markup and layout, the client's visible half.
- JavaScript & TypeScriptThe one language that runs both ends of your stack.
- React fundamentalsComponents, props, and state for the client.
- UI state & formsControlled inputs, validation, and form UX on the client.
- Client-side data fetchingCalling your API, loading states, and caching with TanStack Query.
Backend essentials
Enough backend to build the server half well.
- Node & the runtimeThe server-side JS runtime and the event loop.
- Building an APIRoutes, handlers, and returning JSON from the server.
- DatabasesRelational basics and storing your app's data.
- ORMs & queriesPrisma or Drizzle: typed database access from TypeScript.
- Server-side validationNever trusting the client — validating at the boundary.
The seam
Where frontend meets backend — the full-stack core.
- End-to-end TypeScriptOne type system from database row to React prop.
- Shared types & validationOne source of truth for shapes on client and server, via Zod.
- Contracts with tRPCTypesafe client-server calls with no schema duplication.
- SSR & data flowServer vs client rendering and where data is fetched.
- Errors across the stackOne error reaching from server failure to client UI.
- Monorepos with TurborepoOne repo for client, server, and shared packages.
Data layer
Modeling, migrations, uploads, and realtime across the stack.
- Data modelingDesigning schemas your whole app can live with.
- Migrations & seedingEvolving the schema safely and seeding dev data.
- Caching strategiesWhere to cache across the stack, and invalidation.
- File uploads end to endFrom a file picker to object storage and back.
- Realtime full-stackWebSockets and live updates from server to UI.
Auth & sessions
Identity that spans client and server.
Production
Ship, test, monitor, and tune the whole app as one.
- Deployment as one unitShipping client, server, and database together.
- Environment & configEnv vars, secrets, and dev/staging/prod parity.
- E2E testing with PlaywrightTesting the whole app the way a user actually uses it.
- Monitoring full-stackErrors and metrics from the browser through the server.
- Performance end to endFrom Core Web Vitals to slow queries, the whole chain.
- CI/CD for full-stackTest, build, and deploy both halves on every push.
Beyond the basics
Next.js depth, system design, and the job hunt.
- Next.js full-stackServer actions, route handlers, and the all-in-one frame.
- Working with AI toolsBuilding across the stack with AI without shipping bugs.
- Full-stack system designDesigning a whole app: data, API, client, and deploy.
- Scaling considerationsWhere a full-stack app strains first, and what to do.
- Portfolio projectsShipping full apps that prove you can own a feature.
- Get hired (full-stack)Portfolio, resume, and interviews spanning both halves.
Outcomes
When you finish this track:
- Build and deploy a complete app — React client, typed API, database — as one unit.
- Share one TypeScript type system from the database row to the React prop.
- Own a feature end to end: data model, API, UI, auth, tests, and deploy.
Schedule
~272 hours total.
At 8–10 hours a week, that’s about 10 months. Each stage has its own pace.
- Foundations
- Frontend essentials
- Backend essentials
- The seam
- Data layer
- Auth & sessions
- Production
- Beyond the basics