DevPath · Learn to code ESPTEN

Mini-project: from your card to a team

Your app grows: from one to many

Remember your card? 🪪

In the "Your profile in numbers" mini-project you modeled one person and calculated their age. It worked, but real apps don't handle just one: they handle lists. A store has many products; a social network, many users; a team, many people.

Today your app grows: you make the leap from one card to a whole team.

The idea: an array of objects

If a person is an object...

const person = { name: "Ana", birth: 2000 };

...a team is an array of objects:

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

This structure —a list of cards— is the bread and butter of any programmer. And you already have the tools to tame it: map to transform, filter to choose and reduce to summarize.

You'll build it piece by piece

🚩 Checkpoint 2 of 4. You now manage a whole team in the console. Later you'll give it a face in React and, finally, a full-stack backend (database + API). Your project, growing step by step.

See it working first

Press Run below to see the finished report. You'll build it in the exercises. 👇

Examples

The team report — press Run

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

function age(p, year) { return year - p.birth; }
function averageAge(team, year) {
  return team.reduce((acc, p) => acc + age(p, year), 0) / team.length;
}
function summary(team, year) {
  const lines = team
    .map((p) => "- " + p.name + ": " + age(p, year) + " years")
    .join("\n");
  return "👥 TEAM (" + team.length + ")\n" + lines +
    "\nAverage age: " + averageAge(team, year);
}

console.log(summary(team, 2026));
Put this into practice

DevPath is a hands-on course: you read the theory here; in the app you put it into practice with exercises that really run, offline.

Start free in the app →
View the module →