Frontend Engineering: React & Next.js Mastery Curriculum

Public curriculum preview for visitors and enrolled students. Use this page to evaluate module scope, outcomes, and learning path.

Download PDF Back to Course

Curriculum

Frontend Engineering: React & Next.js Mastery

Build production-grade frontends with React and Next.js. Master component architecture, state management, performance optimization, and full-stack capabilities with Next.js.

Duration: 24 Weeks

Level: intermediate

Study Time: 2 hours/week + labs

School: Hexadigitall Academy

Welcome to Frontend Engineering: React & Next.js Mastery! 🎓

This curriculum is designed to take you from core understanding to confident delivery through weekly applied practice, measurable outcomes, and portfolio evidence.

Each week builds progressively with practical tasks, implementation checkpoints, and reflection points so you can convert knowledge into repeatable professional performance.

Your success is our priority. Stay consistent with weekly execution, document your work, and use feedback loops to continuously improve your delivery quality.

Essential Resources

Language-specific style guides, design patterns reference, and debugging tools inventory
Testing frameworks, mock libraries, and performance profiling instructions for your tech stack
Refactoring patterns, security best practices, and code quality tooling configurations

Learning Roadmap

Early Weeks: Language fundamentals, testing basics, and design patterns
Middle Weeks: Advanced architectures, performance optimization, and debugging
Late Weeks: Production systems, scalability, and cross-platform deployment
Custom Hooks and Reusable Logic
Client-Side Routing and Navigation Patterns
Next.js App Router and Project Structure
Styling Systems and Design System Integration
Building Accessible User Interface Components
Forms, Validation, and Mutation Workflows
Performance Profiling and Bundle Optimization
SEO, Metadata, and Content Rendering in Next.js
Observability, Logging, and Frontend Reliability

Detailed Weekly Curriculum

Each week includes outcomes and practical lab work aligned to the curriculum structure.

Week 1

HTML, CSS, and Modern Frontend Tooling Refresh

2 hours/week + labs

Learning Outcomes

Analyze the principles of HTML, CSS, and Modern Frontend Tooling Refresh and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate HTML, CSS, and Modern Frontend Tooling Refresh in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for HTML, CSS, and Modern Frontend Tooling Refresh, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for HTML, CSS, and Modern Frontend Tooling Refresh with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 2

Modern JavaScript for React Applications

2 hours/week + labs

Learning Outcomes

Analyze the principles of Modern JavaScript for React Applications and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Modern JavaScript for React Applications in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Modern JavaScript for React Applications, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Modern JavaScript for React Applications with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 3

React Component Architecture and JSX Patterns

2 hours/week + labs

Learning Outcomes

Analyze the principles of React Component Architecture and JSX Patterns and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate React Component Architecture and JSX Patterns in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for React Component Architecture and JSX Patterns, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for React Component Architecture and JSX Patterns with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 4

Props, State, and One-Way Data Flow

2 hours/week + labs

Learning Outcomes

Analyze the principles of Props, State, and One-Way Data Flow and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Props, State, and One-Way Data Flow in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Props, State, and One-Way Data Flow, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Props, State, and One-Way Data Flow with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 5

Events, Forms, and Controlled Inputs

2 hours/week + labs

Learning Outcomes

Analyze the principles of Events, Forms, and Controlled Inputs and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Events, Forms, and Controlled Inputs in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Events, Forms, and Controlled Inputs, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Events, Forms, and Controlled Inputs with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 6

Side Effects, Data Flow, and Lifecycle Thinking

2 hours/week + labs

Learning Outcomes

Analyze the principles of Side Effects, Data Flow, and Lifecycle Thinking and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Side Effects, Data Flow, and Lifecycle Thinking in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Side Effects, Data Flow, and Lifecycle Thinking, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Side Effects, Data Flow, and Lifecycle Thinking with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 7

Custom Hooks and Reusable Logic

2 hours/week + labs

Learning Outcomes

Analyze the principles of Custom Hooks and Reusable Logic and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Custom Hooks and Reusable Logic in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Custom Hooks and Reusable Logic, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Custom Hooks and Reusable Logic with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 8

Client-Side Routing and Navigation Patterns

2 hours/week + labs

Learning Outcomes

Analyze the principles of Client-Side Routing and Navigation Patterns and link them to course outcomes at advanced depth with architecture-level decision quality.
Evaluate Client-Side Routing and Navigation Patterns in a guided scenario using realistic tools, constraints, and quality gates.
Design trade-offs, risks, and decision points for Client-Side Routing and Navigation Patterns, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Client-Side Routing and Navigation Patterns with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 9

Next.js App Router and Project Structure

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Next.js App Router and Project Structure and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Next.js App Router and Project Structure in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Next.js App Router and Project Structure, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Next.js App Router and Project Structure with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 10

Server Components versus Client Components

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Server Components versus Client Components and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Server Components versus Client Components in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Server Components versus Client Components, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Server Components versus Client Components with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 11

Data Fetching, Caching, and Revalidation

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Data Fetching, Caching, and Revalidation and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Data Fetching, Caching, and Revalidation in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Data Fetching, Caching, and Revalidation, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Data Fetching, Caching, and Revalidation with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 12

