Your app finally has a face — Mini-project: your team on screen

From the console to the screen 📱

In the previous checkpoints you built your app in the console: first a person's profile, then a whole team with its average age. It worked… but nobody shows a console to their friends.

Today your app gets a face. With React you'll paint that same team on screen: cards, a list, a summary. The same data as always, now visible and pretty.

The idea: data comes in as props

Your components receive the team just like your functions received the array:

const team = [
  { name: "Ana", birth: 2000 },
  { name: "Beto", birth: 1990 },
  { name: "Caro", birth: 2010 },
];

<Team team={team} currentYear={2026} />

And inside the component you do the usual —compute the age, walk the list—, but instead of console.log you return JSX, which the browser draws.

You'll build it in three steps

Card → the profile of one person, now visible.
Team → the list of cards (with map and key).
TeamApp → the full app: header, list and average age.

Each exercise renders for real: when you press Check, you'll see your team on screen. That's the reward. 🎉

🚩 Checkpoint 3 of 4. You've given your app a face. The final step will be a full-stack backend: your team will live in a database and be served through an API.