Full-Stack Developer Roadmap

Module 1

Before React, before Tailwind — understand the platform. Modern HTML and CSS can do far more than most developers realize, and getting the fundamentals right makes everything that follows easier.

• Semantic HTMLStructure machines and humans understand
• The Box ModelEverything is a box, sized somehow
• FlexboxOne-dimensional layout that just works
• CSS GridTwo-dimensional layout for real designs
• Custom PropertiesCSS variables for design tokens
• Responsive DesignMobile-first media queries and clamp()

Project: Build the Vault marketing site: responsive landing with hero, feature grid, pricing cards and footer. Semantic HTML, CSS custom properties for a consistent color system, 95+ Lighthouse accessibility — no frameworks, no libraries.

Module 2

React, Next.js, Node — they're all JavaScript. Developers who struggle with frameworks almost always have JS gaps. This module fills them with the exact patterns you'll use in component code and API handlers.

• let, const & ScopeHow variables actually work in modern JS
• Destructuring & SpreadSyntax you'll write daily
• Array Methodsmap, filter, reduce — how React renders lists
• Promises & async/awaitFetch data without losing your mind
• Fetch & Error HandlingThe browser's HTTP client
• ClosuresWhy React hooks even work
• The Event LoopWhy your code runs when it runs
• ES ModulesHow modern JS projects are organized

Project: Build an interactive bookmark manager in vanilla JS: fetch from a mock API, render a filterable/sortable list, add debounced search, handle loading and error states, persist to localStorage. This becomes the prototype for Vault.

Module 3

TypeScript catches bugs at write-time instead of runtime. Learn to describe the shape of your data, type your functions, and let the editor tell you when something's wrong before users find out.

• Primitives & InferenceWhy you don't have to annotate everything
• Interfaces & Type AliasesDescribe your data
• Union Types & NarrowingDiscriminated unions for real states
• GenericsReusable code that stays type-safe
• Utility TypesPartial, Pick, Omit, Record
• Typing React Props & EventsFC, ChangeEvent, MouseEvent
• tsconfig & strict ModeSettings that catch the most bugs

Project: Convert the bookmark manager to TypeScript: define interfaces for Bookmark, Collection, User; type every function; use discriminated unions for status (unread | read | archived); enable strict mode; watch the compiler catch three real bugs.

Module 4

React's core idea is simple: UI = f(state). Learn to decompose interfaces into components, manage state at the right level, and extract reusable hooks — the patterns that separate clean React from spaghetti.

• JSX & ComponentsTurn data into UI
• Props & CompositionPassing data and children down
• useStateWhere component state lives
• useEffectSynchronizing with the outside world
• useRefValues React shouldn't re-render on
• Custom HooksExtract logic components shouldn't own
• ContextShare state without prop drilling
• useReducerComplex state, predictable transitions
• Avoiding useEffect PitfallsWhen you don't need an effect

Project: Rebuild Vault's bookmark manager as a React app: sidebar with collections, main panel with bookmark grid, detail drawer, add-bookmark modal with URL validation, command palette (Cmd+K). Use useState, useReducer, context for active collection, and a custom useDebounce hook.

Module 5

Tailwind isn't just utility classes — it's a design system you author in code. Learn to build a consistent, dark-mode-aware UI without reinventing buttons every project, with Radix and shadcn/ui as the accessibility floor.

• Utility-First Mental ModelWhy styling in markup is faster
• Design TokensColors, spacing, typography as variables
• Dark Modeclass strategy and prefers-color-scheme
• Radix PrimitivesAccessible behavior, your styling
• shadcn/ui PatternCopy, own, and customize components
• Responsive TailwindMobile-first breakpoints in practice

Project: Style Vault end-to-end with Tailwind: design tokens via @theme, dark mode toggle, a Button/Input/Dialog set built on Radix Primitives, focus-visible rings everywhere, and a responsive layout that works from 320px to 1440px.

Module 6

Next.js gives React the pieces it's missing — routing, server rendering, data loading, and performance optimization. Learn the App Router model and the rendering strategies that make full-stack React actually work.

• App Router Mental ModelFile-based routing in 2026
• Layouts & TemplatesPersistent vs re-rendered shells
• Pages & Dynamic Segments[slug], [...catchall], optional params
• Server vs Client ComponentsThe most important mental model
• Data Fetchingfetch in server components and revalidation
• Loading & Error UISuspense streaming and error.tsx
• Metadata & SEOgenerateMetadata, sitemap, robots
• Image & Font Optimizationnext/image and next/font

Project: Migrate Vault to Next.js: route groups for marketing (/) and app shell (/app), server components for the bookmark list, loading.tsx skeletons, /app/collections/[id] with parallel routes for collection detail + bookmark grid, full SEO metadata and a sitemap.

Module 7

Your Next.js API routes and server actions run on Node. Understanding the runtime — the event loop, streams, environment config — makes you a better full-stack developer, not just a framework user.

• How Node.js WorksV8 + libuv in plain English
• The Node Event LoopConcurrency without threads
• StreamsProcess data without loading it all
• Environment Variablesdotenv and configuration patterns
• npm & package.jsonDependencies, scripts, lockfiles

Project: Build a Node.js script that scrapes a URL's metadata (title, description, og:image) for Vault's add-bookmark feature. Handle redirects, timeouts and malformed HTML, use environment variables for config, and use streams for efficient HTML parsing.

Module 8

