Projects›Pro· 150 min read

Project: Live Data App (API)

Fetch real live data from a public API and display it beautifully — your first taste of a real, connected app.

What you will learn

Fetch and display live API data
Handle loading and errors
Combine fetch, the DOM and CSS

The brief

Build an app that fetches live data from a public API and displays it nicely. A weather app, a movie search, a GitHub user lookup — pick one that excites you.

Use fetch + async/await to get JSON data.
Show a “Loading…” state while it loads.
Use try/catch to show a friendly error if it fails.
Render the data into styled cards (bring in your CSS skills).

Build it in this order — each step is a skill you already have:

Show a “Loading…” message on the page first, so the user sees something while the request is in flight.
Inside an async function, call const res = await fetch(url) to request the data from your chosen API.
Parse the reply with const data = await res.json() to turn the JSON into a usable JavaScript object or array.
Wrap steps 2–3 in try/catch so that if the network fails, catch shows a friendly error instead of crashing.
On success, render data into the page — build styled cards with the DOM methods and CSS you already know.

Idea	Free public API
User lookup	`https://api.github.com/users/USERNAME`
Random user	`https://randomuser.me/api/`
Posts/Users	`https://jsonplaceholder.typicode.com`

Tip: This is the closest you will get to full-stack before MERN: a front-end fetching live JSON. In MERN you will build the API that serves the data too.

✍️ Practice

Build a GitHub user lookup: type a username, fetch their profile, show avatar, name and repo count.
Add loading and error states.

🏠 Homework

Style your live-data app with CSS into polished cards and make it responsive.