Project: A Student Dashboard

This project brings components, props, state, effects and routing together into one interface you could show a school.

Plan the Screens

Build a dashboard page that lists students, a search field and a detail page. Keep the data fetching in one place and pass results down as props.

Search and Filter

Derive the filtered list during render instead of storing it in state. Derived values cannot fall out of sync.

const [query, setQuery] = useState("");
const filtered = students.filter(student =>
  student.name.toLowerCase().includes(query.toLowerCase())
);

Reusable Cards

Build a StudentCard that takes a student and an onSelect callback. The card does not fetch anything, which makes it easy to reuse and test.

States

Show loading first, then an error, then an empty result, then the list. Handle every one explicitly so the screen never looks broken.

Practice

1. Add a filter by level.
2. Show the number of matching students.
3. Add a detail page that fetches one student by id.

Hands-on exercise

Build the student dashboard.
1. Fetch students on mount.
2. Show loading, error and empty states.
3. Search by name.
4. Render each result with a reusable StudentCard.
5. Link each card to /students/:id.

Recap

A real interface combines data loading, derived state, reusable components and explicit empty and error states.