Loading content…
Loading content…
Build modern web applications with React and Next.js
This track features 2 modules outlining core production requirements. Follow the lessons to understand the conceptual architectures and complete the recommended tasks.
Frontend developers looking to transition to component-based state architectures, dynamic routing, and server-side rendering with Next.js.
Build a React login form containing email and password inputs using controlled state components. Enforce form validations: show validation errors when leaving the field (onBlur) if entries are invalid.
Intermediate TaskWrite a React custom hook named `useLocalStorage` in TypeScript. It must work like `useState`, persisting the variable's state inside the browser's localStorage and syncing changes across page reloads.
Intermediate TaskImplement a dynamic product details route in Next.js. The path must accept a slug parameter (`/products/[slug]`), load product details asynchronously, and return a dynamic page title matching the product's title.
Intermediate TaskCreate loading and error boundaries using App Router standards. Design a `loading.tsx` page displaying card skeletons and an `error.tsx` boundary containing retry controls.
Design a collaborative task management application featuring drag-and-drop kanban boards, task lists, prioritization controls, and filtered sorting columns.
Intermediate LabBuild a complete content management publishing system where authors write blogs inside rich text editors, manage categories, and upload thumbnails.
Advanced LabDesign an enterprise-grade analytics dashboard that displays complex telemetry metrics, visualizes data in graphs, and integrates with logging tools.
Validate your task solutions and project outputs against senior coding standards.
Once you have completed the module lessons and practice tasks in this path, click below to proceed.
Proceed to Full-Stack Applications (API & Databases)