Projects›Extra· 150 min read
Project: Live Data App
Build a polished app that fetches live data, with loading and error states and a search filter.
What you will learn
- Fetch and display API data
- Add search/filter with state
- Handle loading and errors
The brief
Build an app that fetches a list from a public API and lets the user search/filter it live. A user directory, a recipe finder, a movie search — your choice.
- Fetch data in
useEffectwith[]and store it in state. - Show a loading message, and an error message on failure.
- Add a search input that filters the list as you type.
- Render results as styled cards (use your CSS skills).
Tip: Combine everything: useState for data + search term, useEffect for fetching, .filter() for search, .map() for rendering. This is a complete, real React screen.
Note: Try https://jsonplaceholder.typicode.com/users or https://api.github.com/users for free data.
✍️ Practice
- Build the data app with fetch, loading/error states and a live search filter.
- Style the results as a responsive card grid.
🏠 Homework
- Add sorting (by name) and a “no results” message.