Lab 5: React Deep Dive
Group Enhancement Exercise
ImportantLab Information
Assigned: Friday, February 13, 2026 Points: 100
Overview
In this exercise, your group will progressively enhance the react-express-mongo variant of the Project Manager application through a series of stages. Each stage builds on the previous one, introducing new React concepts and increasing in complexity. You will work in the react-express-mongo/client/ directory using Vite + React + React Router on the frontend, talking to a shared Express API server backed by MongoDB.
The Stages
| Stage | What You Do | React Concepts Introduced |
|---|---|---|
| 1. Read & Trace | Read code, answer architecture questions | Hooks, state, effects, routing, data flow |
| 2. Extract | Pull TaskCard out of ProjectDetail | Props, callback props, component extraction |
| 3. Compose | Build a Kanban board using TaskCard | Component composition, conditional rendering, derived state |
| 4. Filter | Add search and status filters to the task list | Controlled components, computed/derived state, useMemo |
| 5. Dashboard | Build a dashboard page with aggregated data | Multiple API calls, Promise.all, reusable components |
| 6. Present | Demo your enhanced app and explain the React concepts | Communication, reflection |
Each stage must be completed before moving to the next.
Getting Started
Click the button below to accept the assignment and create your repository:
Prerequisites
- Completed Lab 4
- Full stack running via
docker compose upfrom the root directory
Getting Help
- Office Hours: Tuesday 9-11 AM, Pitt 2206
- Webex: Post questions with
lab5tag - TA Sessions: Check LMS for schedule