Microsoft Global Learning · Engineering Track

React & Next.js Fullstack Engineering

A 72-hour intensive track that transforms developers with basic web knowledge into production-ready fullstack engineers through project-driven learning and real-world architecture.

72 Total Hours
3 Months
3× Sessions / Week
2h Per Session
27 Modules
Explore Curriculum View Course Structure
Scroll
// You start as
HTML/CSS/JS knowledge
Basic DOM manipulation
Static webpage thinking
No framework experience
Local-only code
3 MONTHS
↓
// You graduate as
React component architect
Next.js fullstack engineer
TypeScript practitioner
Production app deployer
AI-integrated app builder
Course Structure

Three Phases,
One Destination

Each course builds on the last, deliberately forcing you to understand why before how.

01
Phase One

Introduction
to React

Start from the pain of vanilla JS and discover why React exists. Master components, state, props, and the React mental model.

8 Modules
~24h Duration
  • Why React Exists
  • Essential JS for React
  • Components & JSX
  • Props & Data Flow
  • State + Events + Forms
  • React Mental Models
  • Capstone: Full App
02
Phase Two

Advanced
React

Design scalable apps. Master routing, advanced state, custom hooks, TanStack Query, and Zustand for production applications.

10 Modules
~24h Duration
  • Component Architecture
  • Effects & Data Fetching
  • React Router (Multi-page)
  • Advanced State (Reducers)
  • Context API
  • Custom Hooks
  • TanStack Query + Zustand
03
Phase Three

Professional
Next.js

Go fullstack. TypeScript, App Router, Server Components, authentication, databases, and production optimization.

9 Modules
~24h Duration
  • Why Next.js Exists
  • TypeScript for React
  • App Router Deep Dive
  • Server vs Client Components
  • Forms, Zod, Shadcn/ui
  • Backend + Auth + DB
  • Capstone: SaaS / AI App
Curriculum Explorer

Every Module,
Every Topic

Click any module to expand the detailed topic breakdown and mini-project.

