Skip to main content

​
Introduction

The course includes three major practice projects that combine multiple React concepts into complete, functional applications. These projects provide hands-on experience building real-world features and help solidify your understanding of React fundamentals.

Project Management App

Build a full-featured project and task management application

React Quiz

Create an interactive quiz app with timers and answer validation

Food Order App

Develop a complete food ordering system with cart and checkout

​
What You’ll Build

Each practice project focuses on different aspects of React development:
Key Features:
  • Create, view, and delete projects
  • Add and manage tasks per project
  • Form validation with refs
  • Modal dialogs using portals
  • Complex state management
Concepts Covered:
  • State management patterns
  • useRef and forwardRef
  • React Portals
  • Component composition
  • Tailwind CSS styling
Key Features:
  • Dynamic question loading
  • Answer shuffling
  • Timer-based progression
  • Answer validation and feedback
  • Results summary
Concepts Covered:
  • useEffect and side effects
  • Timer management
  • Effect cleanup functions
  • Derived state
  • useCallback optimization
Key Features:
  • Meal browsing interface
  • Shopping cart functionality
  • Checkout form with validation
  • HTTP requests to backend
  • Custom hooks for data fetching
Concepts Covered:
  • Context API with useReducer
  • HTTP requests and loading states
  • Custom hooks (useHttp)
  • Form handling
  • Error handling

​
Project Structure

All practice projects follow a similar structure: 
project-folder/
├── src/
│   ├── components/     # Reusable UI components
│   ├── store/          # Context providers (where applicable)
│   ├── hooks/          # Custom hooks (where applicable)
│   ├── App.jsx         # Main application component
│   └── main.jsx        # Application entry point
├── public/             # Static assets
└── package.json        # Dependencies and scripts

​
Learning Approach

1

Understand the Goal

Each project starts with a clear objective and feature requirements
2

Build Incrementally

Projects are built step-by-step, with each video adding new functionality
3

Apply Concepts

Combine concepts learned in previous sections into working features
4

Refactor and Improve

Iterate on your implementation to improve code quality and structure

​
Prerequisites

Before starting the practice projects, ensure you understand:

React Fundamentals

Components, JSX, props, and state

Hooks

useState, useEffect, useRef, useContext

Event Handling

User interactions and event handlers

Styling

CSS modules or Tailwind CSS

​
Getting Started

Each project includes starter code in the source repository: 
cd "code/09 Practice Project - Project Management/01-starting-project"
npm install
npm run dev
Each project folder contains multiple subfolders representing different stages of completion. Start with 01-starting-project and refer to later stages if you need help.

​
Best Practices

Attempt to solve challenges on your own before checking the solution videos
Modify the code and add your own features to deepen understanding
Use browser DevTools and console.log to understand how data flows
Review the finished version to see alternative approaches and improvements

​
Next Steps

Start Project Management

Learn state management and refs

Start React Quiz

Master useEffect and timers

Start Food Order

Build with Context and HTTP

Build docs developers (and LLMs) love

Get started for freeTalk to us