Build an admin dashboard with a sidebar, stats cards, a searchable table and a detail page, using data from a mock API.
The project for module 3, React. It proves: components, state, routing and data fetching in react.
Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.
Online store admin: products, orders and customers
Gym admin: members, plans and check-ins
Clinic admin: patients, appointments and doctors (made-up data only)
Two short builds that practise the skills this project needs. About 3.5 hours in total.
Show products from DummyJSON and filter them by category and price.
Done when: Changing either filter updates the list instantly with no extra requests.
A 3-step form (account, profile, review) that keeps answers between steps.
Done when: Going back never loses an answer, and Next is blocked until the step is valid.
7 steps in order. Each one ends with a clear check, so you always know when to move on.
Create a React app with Vite, add Tailwind and React Router, and build the sidebar layout.
Done when: Clicking sidebar links changes the page without a reload, and an unknown URL shows your 404 page.
Put the sidebar in a layout route and render pages with <Outlet />.
Load products or users from DummyJSON into the table page.
Done when: The table shows 30 rows from the API, with a loading state.
Write one small fetch helper and reuse it, so loading and error handling live in one place.
Add a search box and clickable column headers that sort the table.
Done when: Searching and sorting work together, and the URL keeps the search term.
Keep the search term in the URL with useSearchParams so a refresh or shared link keeps it.
Make each row open a detail page at /products/:id.
Done when: Opening a detail URL directly in a new tab works.
Read the id with useParams and fetch that one item.
Show 4 numbers at the top of the home page, worked out from the data.
Done when: The numbers change if the data changes.
Calculate stats from the data with reduce instead of typing them in.
Extract repeated UI into components and fix every console warning.
Done when: The console is clean and no component is longer than about 150 lines.
The usual warning is a missing key prop in a list. Use the item's id, not the index.
Deploy on Vercel and record a 30-second screen recording for the README.
Done when: The live link and the recording are in the README.
On Vercel, add a rewrite so refreshing /products/5 doesn't show a 404.
Tick each one when it's done. Saved to your account.
Optional. One of these makes your project stand out from the tutorial version.
Free APIs, tools and docs for this project.