01 Why React and Other Frameworks Exist
+
HTML/CSS/JS traditional workflow
Manual DOM manipulation with JS
Problems with vanilla JS at scale
UI synchronization problems
What frameworks solve & introduce
Component-based architecture
React vs Vanilla JS showcase
Virtual DOM & React DOM Tree
One-Way Data Flow with Props
Real-world apps: Airbnb, Amazon
Mini Project Simple static website — components and props only, no state
02 Essential JavaScript for React
+
Variables & scope (let/var/const)
Objects, destructuring, spread
Arrays: map, filter, find, reduce
Arrow functions & template literals
Optional chaining & nullish coalescing
Array/object immutability
Vanilla JS event handling
Modules: export, import, named/default
Promises & Async/Await
Mini exercises: filter, search
03 React Setup and Developer Workflow
+
Creating React apps with Vite
Project structure (src, components, assets)
npm basics & package.json
Installing packages & dependencies
Browser DevTools
React Developer Tools extension
04 Components and JSX Mini Project
+
What is JSX & JSX rules
Embedding JS and CSS in JSX
Rendering lists with keys
Why keys exist & common mistakes
Conditional rendering (&&, ternary, early return)
Component organization & folder structure
Mini Project Movie cards app
05 Props and Data Flow Mini Project
+
What are props & how they work
Passing objects, arrays, functions
Destructuring props
The children prop
Component composition basics
One-way data flow (critical)
Mini Project Dashboard UI
06 Interactive Components — State + Events + Forms Mini Project
+
Event handling (click, submit, change)
useState — concept first, then practice
State updates & multiple state
Objects & arrays in state
Immutability (deep explanation)
Controlled forms (input, select, radio)
Basic form validation
Mini Project Expense Tracker
07 Thinking Deeper in React — Core Mental Models
+
What causes re-renders
State ownership & lifting state up
Derived state
Child → parent communication (callbacks)
Single source of truth
When state should NOT exist
Break UI → components → state → owner
Whiteboard exercises (no coding)
08 Capstone Project Capstone
+
E-commerce app / Finance Tracker / Student Management System
Components, props, children, state, forms
Lifting state, derived state, conditional rendering
GitHub repo, commits, README, deployment
01 Component Architecture and Reusability Mini Project
+
From "how to create" to "how to design"
Composition patterns (Wrapper, Compound, Slot)
Composition vs prop explosion
Reusability principles & DRY vs readability
Over-abstraction dangers
Feature-based folder structures
Mini Project Reusable UI library: Button, Modal, Tabs, Alert, Card
02 Dynamic Applications — Effects & Data Fetching Mini Project
+
Side effects: API, localStorage, timers
useEffect: render phase vs effect phase
Dependencies & cleanup functions
Infinite loops & stale closures
Loading / error / success state
Real API data fetching patterns
Mini Project Weather application
03 Multi-Page Applications with React Router Mini Project
+
SPA problem & why routing matters
BrowserRouter, Routes, Route
Link, NavLink, useNavigate
Dynamic routes & useParams
Query parameters & useSearchParams
Nested routes & layout routes
Protected routes
Not Found pages
Mini Project Full Movie App (Home, Details, Search, Favorites)
04 Advanced State Management Mini Project
+
Local, shared, server, URL, derived state
useState limitations at scale
useReducer: reducers, actions, dispatch
Reducer organization patterns
Mini Project Cart management system
05 Context API — Escaping Prop Drilling Mini Project
+
Prop drilling problems in depth
Composition as a first solution
createContext, Provider, consuming
Custom context hooks
Mini Project Theme + authentication system
06 Custom Hooks and Logic Reuse Mini Project
+
Why custom hooks exist
Rules of hooks
useLocalStorage, useTheme, useToggle
Separating UI from business logic
Mini Project Utility hooks package
07 Refs and Escape Hatches Mini Project
+
useRef: what it is and why it exists
useRef vs useState differences
Forward refs
Mini Project Custom Form System
08 Modern Server State with TanStack Query Mini Project
+
Why server state is different
QueryClient & useQuery
Query keys & caching
Loading, errors, mutations
Optimistic updates (useOptimistic)
Mini Project Products dashboard
09 Modern Global State with Zustand Mini Project
+
Why Zustand vs useReducer/Context
Store creation & organization
Reading & updating state
Selectors for performance
Mini Project Shopping cart + user settings
10 Advanced React Capstone Project Capstone
+
Learning platform / Social dashboard / PM system
Full routing (nested, dynamic, protected)
State: Context + Zustand + TanStack Query
Custom hooks & reusable components
CRUD, API integration, forms, error handling
Feature-based folder architecture
01 Why Next.js Exists
+
Problems with traditional React SPAs
CSR, SSR, SSG, ISR — tradeoffs
Real examples: Dashboard (CSR), Blog (SSG), E-commerce (ISR)
Hybrid rendering & file-based routing
App Router architecture overview
02 TypeScript for Real Applications Mini Project
+
Real JS problems TypeScript solves
Type inference & basic typing
React + TypeScript integration
Interfaces vs types (practical)
Union types & generics
Type-safe API responses & forms
Mini Project Convert existing React app to TypeScript
03 Next.js App Router Deep Dive Mini Project
+
File-system routing
Layouts & nested layouts
Pages & dynamic routes
Route groups
loading.tsx, error.tsx, not-found.tsx
Metadata API
Mini Project Documentation platform
04 Server and Client Components Mini Project
+
Why server components exist
Client vs server — visual explanation
What "use client" actually means
What runs on server (DB, FS, secrets)
Serialization limitations
Composition: server parent / client child
Mini Project Hybrid-rendered dashboard
05 Forms, Validation & Modern UI Systems Mini Project
+
React Hook Form: register, handleSubmit
Zod: schemas, parsing, type inference
RHF + Zod integration (industry stack)
Server-side validation & file uploads
Shadcn/ui: CLI, philosophy, customization
Mini Project Auth system: login, signup, validation, error handling
06 Backend Integration — Fullstack Next.js Mini Project
+
Route Handlers & CRUD APIs
Cookies & sessions
Auth.js / Clerk for authentication
Database: Prisma OR Supabase
Server Actions & mutations
Secure practices: env vars, secret keys
Mini Project Fullstack task management system
07 Performance, Caching & Production Optimization
+
Request memoization & fetch caching
ISR & revalidation strategies
Dynamic vs static rendering
Image & font optimization
UI streaming with Suspense
SEO: metadata, Open Graph, sitemap, robots
Core Web Vitals & hydration costs
08 Production Architecture and Scaling
+
Feature-driven folder structures
Service layers & API abstraction
Error handling architecture
Reusable business logic patterns
Environment management
09 Professional Next.js Capstone Project Capstone
+
AI-integrated app OR SaaS dashboard
Next.js + TypeScript + full backend
Authentication, database, server actions
Production deployment on Vercel/Netlify
Teaching Philosophy

Built for Engineers,
Not Tutorial Chasers

⚡

Experience the Pain First

Students manually manipulate the DOM in Vanilla JS before touching React. When you truly understand the problem, the solution becomes obvious — not just memorized.

🧩

Mental Models Over Memorization

Before writing complex logic, students whiteboard UI into component trees and define state ownership. This is what separates engineers from copy-pasters.

📈

Progressive Scaling

Start with static UI, add interactivity, graduate to multi-page apps, then architect secure fullstack Next.js applications. Every step earns the next.

🚀

Real-World Capstones

Every major section ends with a production-grade project requiring edge case handling, loading states, and architecture planning — like a real code review.

Technology Stack

Industry-Standard
From Day One

Phase 1 — Introduction to React
HTML5 / CSS3
JavaScript (ES2024)
React 19
Tailwind CSS
Vite
npm
Git
GitHub
Phase 2 — Advanced React
React Router v7
TanStack Query v5
Zustand
REST API Integration
useOptimistic
useTransition
Phase 3 — Next.js Professional
Next.js 16
TypeScript
React Hook Form
Zod
Shadcn/ui
Supabase
Clerk
Prisma
Evaluation System

How Progress
is Measured

👁

Live Tracking

Instructors monitor individual progression through architectural whiteboard exercises and live coding sessions in real time.

📦

Weekly GitHub Assignments

Mini-projects submitted weekly via GitHub. Students master Git workflows while solving real problems like Expense Trackers and Weather Apps.

⚙️

Milestone Assessments

End-of-course technical assessments combine architecture theory questions with time-boxed practical coding challenges.

🎤

Capstone Code Reviews

Students present architectural choices, routing strategies, and state solutions in a simulated production code review environment.

Ready to Become
a Production
Engineer?

72 hours. 3 months. One complete transformation.

Apply for the Track Review Curriculum