Football App

A web application that displays standings and match results for major football competitions, powered by the football-data.org API.

Features

• Tile-based home screen to pick a competition
• Live standings table with position indicators (Champions League, Europa League, relegation)
• Click any team to view their full match history for the season
• Responsive layout for desktop, tablet and mobile
• API key kept server-side — never exposed in the browser

Supported competitions

Code	Competition
PL	Premier League
CL	UEFA Champions League
BL1	Bundesliga
SA	Serie A
PD	Primera División
FL1	Ligue 1
DED	Eredivisie
PPL	Primeira Liga
ELC	Championship
BSA	Brasileirão Série A
EC	European Championship
WC	FIFA World Cup

Tech stack

• React 18 + Vite 6
• nginx — serves the static build and proxies API calls (injects the API key server-side)
• Docker — multi-stage build for production deployment

Getting started

Prerequisites

• A free API key from football-data.org
• Node.js 18+ (local dev)
• Docker + Docker Compose (production)

Local development

# 1. Clone the repo
git clone https://git.henrystuifzand.nl/henry/football-app.git
cd football-app

# 2. Create your .env file
cp .env.example .env
# Fill in VITE_FOOTBALL_API_KEY in .env

# 3. Install dependencies and start
npm install
npm run dev

The app will be available at http://localhost:5173.

The Vite dev server proxies /api/* to https://api.football-data.org/v4/ to avoid CORS issues.

Production (Docker)

# 1. Create your .env file
cp .env.example .env
# Fill in FOOTBALL_API_KEY in .env

# 2. Build and start
docker compose up -d --build

The app will be available at http://localhost:3000.

To update after a code change:

git pull
docker compose up -d --build

Environment variables

Variable	Used by	Description
VITE_FOOTBALL_API_KEY	npm run dev	API key for the Vite dev proxy
FOOTBALL_API_KEY	Docker / nginx	API key injected by nginx at runtime

Note: The free tier of football-data.org is limited to 10 requests per minute.

Project structure

src/
├── api.js                        # Shared fetch helper
├── competitions.js               # List of available competitions
├── App.jsx                       # Root component / page routing
├── components/
│   ├── CompetitionHome.jsx       # Tile picker home screen
│   ├── StandingsTable.jsx        # League standings table
│   └── TeamMatchesModal.jsx      # Match history modal
nginx/
└── default.conf.template         # nginx config with API proxy
Dockerfile                        # Multi-stage build
docker-compose.yml