A comprehensive, opinionated mega-guide covering every pattern, philosophy, and hard skill needed to become a frontend architect who ships production mobile and web apps that millions of people use — organized as a narrative that builds from first principles to deployment to operational excellence.
61 chapters · 7 parts + appendices · Read this to become a frontend beast.
100x-frontend-guide/
├── part-0-fundamentals/ ← The Hard Parts: JS engine, async, DOM, React from scratch, TypeScript (4 chapters)
├── part-1-foundations/ ← Internals: RN architecture, rendering, browser, TS at scale, build toolchain (5 chapters)
├── part-2-react-native-expo/ ← Mobile: Expo, EAS, navigation, styling, lifecycle, deep links, storage, device APIs, a11y, assets, micro-interactions (11 chapters)
├── part-3-state-data-communication/ ← Data: state management, fetching, caching, offline, forms, real-time, GraphQL (8 chapters)
├── part-4-architecture-at-scale/ ← Scale: performance, profiling, monorepos, design systems, testing, CI/CD, architecture, caching, images, DB, errors, search, budgets, UX, components (16 chapters)
├── part-5-deployment-operations/ ← Ship: monitoring, Firebase, security, metrics, payments, auth, feature flags, email, analytics, releases (10 chapters)
├── part-6-vercel-web/ ← Web: Vercel, Next.js, AI SDK, DX, beast mode, PWAs, agentic UI (7 chapters)
├── appendices/ ← Reference: glossary, reading list, cheat sheets
├── course/ ← 60 hands-on modules building TicketFlow
└── README.md ← You are here
You're a frontend engineer who's tired of building things that break in production, slow down at scale, and make your teammates' lives harder. Maybe you're the senior engineer who gets pulled into every performance fire drill. Maybe you're the tech lead who needs to make architecture decisions that'll outlast this quarter's sprint. Maybe you're the ambitious mid-level who wants to understand why things work, not just how to make them work.
This guide is for you if:
- You build with React Native and Expo and want to master the internals, not just the APIs
- You deploy to Vercel and want to understand the platform deeply, not just
git push - You want EAS builds, OTA updates, and app store submissions to be second nature
- You believe state management has a correct answer for each use case, and you want to know what it is
- You want your CI/CD pipeline to catch bugs before your users do
- You want to understand monitoring, metrics, and crash analysis well enough to maintain 99.9% crash-free rates
- You want to architect systems that make other engineers more productive, not just ship your own features
If you want to be the person your team calls when things are on fire — and the person who prevents fires in the first place — keep reading.
| Your Goal | Start Here | Then |
|---|---|---|
| Learn from zero | Part 0: Ch 0 → 0b → 0c → 0d | Part I, then Part II |
| Ship a mobile app fast | Ch 6 (Expo), Ch 7 (EAS) | Ch 10 (lifecycle), Ch 8 (navigation), Ch 9 (state) |
| Fix performance problems NOW | Ch 3 (rendering), Ch 14 (mobile perf) | Ch 15 (profiling), Ch 44 (perf budgets) |
| Architect a new project | Ch 16 (monorepo), Ch 17 (design systems) | Ch 20 (FE architecture), Ch 48 (component arch) |
| Level up to staff+ | Ch 20 (FE architecture), Ch 31 (beast mode) | Ch 22 (caching arch), Ch 47 (UX paradigms) |
| Set up monitoring | Ch 22 (Sentry/Crashlytics), Ch 23 (Firebase) | Ch 43 (analytics), Ch 25 (metrics) |
| Master Vercel & Next.js | Ch 27 (Vercel platform), Ch 28 (Next.js) | Ch 29 (AI SDK), Ch 32 (PWAs) |
| Add real-time features | Ch 42 (WebSockets/SSE), Ch 41 (collaboration) | Ch 13 (offline/real-time), Ch 46 (GraphQL) |
| Set up auth & payments | Ch 33 (authentication), Ch 26 (payments) | Ch 24 (security), Ch 37 (feature flags) |
| Prepare for on-call | Ch 31 (beast mode), Ch 22 (monitoring) | Ch 36 (error handling), Ch 45 (release mgmt) |
| Quick lookup | Glossary | Cheat Sheet |
The hard parts. What JavaScript actually does under the hood, how the DOM works, and React from first principles.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 0 | JavaScript — The Hard Parts | Beg→Inter | Execution context, call stack, event loop, closures, promises under the hood, async/await, generators, microtask queue, prototypes |
| 0b | UI Development — The Hard Parts | Beg→Inter | DOM as C++ (WebCore/WebIDL), data binding, one-way data flow, virtual DOM from scratch, diffing algorithm, declarative UI, UI composition |
| 0c | React — From First Principles | Beg→Inter | JSX compilation, components, props/state, hooks (useState/useEffect/useRef/useReducer/useContext), custom hooks, React 19 features, memoization |
| 0d | TypeScript — From Fundamentals to Enterprise Mastery | Beg→Adv | Type system, inference, unions/intersections, discriminated unions, generics, utility types, conditional types, Zod schemas, tRPC, tsconfig, project references, monorepo configs, enterprise patterns, type challenges |
Read order: 0 → 0b → 0c → 0d (JavaScript engine → DOM/UI → React → TypeScript). If you're already comfortable with JS and React, start at 0d (TypeScript). If you're comfortable with all four, skip to Part I.
How React Native actually works, how browsers render, how the build toolchain transforms your code, and how TypeScript scales.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 1 | React Native Architecture & Internals | Inter→Adv | New Architecture (JSI, Fabric, TurboModules), Hermes engine, threading model, bridgeless mode, cold start sequences |
| 2 | Browser Rendering & Web Fundamentals | Intermediate | Box model, formatting contexts, reflow/repaint, composition layers, GPU acceleration, Core Web Vitals, rendering pipeline |
| 3 | The Rendering Pipeline — Mobile & Web | Inter→Adv | React reconciliation, Fiber architecture, concurrent features, virtual DOM diffing, commit phase, React Compiler auto-memoization |
| 4 | TypeScript at Scale | Inter→Adv | Project references, composite builds, barrel file anti-patterns, diagnostics, monorepo tsconfig, discriminated unions, branded types, Zod schema inference |
| 5 | The Build Toolchain — From package.json to Running App | Inter→Adv | Bundlers (Metro, Webpack, Vite, Turbopack, Rspack), transpilers (Babel, SWC, esbuild), Bun, ESM vs CJS, tree shaking, code splitting, minification, source maps, HMR |
Read order: 1 → 2 → 3 (core rendering understanding), then 4 and 5 independently.
Building mobile apps that feel native, deploy cleanly, and don't crash. From platform setup to micro-interactions.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 6 | Expo: The Modern React Native Platform | Beg→Inter | Expo SDK 54+, CNG (Continuous Native Generation), prebuild, config plugins, Expo Modules API, managed vs bare, React Compiler |
| 7 | EAS: Build, Submit, Update | Inter→Adv | EAS Build (profiles, resource classes, hooks), EAS Submit (store automation), EAS Update (OTA, channels, fingerprinting), EAS Workflows, pricing |
| 8 | Navigation Architecture | Intermediate | Expo Router v4 (file-based routing, deep linking, type safety), React Navigation 7, navigation performance, lazy loading, prefetching |
| 9 | Styling & Animation | Intermediate | NativeWind/Tailwind, Tamagui, Unistyles, Reanimated v3 (worklets, shared values, layout animations), Gesture Handler, expo-image |
| 10 | App Lifecycle, Background Tasks & Push Notifications | Inter→Adv | AppState, splash screen, background fetch, background processing, push notifications, FCM, APNs, Expo Notifications, local notifications, notification channels |
| 11 | Deep Linking & Universal Links | Intermediate | Universal Links, App Links, deferred deep links, Expo Router deep linking, URL schemes, QR codes, attribution, AASA file, Digital Asset Links |
| 12 | Storage, Persistence & File System | Intermediate | MMKV, SQLite, expo-sqlite, drizzle-orm, WatermelonDB, Realm, expo-file-system, document picker, downloads, encrypted storage, migration patterns |
| 13 | Device APIs & Native Features | Intermediate | Camera, location, maps, contacts, calendar, haptics, clipboard, share sheet, barcode scanning, WebView, sensors, NFC, Bluetooth, keyboard handling |
| 14 | Permissions, Accessibility & Internationalization | Intermediate | Permissions, VoiceOver, TalkBack, semantic roles, focus management, a11y testing, react-i18next, expo-localization, RTL, pluralization |
| 15 | App Icons, Splash Screens, Assets & Config | Beg→Inter | Adaptive icons, dynamic app icons, splash screen config, asset generation, app store screenshots, app.config.ts deep dive, eas.json, environment-specific config |
| 40 | Micro-Interactions & Motion Design Cookbook | Inter→Adv | Shared element transitions, skeleton loaders, pull-to-refresh, swipe actions, bottom sheets, toast animations, page transitions, spring physics, Reanimated recipes |
Read order: 6 → 7 (Expo ecosystem), then 8 → 9 (navigation & styling), then 10 → 11 → 12 → 13 → 14 → 15 (platform features), and 40 (motion design, after Ch 9).
Managing state without losing your mind, fetching data without losing your users, and handling real-time at scale.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 9 | State Management at Scale | Inter→Adv | Three-category model (server/client/form), Zustand, Jotai, Legend State, Redux when to keep/migrate, anti-patterns, finite states, type states, XState Store |
| 10 | Data Fetching & Server Communication | Inter→Adv | TanStack Query (caching, mutations, optimistic updates, infinite queries), tRPC, REST vs GraphQL, WebSockets, SSE, API layer architecture, retry/backoff |
| 11 | Caching Strategies — Mobile & Web | Intermediate | MMKV vs AsyncStorage, TanStack Query cache, HTTP caching, CDN architecture, edge caching, Vercel Edge Config, Redis/Upstash, offline-first patterns |
| 12 | Offline-First & Real-Time Patterns | Advanced | Legend State sync, conflict resolution, CRDT basics, WebSocket architecture, background sync, queue-based offline, optimistic UI with rollback |
| 35 | Forms at Scale — Multi-Step, Dynamic & Complex | Inter→Adv | React Hook Form, Zod, multi-step wizards, dynamic forms, conditional fields, file uploads, form state machines, server-side validation, autosave |
| 41 | Real-Time Collaboration & Multiplayer Features | Advanced | WebSockets, Socket.io, Ably, Liveblocks, Yjs, CRDTs, presence, live cursors, collaborative editing, conflict resolution, operational transformation |
| 42 | Real-Time Transport — WebSockets, SSE & Live Data | Inter→Adv | WebSocket, Socket.io, SSE, EventSource, real-time feeds, chat, live updates, connection management, reconnection, heartbeat, battery optimization |
| 46 | GraphQL — When, Why & How | Inter→Adv | Apollo Client, urql, Relay, schema design, queries, mutations, subscriptions, fragments, codegen, normalized cache, pagination, persisted queries, GraphQL vs REST vs tRPC |
Read order: 9 → 10 (core), then 11 → 12 (caching + offline), then 35 (forms), 42 → 41 (real-time transport → collaboration), 46 (GraphQL).
Performance, monorepos, design systems, testing, CI/CD, error handling, caching, search, and component architecture.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 13 | Performance Optimization — Mobile | Inter→Adv | Cold start optimization, FlashList, list virtualization, bundle size, memory management, React Compiler, re-render elimination, target metrics |
| 14 | Profiling & Debugging | Inter→Adv | Hermes profiling, Android Studio profiler, Xcode Instruments, Perfetto, Flipper alternatives, Reactotron, memory leak detection, crash analysis |
| 15 | Monorepo Architecture | Inter→Adv | Turborepo (task pipeline, caching, partial rebuilds), pnpm workspaces, sharing code between RN and Next.js, next-forge, dependency management |
| 16 | Design Systems & Component Libraries | Intermediate | Cross-platform tokens, shadcn/ui for web, Tamagui/NativeWind for mobile, Storybook, CVA variants, compound components, accessibility |
| 17 | Testing Strategy | Intermediate | Testing trophy, Jest + RNTL, Maestro for E2E, Playwright for web, MSW for API mocking, testing TanStack Query, testing Zustand, visual regression |
| 18 | CI/CD for Mobile & Web | Inter→Adv | GitHub Actions patterns, EAS Build in CI, preview deployments, performance budgets, semantic versioning, Changesets, mobile+web from one monorepo |
| 19 | Frontend Architecture Patterns | Advanced | Monoliths vs microfrontends, module federation, BFF pattern, island architecture, feature-based structure, architectural linting, ESLint boundaries |
| 20 | Codebase Management, DX & Editor Mastery | Beg→Inter | VS Code, extensions, keybindings, ESLint, Biome, Prettier, EditorConfig, git hooks, Husky, lint-staged, dependency updates, Renovate |
| 22 | Full-Stack Caching Architecture | Advanced | Caching pyramid, database query cache, Redis/Upstash, CDN edge cache, HTTP caching, TanStack Query, MMKV persistence, image CDN, ISR, stale-while-revalidate, cache stampede, write-through, write-behind |
| 23 | Image & Content Optimization | Inter→Adv | Responsive images, expo-image, next/image, image CDN, Cloudinary, Imgix, WebP, AVIF, blurhash, thumbhash, progressive loading, responsive layouts, breakpoints, foldables, tablets |
| 34 | Database & ORM Patterns | Inter→Adv | Drizzle ORM, Prisma, Neon Postgres, PlanetScale, Turso, Supabase, schema design, migrations, relations, type-safe queries, connection pooling, serverless databases, seeding |
| 36 | Error Handling Architecture | Intermediate | Error boundaries, API error standardization, user-facing error UX, retry patterns, graceful degradation, error reporting, toast notifications, error codes, timeout handling |
| 38 | Search Implementation | Intermediate | Algolia, Typesense, Meilisearch, full-text search, search UX, debounce, autocomplete, faceted search, recent searches, SQLite FTS, Postgres full-text search |
| 44 | Performance Budgets & Web Vitals | Intermediate | Performance budgets, Core Web Vitals, LCP, INP, CLS, Lighthouse, bundle size budgets, CI enforcement, performance regression detection, RUM vs synthetic |
| 47 | UI/UX Paradigms | Intermediate | Design thinking, mobile UX patterns, gesture-first design, haptic feedback, skeleton screens, optimistic UI, progressive disclosure, dark mode, iOS vs Android UX, HIG, Material Design |
| 48 | Component Library Architecture | Advanced | Atomic design, compound components, headless UI, Radix primitives, composition patterns, slot pattern, polymorphic components, forwardRef, generic components, Storybook driven development |
Read order: 13 → 14 (performance + profiling), 15 → 16 → 17 → 18 → 19 (project structure pipeline), 20 (DX, anytime), 22 → 23 (caching + images), 34 (database), 36 (errors), 38 (search), 44 (perf budgets), 47 → 48 (UX + components).
Shipping, monitoring, auth, analytics, and keeping your app alive at scale.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 21 | Mobile Monitoring & Observability | Inter→Adv | Sentry vs Crashlytics, crash-free rate, ANR analysis, source maps, custom traces, real user monitoring, dashboards, alerts, maintaining 99.9% |
| 23 | Firebase Console Mastery | Intermediate | Crashlytics, Analytics (events, funnels, retention), Performance Monitoring, Remote Config, Cloud Messaging, App Distribution |
| 24 | Security & Data Protection | Intermediate | Secure storage, API key protection, certificate pinning, biometrics, OWASP Mobile Top 10, OAuth2 PKCE, token management, code obfuscation |
| 25 | Mobile Metrics That Matter | Intermediate | Cold start time, TTI, FPS/jank, memory usage, network latency, app size, Play Console vitals, App Store Connect, Datadog RUM |
| 26 | Payments & Money Handling | Inter→Adv | Stripe (React Native + Next.js), PaymentIntents, subscriptions, Apple Pay, Google Pay, In-App Purchases, RevenueCat, webhooks, PCI compliance |
| 33 | Authentication & Authorization | Inter→Adv | OAuth2, PKCE, JWT, session management, Clerk, Stack Auth, Supabase Auth, Firebase Auth, Auth.js, passkeys, biometric auth, RBAC, protected routes, MFA, magic links |
| 37 | Feature Flags, A/B Testing & Experimentation | Intermediate | LaunchDarkly, Statsig, Unleash, Vercel feature flags, Firebase Remote Config, A/B testing, gradual rollouts, kill switches, experiment-driven development |
| 39 | Email, Transactional Comms & In-App Messaging | Intermediate | Resend, React Email, SendGrid, email templates, transactional email, SMTP, deliverability, in-app messaging, Knock, Novu, notification center |
| 43 | Analytics, Attribution & Data-Driven Development | Intermediate | Firebase Analytics, Mixpanel, Amplitude, PostHog, Segment, event taxonomy, funnels, cohorts, retention, attribution, App Tracking Transparency, GDPR consent |
| 45 | Release Management — Versioning, Changelogs & Ship Cadence | Intermediate | Semantic versioning, Changesets, release branches, staged rollouts, changelogs, OTA vs binary releases, release cadence, hotfix process, monorepo releases |
Narrative: How to monitor (Ch 21) → Firebase deep dive (Ch 23) → How to secure (Ch 24) → What to measure (Ch 25) → Payments (Ch 26) → Auth (Ch 33) → Feature flags (Ch 37) → Email (Ch 39) → Analytics (Ch 43) → Release management (Ch 45).
The web side of the frontend architect's toolkit.
| Ch | Title | Difficulty | What You'll Learn |
|---|---|---|---|
| 27 | Vercel Platform Mastery | Intermediate | Fluid Compute, Functions, Blob, Edge Config, AI Gateway, Queues, CLI, vercel.ts, Rolling Releases, Analytics, Speed Insights, BotID |
| 28 | Next.js App Router — The Complete Picture | Inter→Adv | Server/Client Components, Server Actions, Route Handlers, Streaming, ISR, PPR, caching (use cache/cacheLife/cacheTag), middleware, layouts |
| 29 | The AI-Powered Frontend | Intermediate | Vercel AI SDK v6, useChat/useCompletion, streaming, tool calling, structured output, AI Gateway multi-provider, building AI features in mobile+web |
| 30 | Developer Experience & Tooling | Beg→Inter | Biome, Turbopack, Metro, Expo Dev Client, React DevTools, Reactotron, Claude Code for FE, Storybook, pnpm vs bun, changeset |
| 31 | Beast Mode — Frontend Operational Readiness | All levels | Day-one checklist, access matrix, dashboard setup, incident readiness, codebase navigation, tribal knowledge, the frontend architect's playbook |
| 32 | PWAs, Web APIs & Cross-Platform Web | Intermediate | Progressive Web Apps, service workers, Web App Manifest, installability, offline web, Web Workers, Geolocation API, Notifications API, Web Share API, Expo for Web |
| 49 | Agentic UI Development — AI-Powered Frontend Workflows | Inter→Adv | Claude Code, Cursor, GitHub Copilot, AI code review, AI testing, CLAUDE.md, MCP servers, skills, hooks, prompt engineering for code, Vercel v0, Figma-to-code, multi-agent development |
Read order: 27 → 28 (Vercel + Next.js), 29 (AI SDK), 30 (DX), 31 (capstone), 32 (PWAs), 49 (agentic UI, after Ch 29 + 30).
Reference material. Look things up as needed.
| Ch | Title | What's Inside |
|---|---|---|
| A | Glossary | 200+ frontend terms — from ANR to zero-config, JSI to ISR |
| B | Cheat Sheet | One-page reference — stack decisions, commands, decision matrices |
| C | Reading List | 50+ essential articles, talks, and papers with summaries |
Part 0 — Fundamentals (start here if new):
Ch 0 → Ch 0b → Ch 0c → Ch 0d (JS → DOM → React → TypeScript)
Part I — Foundations (start here if experienced):
Ch 1 → Ch 2 → Ch 3 (rendering understanding)
Ch 4 (TypeScript at scale, standalone)
Ch 5 (Build Toolchain, standalone)
Part II — React Native & Expo (after Part I):
Ch 6 → Ch 7 (Expo + EAS pipeline)
Ch 8, Ch 9 (navigation + styling, benefits from Ch 1)
Ch 10 → Ch 11 (lifecycle + deep linking, after Ch 6)
Ch 12, Ch 13, Ch 14, Ch 15 (storage, device APIs, a11y, assets — after Ch 6)
Ch 40 (micro-interactions, after Ch 9)
Part III — State & Data (after Part I, any order):
Ch 9 → Ch 10 (state + data core)
Ch 11 → Ch 12 (caching + offline, advanced)
Ch 35 (forms, after Ch 9 + Ch 0d)
Ch 42 → Ch 41 (real-time transport → collaboration)
Ch 46 (GraphQL, after Ch 10 + Ch 34)
Part IV — Architecture at Scale (after Parts I-III):
Ch 13 → Ch 14 (performance + profiling)
Ch 15 → Ch 16 → Ch 17 → Ch 18 → Ch 19 (project structure pipeline)
Ch 20 (DX/codebase management, anytime)
Ch 22 (full-stack caching, after Ch 11 + Ch 15)
Ch 23 (image optimization, after Ch 9)
Ch 34 (database/ORM, after Ch 10 + Ch 27)
Ch 36 (error handling, after Ch 9 + Ch 19)
Ch 38 (search, after Ch 10 + Ch 34)
Ch 44 (perf budgets, after Ch 13 + Ch 18)
Ch 47 (UX paradigms, after Ch 9 + Ch 16)
Ch 48 (component architecture, after Ch 16 + Ch 15)
Part V — Deployment & Operations (after Part II):
Ch 21 → Ch 23 (monitoring + Firebase)
Ch 24, Ch 25 (security + metrics, standalone)
Ch 26 (payments, standalone)
Ch 33 (auth, after Ch 6 + Ch 21 + Ch 27)
Ch 37 (feature flags, after Ch 18 + Ch 21)
Ch 39 (email/comms, after Ch 27 + Ch 34)
Ch 43 (analytics, after Ch 23 + Ch 25)
Ch 45 (release management, after Ch 7 + Ch 18)
Part VI — Vercel & Web (anytime after Part I):
Ch 27 → Ch 28 (Vercel + Next.js)
Ch 29 (AI SDK, after Ch 27)
Ch 30 (DX/tooling, standalone)
Ch 31 (beast mode, capstone — benefits from all)
Ch 32 (PWAs, after Ch 27 + Ch 28)
Ch 49 (agentic UI, after Ch 29 + Ch 30)
Appendices — anytime:
A, B, C
Every chapter follows a consistent, AI-scannable format:
<!-- HTML metadata: CHAPTER, TITLE, PART, PREREQS, KEY_TOPICS, DIFFICULTY, UPDATED -->
# Chapter N: Title
> Part · Prerequisites · Difficulty
Opening narrative — why this matters, a real-world story.
### In This Chapter ← section index
### Related Chapters ← cross-references
---
## 1. MAJOR SECTION
### 1.1 Subsection
**What it is:** ...
**When to use:** ...
**Trade-offs:** ...
**Real-world example:** ...
**Code example:** ...
Real numbers from production apps referenced across these guides:
| Company | Metric | Value | Guide |
|---|---|---|---|
| Shopify | Crash-free sessions | 99.9% | Monitoring |
| Shopify | Screen load P75 | <500ms | Performance |
| Shopify | Bundle size reduction | 78% (50→11MB) | Performance |
| Discord | TTI improvement (iPhone 6) | -3,500ms | Profiling |
| Discord | Message parse optimization | 90% faster | Profiling |
| Discord | Memory reduction (lists) | -14% | Performance |
| A Million Monkeys | Android cold start | -24% | RN Internals |
| Moment→Day.js | Size reduction | 99% (232→2KB) | Performance |
Find where each concept is covered across all guides:
| Concept | Primary Guide | Also Covered In |
|---|---|---|
| JSI (JavaScript Interface) | Ch 1 | Ch 13, Ch 14 |
| Fabric Renderer | Ch 1 | Ch 3, Ch 13 |
| TurboModules | Ch 1 | Ch 6, Ch 13 |
| Hermes Engine | Ch 1 | Ch 6, Ch 14 |
| New Architecture (Bridgeless) | Ch 1 | Ch 6, Ch 13 |
| Cold Start Optimization | Ch 13 | Ch 1, Ch 25 |
| Threading Model (RN) | Ch 1 | Ch 3, Ch 9 |
| CNG (Continuous Native Generation) | Ch 6 | Ch 7, Ch 15 |
| Expo Prebuild | Ch 6 | Ch 7, Ch 18 |
| Config Plugins | Ch 6 | Ch 7, Ch 24 |
| EAS Build | Ch 7 | Ch 18, Ch 6 |
| EAS Update (OTA) | Ch 7 | Ch 18, Ch 21 |
| Channels & Branches (EAS) | Ch 7 | Ch 18 |
| Fingerprint (EAS) | Ch 7 | Ch 18 |
| Error Recovery (OTA) | Ch 7 | Ch 21 |
| App Lifecycle & Background Tasks | Ch 10 | Ch 6, Ch 21 |
| Push Notifications | Ch 10 | Ch 23, Ch 39 |
| Deep Linking & Universal Links | Ch 11 | Ch 8, Ch 6 |
| On-Device Storage (SQLite, MMKV) | Ch 12 | Ch 11, Ch 9 |
| Camera, Location & Device APIs | Ch 13 | Ch 6, Ch 14 |
| Permissions & Accessibility | Ch 14 | Ch 16, Ch 47 |
| Micro-Interactions & Motion | Ch 40 | Ch 9, Ch 47 |
| React Server Components | Ch 28 | Ch 3, Ch 0c |
| Hooks (useState, useEffect, etc.) | Ch 0c | Ch 9, Ch 3 |
| Fiber Architecture | Ch 3 | Ch 1, Ch 13 |
| Reconciliation & Diffing | Ch 3 | Ch 0b, Ch 13 |
| React Compiler | Ch 3 | Ch 6, Ch 13 |
| Suspense & Streaming | Ch 28 | Ch 3, Ch 10 |
| Discriminated Unions | Ch 0d | Ch 4, Ch 9 |
| Generics (TypeScript) | Ch 0d | Ch 4, Ch 10 |
| Branded Types | Ch 4 | Ch 0d |
| Zod Schema Validation | Ch 0d | Ch 4, Ch 35 |
| tRPC | Ch 0d | Ch 10, Ch 15 |
| Project References (TS) | Ch 4 | Ch 0d, Ch 15 |
| Zustand | Ch 9 | Ch 17, Ch 13 |
| TanStack Query | Ch 10 | Ch 9, Ch 17 |
| Jotai | Ch 9 | Ch 13 |
| MMKV | Ch 11 | Ch 9, Ch 24 |
| Optimistic Updates | Ch 10 | Ch 12 |
| Three-Category State Model | Ch 9 | Ch 10, Appendix B |
| Forms (React Hook Form, Zod) | Ch 35 | Ch 9, Ch 0d |
| GraphQL (Apollo, urql, Relay) | Ch 46 | Ch 10, Ch 34 |
| Real-Time Collaboration & CRDTs | Ch 41 | Ch 12, Ch 42 |
| WebSockets & SSE | Ch 42 | Ch 12, Ch 10 |
| FlashList | Ch 13 | Ch 9, Ch 14 |
| Reanimated | Ch 9 | Ch 13, Ch 40 |
| Bundle Size Optimization | Ch 13 | Ch 5, Ch 25 |
| Memory Leaks | Ch 14 | Ch 13, Ch 25 |
| FPS & Jank | Ch 25 | Ch 13, Ch 14 |
| Monorepo (Turborepo) | Ch 15 | Ch 18, Ch 4 |
| Microfrontends | Ch 19 | Ch 15 |
| BFF (Backend for Frontend) | Ch 19 | Ch 10, Ch 28 |
| Design Systems | Ch 16 | Ch 9, Ch 48 |
| Feature-Based Structure | Ch 19 | Ch 15, Ch 8 |
| Full-Stack Caching (Redis, CDN, ISR) | Ch 22 | Ch 11, Ch 27 |
| Image Optimization (expo-image, next/image) | Ch 23 | Ch 9, Ch 13 |
| Database & ORM (Drizzle, Prisma) | Ch 34 | Ch 10, Ch 27 |
| Error Boundaries & Error Handling | Ch 36 | Ch 9, Ch 21 |
| Search (Algolia, Typesense, Meilisearch) | Ch 38 | Ch 10, Ch 34 |
| Performance Budgets & Web Vitals | Ch 44 | Ch 2, Ch 18 |
| UX Paradigms (HIG, Material Design) | Ch 47 | Ch 16, Ch 40 |
| Component Architecture (Atomic, Headless) | Ch 48 | Ch 16, Ch 19 |
| Authentication (OAuth2, JWT, Clerk) | Ch 33 | Ch 24, Ch 28 |
| Feature Flags & A/B Testing | Ch 37 | Ch 23, Ch 18 |
| Email & Transactional Comms | Ch 39 | Ch 27, Ch 34 |
| Analytics & Attribution | Ch 43 | Ch 23, Ch 25 |
| Release Management & Versioning | Ch 45 | Ch 7, Ch 18 |
| SSR & Cookies | Ch 28 | Ch 33, Ch 27 |
| Vercel Platform | Ch 27 | Ch 28, Ch 18 |
| Next.js App Router | Ch 28 | Ch 27, Ch 19 |
| Self-Hosting (AWS) | Ch 19 | Ch 27 |
| PWAs & Web APIs | Ch 32 | Ch 27, Ch 28 |
| Agentic UI & AI Workflows | Ch 49 | Ch 29, Ch 30 |
| CI/CD & GitHub Actions | Ch 18 | Ch 7, Ch 15 |
| Sentry | Ch 21 | Ch 14, Ch 31 |
| Crashlytics | Ch 21 | Ch 23, Ch 25 |
| Crash-Free Rate | Ch 21 | Ch 25, Ch 31 |
| ANR (App Not Responding) | Ch 21 | Ch 25, Ch 14 |
| Source Maps | Ch 21 | Ch 5, Ch 14 |
| OWASP Mobile Top 10 | Ch 24 | Ch 26 |
| OAuth2 PKCE | Ch 24 | Ch 33 |
| Certificate Pinning | Ch 24 | Ch 10 |
| Secure Storage | Ch 24 | Ch 12, Ch 26 |
| Stripe (PaymentIntents) | Ch 26 | Ch 28 |
| In-App Purchases (IAP) | Ch 26 | Ch 6 |
| RevenueCat | Ch 26 | Ch 7 |
| Webhooks | Ch 26 | Ch 10, Ch 28 |
| Event Loop & Microtasks | Ch 0 | Ch 1, Ch 3 |
| Closures & Prototypes | Ch 0 | Ch 0c |
| Virtual DOM & Diffing | Ch 0b | Ch 3, Ch 13 |
| Bundlers (Metro, Vite, Turbopack) | Ch 5 | Ch 15, Ch 30 |
| Tree Shaking & Code Splitting | Ch 5 | Ch 13, Ch 28 |
| Expo Router (File-Based Routing) | Ch 8 | Ch 6, Ch 28 |
| Deep Linking | Ch 11 | Ch 8, Ch 24 |
| NativeWind / Tailwind | Ch 9 | Ch 16 |
| Offline-First & CRDTs | Ch 12 | Ch 11, Ch 41 |
| WebSockets & Real-Time | Ch 42 | Ch 12, Ch 29 |
| Testing (Jest, Maestro, Playwright) | Ch 17 | Ch 18, Ch 9 |
| AI SDK & AI Features | Ch 29 | Ch 27, Ch 49 |
| Edge Computing & CDN | Ch 11 | Ch 27, Ch 22 |
| Firebase (Analytics, Remote Config) | Ch 23 | Ch 21, Ch 43 |
| Core Web Vitals | Ch 2 | Ch 44, Ch 28 |
| Browser Rendering Pipeline | Ch 2 | Ch 3, Ch 13 |
| Beast Mode (Operational Readiness) | Ch 31 | Ch 21, Ch 25 |
The course/ directory contains 60 hands-on modules organized in 3 progressive loops that build on this guide:
| Loop | Modules | Focus | TicketFlow Arc |
|---|---|---|---|
| Loop 1: Foundation | L1-M01 to L1-M20 | Core mental models, heavy scaffolding | Empty folder to simple Expo app with basic screens, navigation, and first EAS build |
| Loop 2: Practice | L2-M01 to L2-M20 | Intermediate patterns, moderate scaffolding | Basic app to full-featured app with API integration, state management, testing, CI/CD, and monitoring |
| Loop 3: Mastery | L3-M01 to L3-M20 | Architect-level decisions, minimal scaffolding | Single app to production-ready monorepo with web dashboard, design system, Vercel deployment, AI features, and operational readiness |
Running project: Throughout all 60 modules, you build TicketFlow -- an event discovery and ticketing app (think Resident Advisor meets Eventbrite) with React Native (Expo) for mobile and a Next.js web dashboard, deployed via EAS and Vercel from a Turborepo monorepo.
How to start: Use the tech-skill-builder plugin for Claude Code:
# Start from the beginning
/learn course/course.yaml
# Jump to a specific module
/learn course/course.yaml --module L2-M05- The best architecture is the simplest one that solves actual problems — don't microfrontend a two-person team's codebase
- Separate your state into three categories or suffer the consequences — server, client, form. Mixing them is the #1 architecture mistake
- Measure before optimizing — your intuition about what's slow is wrong until Hermes tells you otherwise
- Ship the smallest possible binary — every MB you add is a user who didn't download your app on cellular
- Monitor before you need to — set up Crashlytics on day one, not after your first production crash
- Make other engineers faster — the frontend architect's job isn't just to ship features, it's to build the platform that lets everyone else ship features
- Composition over invention — compose TanStack Query + Zustand + MMKV rather than building a custom state layer from scratch
- Errors are features — design your error handling architecture with the same care as your happy paths
- Authentication is table stakes — get auth right on day one; retrofitting it is a nightmare
- Release with confidence — feature flags, staged rollouts, and performance budgets turn deployments from scary to boring
Built with Claude Code. Contributions welcome.