React and Next.js: build modern web applications

What you will be able to do

• React interface development (components, props, hooks, controlled forms)
• React state management (useState, useReducer, Context, custom hooks)
• Next.js App Router (routing, Server Components, Server Actions, Route Handlers)
• Data validation with Zod and session-based authentication
• Automated testing with Vitest and Testing Library
• Core Web Vitals optimization and deployment to Vercel or a VPS

About this course

Who it is for: Junior developers who know the JavaScript basics (functions, arrays, the DOM, fetch), computer science students, front-end integrators and freelancers in Dakar, Thiès, Abidjan, Bamako, Cotonou or the diaspora who want to ship modern web applications with React and Next.js.

Curriculum

A module-by-module path: lessons, exercises, quizzes and projects to submit.

1. 1

   Module 1· 12 exercises

   Getting started with React: components, JSX and props

   You create your first React project with Vite and break a restaurant menu down into reusable components.

   • Why React: from hand-written DOM code to componentsFree preview3 exercises18 min
   • Create the project with Vite and write JSXFree preview3 exercises20 min
   • Props: reusable componentsFree preview3 exercises20 min
   • Composing a page: children, simple lists and stylesFree preview3 exercises20 min
   • Module handout (PDF)Free preview5 min
   • Quiz: components, JSX and propsModule quiz
   • The Chez Fatou menu as React componentsProject to submit
2. 2

   Module 2· 13 exercises

   State and events: making the interface interactive

   You give your components a memory with useState, respond to clicks and build a cart whose total calculates itself.

   • useState: a component's memory3 exercises20 min
   • Handling events and updating without mutation3 exercises20 min
   • Lifting state up: sharing data between components3 exercises18 min
   • Derived state: calculate instead of storing4 exercises18 min
   • Module handout (PDF)5 min
   • Quiz: state and eventsModule quiz
   • The Chez Fatou interactive cartProject to submit
3. 3

   Module 3· 12 exercises

   Lists, forms and validation

   You display filtered and sorted lists, build a controlled order form and validate it before it is submitted.

   • Displaying, filtering and sorting lists with stable keys3 exercises18 min
   • Controlled forms: inputs, dropdowns and checkboxes3 exercises20 min
   • Validating input: phone numbers, required fields and error messages3 exercises20 min
   • Submitting cleanly: pending states, double-click protection and confirmation3 exercises18 min
   • Module handout (PDF)5 min
   • Quiz: lists and formsModule quiz
   • The validated order formProject to submit
4. 4

   Module 4· 12 exercises

   Effects, data and custom hooks

   You load data from an API with loading, error and cancellation handling, then move that logic into your own hooks.

   • useEffect: syncing a component with the outside world3 exercises20 min
   • Loading data: loading, error and empty states3 exercises20 min
   • Writing your own hooks: useFetch and useLocalStorage3 exercises20 min
   • useRef, useMemo and the effects you don't need3 exercises18 min
   • Module handout (PDF)5 min
   • Quiz: effects and hooksModule quiz
   • The daily menu loaded from an APIProject to submit
5. 5

   Module 5· 12 exercises

   Global state and React application architecture

   You centralize state transitions with useReducer, share the cart with Context and organize the project so it holds up over time.

   • useReducer: centralizing state transitions3 exercises20 min
   • Context: sharing state without prop drilling3 exercises18 min
   • A persistent global cart: reducer, Context and localStorage3 exercises20 min
   • Organizing folders and choosing a state library3 exercises18 min
   • Module handout (PDF)5 min
   • Quiz: global state and architectureModule quiz
   • The complete Chez Fatou ordering applicationProject to submit
6. 6

   Module 6· 12 exercises

   Next.js: the App Router, server rendering and SEO

   You move to Next.js: file-based routes, layouts, Server and Client Components, data loaded on the server and metadata for Google.

   • From React to Next.js: why server rendering matters3 exercises18 min
   • File-based routing, layouts and dynamic routes3 exercises20 min
   • Server Components, Client Components and data fetching3 exercises20 min
   • Metadata, images and SEO for a Next.js application3 exercises18 min
   • Module handout (PDF)5 min
   • Quiz: the Next.js App RouterModule quiz
   • The Awa Beauté salon website in Next.jsProject to submit
7. 7

   Module 7· 12 exercises

   Server Actions, server-side validation and authentication

   You process forms on the server with Server Actions and Zod, expose an API with a Route Handler and protect the admin area.

   • Server Actions: handling a form without writing an API3 exercises20 min
   • Validating on the server with Zod and returning errors to the form3 exercises20 min
   • Route Handlers: exposing a clean API3 exercises18 min
   • Authentication: sessions, middleware and protected pages3 exercises22 min
   • Module handout (PDF)5 min
   • Quiz: Server Actions and authenticationModule quiz
   • Online booking and the manager's areaProject to submit
8. 8

   Module 8· 12 exercises

   Testing, performance and going to production

   You test logic and components, measure and improve performance on mobile, then deploy the application and present it in your portfolio.

   • Testing logic with Vitest3 exercises20 min
   • Testing components with Testing Library3 exercises20 min
   • Performance: Core Web Vitals, JavaScript weight and mobile networks3 exercises18 min
   • Deploying: Vercel or a VPS, environment variables and a delivery checklist3 exercises20 min
   • Module handout (PDF)5 min
   • Quiz: testing, performance and deploymentModule quiz
   • Final project: the Awa Beauté application, tested and liveCapstone

9. Certificate included

Questions about this course