Projects›Pro· 210 min read
Capstone: Multi-Page React App
Build a complete, multi-page React application — your front-end portfolio piece, ready to connect to a back-end.
What you will learn
- Combine routing, components, state and data fetching
- Structure a real application
- Produce a portfolio-quality front-end
The brief
Build a complete React app with multiple pages using React Router. A blog, a store, a dashboard — pick something you would be proud to show.
Requirements
- At least three routes (e.g. Home, List, Detail) via React Router.
- A reusable component library (Navbar, Card, Button).
- Data fetched from an API with loading and error states.
- At least one form with controlled inputs.
- Shared state where needed (lifting state up or
useContext). - A clean
components/+pages/+hooks/structure.
Stretch goals
- A custom
useFetchhook. - A dark-mode toggle via context.
- Responsive, polished CSS.
Tip: This is your front-end masterpiece. In the next parts of MERN — Node, Express and MongoDB — you will build the back-end that this app fetches from, completing the full stack.
Note: When this is done you can build any front-end. Combined with the back-end skills coming next, you will be a full-stack MERN developer.
✍️ Practice
- Build the multi-page app meeting all six requirements.
- Implement at least one stretch goal.
🏠 Homework
- Write a short case study of your app (features, components, what you learned) for your portfolio.