Files

henry 2217489c15 Add README

Covers features, supported competitions, tech stack, local dev setup,
Docker production deployment, environment variables and project structure.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-03-17 20:18:10 +01:00

2.9 KiB

Raw Blame History

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

2.9 KiB Raw Blame History