Published on February 24, 2026

How to Build a Football App with the Free Barcelona API 2026

Step-by-step guide to building a football web app using the free FC Barcelona API in 2026. Covers squad display, match countdown, and standings table with JavaScript and the Barça API.

Building a Football App from Scratch

The Barça API gives you everything you need to build a compelling football application for free in 2026. In this guide we will build a simple web app that shows the current squad, the next match countdown, and the La Liga standings — using only vanilla JavaScript and the free API.

What We Will Build

A single-page app with three sections:

Squad grid — all players with position badges
Next match card — team names, venue, and countdown
Standings table — current La Liga table

Step 1: Set Up the HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Barça Dashboard</title>
</head>
<body>
  <h1>FC Barcelona Dashboard</h1>
  <div id="squad"></div>
  <div id="next-match"></div>
  <div id="standings"></div>
  <script src="app.js"></script>
</body>
</html>

Step 2: Fetch the Squad

async function loadSquad() {
  const res = await fetch('https://api.fc-barcelona.app/api/squad');
  const { data } = await res.json();

  const container = document.getElementById('squad');
  container.innerHTML = data.map(player => `
    <div class="player-card">
      <span class="position-badge">${player.position}</span>
      <strong>#${player.number}</strong>
      <p>${player.name}</p>
      <small>${player.nationality}</small>
    </div>
  `).join('');
}

Step 3: Show the Next Match

async function loadNextMatch() {
  const res = await fetch('https://api.fc-barcelona.app/api/next-match');
  const { data } = await res.json();

  if (!data) return;

  const matchDate = new Date(data.matchDate);
  const diff = matchDate - new Date();
  const days = Math.floor(diff / 86400000);

  document.getElementById('next-match').innerHTML = `
    <div class="match-card">
      <h2>${data.homeTeam} vs ${data.awayTeam}</h2>
      <p>${data.competition} — ${data.venue}</p>
      <p class="countdown">${days} days to go</p>
    </div>
  `;
}

Step 4: Render the Standings

async function loadStandings() {
  const res = await fetch('https://api.fc-barcelona.app/api/standings');
  const { data } = await res.json();

  const rows = data.map(team => `
    <tr>
      <td>${team.position}</td>
      <td>${team.team}</td>
      <td>${team.played}</td>
      <td>${team.won}</td>
      <td>${team.drawn}</td>
      <td>${team.lost}</td>
      <td>${team.points}</td>
    </tr>
  `).join('');

  document.getElementById('standings').innerHTML = `
    <table>
      <thead><tr><th>#</th><th>Team</th><th>P</th><th>W</th><th>D</th><th>L</th><th>Pts</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  `;
}

// Load everything
loadSquad();
loadNextMatch();
loadStandings();

Step 5: Load in Parallel

For better performance, fetch all three resources simultaneously:

async function init() {
  await Promise.all([
    loadSquad(),
    loadNextMatch(),
    loadStandings()
  ]);
}

init();

Going Further

With this foundation you can add:

Position filters — buttons to show GK, DF, MF, FW using ?position= query param
Calendar view — use /api/calendar to show past and upcoming fixtures
Live countdown — update the timer every second with setInterval
Dark theme — the Barça colors are #a50044 (red) and #004d98 (blue)

What It Costs

Nothing. The Barça API is completely free for personal projects and demos. No API key, no sign-up, no rate limit concerns for normal usage.

Explore the API First

Use the interactive terminal to explore all available data before writing code. Then check the full API docs for the complete endpoint reference.

Back to blog