Build your backend inside Next.js. API routes handle external requests; server actions handle form submissions and mutations. Together, they give you a complete backend without a separate server.

• Route HandlersGET, POST, PUT, DELETE in route.ts
• Server ActionsMutations from a form, no API needed
• RevalidationrevalidatePath and revalidateTag
• MiddlewareAuth checks, redirects, request transformation
• Validation with ZodNever trust the client
• Error HandlingConsistent error responses across the API

Project: Build Vault's backend: API routes for bookmark CRUD with filtering and sorting, a server action for the add-bookmark form that fetches metadata and saves to the DB, Zod-validated input, middleware that rejects unauthenticated requests with proper error responses.

Module 9

Forms and server state are where most full-stack apps get messy. React Hook Form + Zod handle the first; TanStack Query handles the second. Learn the patterns real teams ship in 2026.

• React Hook Form BasicsPerformant forms without re-render storms
• Zod-Validated FormsOne schema, client and server
• TanStack Query Mental ModelServer state vs client state
• QueriesuseQuery, keys, staleTime
• Mutations & InvalidationUpdate the server, then the UI
• Optimistic UpdatesUI updates before the server replies

Project: Wire Vault's UI to the backend: every form (add bookmark, edit collection, settings) on React Hook Form + Zod with field-level errors, every list and detail view on TanStack Query with optimistic mutations, retries, and proper invalidation after server actions.

Module 10

Wire Vault to a real backend. Supabase gives you Postgres, authentication, file storage, and real-time subscriptions — and lets the database enforce who sees what via Row-Level Security.

• Schema DesignTables and relationships in Postgres
• Supabase Client in Next.jsSSR, middleware, cookie auth
• Email & OAuth AuthLogin flows that actually work
• Sessions & Protected RoutesServer-side auth in App Router
• Row-Level SecurityLet the database enforce permissions
• Writing RLS PoliciesUSING and WITH CHECK in practice
• Real-Time SubscriptionsLive data without polling
• StorageUploads, signed URLs, access policies

Project: Connect Vault to Supabase: schema (users, bookmarks, collections, tags), RLS so users only see their own data, email + Google OAuth login with session handling in Next.js middleware, real-time subscriptions for cross-tab sync, and PDF/image attachments in Supabase Storage with signed download URLs.

Module 11

Add AI users actually want. Call OpenAI from your server, stream responses to the frontend, and build features that feel magical — while handling cost, latency, and failure like a real product.

• OpenAI from the ServerChat completions, system prompts, models
• Streaming with the AI SDKToken-by-token responses to the UI
• Structured OutputsJSON mode validated by Zod
• Embeddings & pgvectorSemantic search inside Postgres
• Basic RAGAnswer questions using your own data
• Retries & Cost TrackingPer-user budgets and graceful failure

Project: Build three AI features for Vault: (1) auto-summarize on save with suggested tags via a server action, (2) semantic search over bookmarks using embeddings + pgvector, (3) ask-your-vault — a chat UI that answers questions using saved bookmarks as context (basic RAG). All streaming, with retries and a per-user budget.

Module 12

A great API isn't just functional — it's predictable, consistent, and self-documenting. Refactor Vault's API to follow conventions that make other developers (and your future self) productive.

• URL DesignNouns, nesting, and the patterns everyone expects
• Status CodesWhen to return 200 vs 201 vs 204 vs 422
• Pagination & FilteringCursor-based pagination and sort syntax
• Error ResponsesRFC 7807 problem details
• Rate LimitingPer-user, per-IP, per-key
• Security HeadersCORS, CSP, CSRF protection

Project: Refactor Vault's API: cursor-based pagination on /api/bookmarks, filters and sort, RFC 7807 error responses, per-user rate limiting, proper CORS/CSP headers, and an OpenAPI spec documenting every endpoint with examples.

Module 13

A full-stack app without tests is one you'll be afraid to change. Learn the modern stack — Vitest, React Testing Library, Playwright, MSW — and the right ratio of unit, integration, and end-to-end tests.

• The Testing PyramidUnit, integration, e2e — how much of each
• Vitest BasicsTests, assertions, watch mode
• React Testing LibraryTest what users actually see
• Mocking with MSWMock the network, not your modules
• Playwright e2eReal browser, real flows
• CI IntegrationGitHub Actions running everything on every PR

Project: Build a test suite for Vault: Vitest unit tests for utilities, React Testing Library for components and forms, MSW to mock the Supabase and OpenAI clients, Playwright for two end-to-end flows (signup → first bookmark; ask-your-vault), all running on every PR in CI.

Module 14

Code on your laptop isn't a product. Deploy Vault to Vercel with environment-aware config, then add the observability that lets you debug at 3am — error tracking, Web Vitals, and structured logs you can actually search.

• Deploying to VercelProduction, preview, and per-PR deploys
• Environment ConfigurationPer-environment env vars and secrets
• Database Migrations on DeploySchema changes without downtime
• Error Tracking with SentrySee production errors before users tell you
• Web VitalsLCP, INP, CLS in real-user terms
• Structured LoggingJSON logs with request IDs
• CI/CD on GitHub ActionsTest, build, deploy on merge

Project: Deploy Vault to Vercel with preview deployments, environment variables for prod/preview/dev, Sentry for error tracking, Vercel Analytics for Web Vitals, structured logging with request IDs, and a CI/CD pipeline that runs tests and deploys on merge.