Authentication, Sessions, and Protected Routes

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Authentication, Sessions, and Protected Routes and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Authentication, Sessions, and Protected Routes in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Authentication, Sessions, and Protected Routes, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Authentication, Sessions, and Protected Routes with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 13

Styling Systems and Design System Integration

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Styling Systems and Design System Integration and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Styling Systems and Design System Integration in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Styling Systems and Design System Integration, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Styling Systems and Design System Integration with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 14

Building Accessible User Interface Components

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Building Accessible User Interface Components and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Building Accessible User Interface Components in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Building Accessible User Interface Components, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Building Accessible User Interface Components with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 15

Forms, Validation, and Mutation Workflows

2 hours/week + labs

Learning Outcomes

Evaluate the principles of Forms, Validation, and Mutation Workflows and link them to course outcomes at advanced depth with architecture-level decision quality.
Design Forms, Validation, and Mutation Workflows in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for Forms, Validation, and Mutation Workflows, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for Forms, Validation, and Mutation Workflows with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 16

API Integration and Error Handling

2 hours/week + labs

Learning Outcomes

Evaluate the principles of API Integration and Error Handling and link them to course outcomes at advanced depth with architecture-level decision quality.
Design API Integration and Error Handling in a guided scenario using realistic tools, constraints, and quality gates.
Optimize trade-offs, risks, and decision points for API Integration and Error Handling, then record rationale for stakeholder review.
Justify a portfolio-ready engineering implementation dossier for API Integration and Error Handling with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 17

Global State Management and Server State

2 hours/week + labs

Learning Outcomes

Design the principles of Global State Management and Server State and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Global State Management and Server State in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Global State Management and Server State, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Global State Management and Server State with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 18

Testing React Components and Next.js Pages

2 hours/week + labs

Learning Outcomes

Design the principles of Testing React Components and Next.js Pages and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Testing React Components and Next.js Pages in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Testing React Components and Next.js Pages, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Testing React Components and Next.js Pages with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 19

Performance Profiling and Bundle Optimization

2 hours/week + labs

Learning Outcomes

Design the principles of Performance Profiling and Bundle Optimization and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Performance Profiling and Bundle Optimization in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Performance Profiling and Bundle Optimization, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Performance Profiling and Bundle Optimization with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 20

SEO, Metadata, and Content Rendering in Next.js

2 hours/week + labs

Learning Outcomes

Design the principles of SEO, Metadata, and Content Rendering in Next.js and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize SEO, Metadata, and Content Rendering in Next.js in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for SEO, Metadata, and Content Rendering in Next.js, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for SEO, Metadata, and Content Rendering in Next.js with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 21

Observability, Logging, and Frontend Reliability

2 hours/week + labs

Learning Outcomes

Design the principles of Observability, Logging, and Frontend Reliability and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Observability, Logging, and Frontend Reliability in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Observability, Logging, and Frontend Reliability, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Observability, Logging, and Frontend Reliability with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 22

Deployment Pipelines and Production Environments

2 hours/week + labs

Learning Outcomes

Design the principles of Deployment Pipelines and Production Environments and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Deployment Pipelines and Production Environments in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Deployment Pipelines and Production Environments, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Deployment Pipelines and Production Environments with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 23

Capstone Build: Product-Grade Next.js Application

2 hours/week + labs

Learning Outcomes

Design the principles of Capstone Build: Product-Grade Next.js Application and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Capstone Build: Product-Grade Next.js Application in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Capstone Build: Product-Grade Next.js Application, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Capstone Build: Product-Grade Next.js Application with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Week 24

Capstone Polish, QA, and Technical Defense

2 hours/week + labs

Learning Outcomes

Design the principles of Capstone Polish, QA, and Technical Defense and link them to course outcomes at advanced depth with architecture-level decision quality.
Optimize Capstone Polish, QA, and Technical Defense in a guided scenario using realistic tools, constraints, and quality gates.
Architect trade-offs, risks, and decision points for Capstone Polish, QA, and Technical Defense, then record rationale for stakeholder review.
Defend a portfolio-ready engineering implementation dossier for Capstone Polish, QA, and Technical Defense with measurable success criteria and next actions.
Track measurable progress using rubric scores, defect/risk trends, and evidence completeness each week.
Run a short retrospective focused on what to retain, improve, and scale into the following week.
Incorporate peer or mentor feedback and revise the week deliverable to professional publication quality.
Publish the week output into your cumulative portfolio with concise outcome narrative and proof artifacts.

Capstone Projects

Project 1: React Feature Workspace

Build a complete React feature workspace with routed pages, reusable components, form workflows, and API-backed data handling.

Component architecture and data-flow documentation
Validated form and mutation workflows
Integration demo with error handling scenarios

Project 2: Next.js Production Module

Implement a product-focused Next.js module with App Router, server/client boundary decisions, authentication, caching, and SEO-aware rendering.

Route architecture with protected paths
Caching and revalidation strategy implementation
Performance and accessibility audit summary

Project 3: Capstone: Product-Grade Next.js Application

Deliver and defend a production-ready React and Next.js application with testing, observability, deployment pipeline, and technical rationale.

End-to-end application with CI quality gates
Operational readiness and monitoring setup
Technical defense deck and final release package