Roadmap · Step 3 of 8
Frontend roadmap
Build user interfaces with React and Next.js, and learn to test them. Read the series from top to bottom, and each series from its first lesson to its last.
- Level
- Beginner to intermediate
- Series
- 4
- Lessons
- 33
- Cost
- Free
Loading your progress…
Start here
- Step 3
Frontend
Build user interfaces with React and Next.js, and learn to test them.
React in Depth - 0Thinking in React: Components, Props and JSX
- 1State and Rendering: What Really Happens When State Changes
- 2Effects and the Lifecycle: useEffect Without the Confusion
- 3Hooks in Depth: useRef, useMemo, useCallback, useReducer and Custom Hooks
- 4Forms, Events and Controlled Inputs
- 5Data Fetching, Caching and Server State
- 6Context, State Management and Choosing Where State Lives
- 7Performance: Memoization, Lists, Code Splitting and the React Compiler
- 8Patterns, Server Components and Testing React
- 9React Interview Questions With Model Answers
Next.js App Router - 0Next.js From Zero: Project Structure, Routing and Layouts
- 1Server Components and Client Components: What Runs Where
- 2Data Fetching and Caching in the App Router
- 3Server Actions, Forms and Mutations
- 4Route Handlers, Middleware (Proxy) and APIs
- 5Authentication and Authorization in Next.js
- 6Rendering Modes: Static, Dynamic, Streaming and Suspense
- 7Metadata, SEO, Images and Fonts
- 8Environment, Configuration, Deploying and Production Habits
- 9Next.js Interview Questions With Model Answers
Senior Frontend Depth - 0React Rendering Model: Render, Commit, Reconciliation and Keys
- 1Hooks in Depth: Effects, Refs and the Rules
- 2Concurrent React, Suspense and Server Components in Next.js
- 3State Management Decisions: Local, Context, Server Cache, Global Store
- 4Advanced TypeScript for Interviews: Generics, Narrowing, Utility and Conditional Types
- 5Frontend Testing Strategy: Unit, Integration, E2E and What to Skip
- 6Accessibility Essentials Interviewers Check
Testing From Zero