How to Build a Football Stats Dashboard with React and AI

import { NextRequest, NextResponse } from "next/server";

const API_BASE_URL = "https://api.thestatsapi.com/api";

export async function GET(request: NextRequest) {
  const upstreamPath = request.nextUrl.searchParams.get("path");

  if (!upstreamPath?.startsWith("/football/")) {
    return NextResponse.json(
      { error: "Unsupported TheStatsAPI path" },
      { status: 400 }
    );
  }

  const response = await fetch(`${API_BASE_URL}${upstreamPath}`, {
    headers: {
      Authorization: `Bearer ${process.env.THESTATSAPI_KEY}`,
      Accept: "application/json",
    },
    next: { revalidate: 60 },
  });

  const body = await response.json();
  return NextResponse.json(body, { status: response.status });
}

export async function fetchFootball<T>(path: string): Promise<T> {
  if (!path.startsWith("/football/")) {
    throw new Error("TheStatsAPI path must start with /football/");
  }

  const response = await fetch(
    `/api/thestatsapi?path=${encodeURIComponent(path)}`
  );

  if (!response.ok) {
    throw new Error(`TheStatsAPI request failed: ${response.status}`);
  }

  return response.json();
}

"use client";

import { useEffect, useState } from "react";
import { fetchFootball } from "./fetchFootball";

type Match = {
  id: string;
  utc_date: string;
  status: string;
  home_team: { name: string };
  away_team: { name: string };
  score?: { home: number | null; away: number | null };
  xg_available?: boolean;
  live_odds_available?: boolean;
};

type MatchResponse = {
  data: Match[];
};

export function FootballDashboard() {
  const [matches, setMatches] = useState<Match[]>([]);
  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");

  useEffect(() => {
    fetchFootball<MatchResponse>("/football/matches?per_page=10")
      .then((result) => {
        setMatches(result.data);
        setStatus("ready");
      })
      .catch(() => setStatus("error"));
  }, []);

  if (status === "loading") return <p>Loading fixtures...</p>;
  if (status === "error") return <p>Could not load fixtures.</p>;
  if (matches.length === 0) return <p>No fixtures found.</p>;

  return (
    <section>
      <h2>Fixtures</h2>
      <div>
        {matches.map((match) => (
          <article key={match.id}>
            <time>{new Date(match.utc_date).toLocaleString()}</time>
            <strong>
              {match.home_team.name} {match.score?.home ?? "-"} -{" "}
              {match.score?.away ?? "-"} {match.away_team.name}
            </strong>
            <small>
              {match.status}
              {match.xg_available ? " · xG available" : ""}
              {match.live_odds_available ? " · live odds available" : ""}
            </small>
          </article>
        ))}
      </div>
    </section>
  );
}

Read this API reference before coding: https://api.thestatsapi.com/llms.txt

Build a React football stats dashboard using TheStatsAPI.

Requirements:
- Keep the API key server-side. Do not expose it in browser code.
- Create a backend proxy route under /api/thestatsapi that accepts a validated upstream path and adds the Bearer token.
- Build a dashboard with these panels:
  - Fixtures for a selected competition
  - Live scores with 30-second polling
  - Player search with debounced input
  - League table built from team season stats
  - Optional odds panel for a selected match
- Use real endpoint paths and response fields from llms.txt only.
- Include loading, empty, and error states.
- Add a small config file for competition_id and season_id.
- Keep the UI clean, dense, and useful for a sports data product.

Use these endpoints:
- GET /football/competitions
- GET /football/competitions/{competition_id}/seasons
- GET /football/matches
- GET /football/players
- GET /football/teams
- GET /football/teams/{team_id}/stats
- GET /football/matches/{match_id}/odds

After implementing, explain where to put THESTATSAPI_KEY and how to run the app.

GET /football/matches
GET /football/players
GET /football/competitions/{competition_id}/seasons
GET /football/teams/{team_id}/stats
GET /football/matches/{match_id}/odds
GET /football/matches/{match_id}/odds/live

I want a soccer/football dashboard for MLS and Premier League fans.
Users should pick a league, see upcoming fixtures, check live scores,
search players, and inspect match odds. The app should feel like a
developer tool, not a marketing landing page.

Before writing code, read https://api.thestatsapi.com/llms.txt and make a data plan.
For each dashboard feature, list the endpoint, required query params,
fields used, cache strategy, and empty-state behavior.
Do not implement until the data plan is complete.

Implement the dashboard using React components:
- FootballApiClient
- FixturesPanel
- LiveScoresPanel
- PlayerSearch
- LeagueTable
- MatchOddsPanel
- ErrorMessage
- EmptyState

Use a server-side proxy for TheStatsAPI requests.

Improve the fixtures panel so finished matches, live matches, and scheduled matches
are visually distinct. Keep the layout compact and scannable.

Add a match detail drawer. When a user clicks a fixture, fetch match stats and odds
if available. Show xG, shots, possession, corners, and 1X2 odds.

Add defensive error handling for unavailable data. If xG or odds are missing,
show a neutral empty state instead of throwing.

export async function fetchFootball<T>(path: string): Promise<T> {
  if (!path.startsWith("/football/")) {
    throw new Error("TheStatsAPI path must start with /football/");
  }

  const response = await fetch(
    `/api/thestatsapi?path=${encodeURIComponent(path)}`
  );

  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }

  return response.json();
}

const API_BASE_URL = "https://api.thestatsapi.com/api";

export async function proxyFootballRequest(path: string) {
  if (!path.startsWith("/football/")) {
    throw new Error("Unsupported TheStatsAPI path");
  }

  const response = await fetch(`${API_BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${process.env.THESTATSAPI_KEY}`,
      Accept: "application/json",
    },
  });

  if (!response.ok) {
    throw new Error(`TheStatsAPI error: ${response.status}`);
  }

  return response.json();
}

Add a fixtures panel using GET /football/matches.
Support competition_id, season_id, status, date_from, and date_to filters.
Show home team, away team, score, status, UTC date, and xg_available.
Add loading, empty, and error states.

Add a season picker using GET /football/competitions/{competition_id}/seasons.
Default to the season where is_current is true. Store season_id in dashboard config
and use it when fetching team stats or season-specific matches.

Add a live scores panel using GET /football/matches?status=live.
Poll every 30 seconds, stop polling when the component unmounts,
and show a quiet empty state when no matches are live.

Add player search using GET /football/players?search={query}.
Debounce input by 300ms. Show player name, position, nationality,
current team, and a link to fetch season stats later.

Build a league table by first fetching teams with GET /football/teams,
then fetching each team's stats with GET /football/teams/{team_id}/stats.
Use competition_id and season_id when fetching teams, and pass season_id to
the team stats endpoint. Sort by position. Show played, wins, draws, losses,
goal difference, points, and form.

Add a match odds panel using GET /football/matches/{match_id}/odds.
Show bookmaker, 1X2 prices, BTTS, total goals, corners, and Asian handicap
when fields are present. If odds are unavailable, show a neutral empty state.

type Match = {
  id: string;
  utc_date: string;
  status: string;
  home_team: { id: string; name: string };
  away_team: { id: string; name: string };
  score?: { home: number | null; away: number | null };
  xg_available?: boolean;
  live_odds_available?: boolean;
};

function MatchCard({ match }: { match: Match }) {
  return (
    <article>
      <time>{new Date(match.utc_date).toLocaleString()}</time>
      <div>
        {match.home_team.name} {match.score?.home ?? "-"} -{" "}
        {match.score?.away ?? "-"} {match.away_team.name}
      </div>
      <small>{match.status}</small>
    </article>
  );
}