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>
This commit is contained in:
2026-03-17 20:18:10 +01:00
parent 861462b41e
commit 2217489c15

108
README.md Normal file
View File

@@ -0,0 +1,108 @@
# Football App
A web application that displays standings and match results for major football competitions, powered by the [football-data.org](https://www.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](https://www.football-data.org/client/register)
- Node.js 18+ (local dev)
- Docker + Docker Compose (production)
### Local development
```bash
# 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)
```bash
# 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:
```bash
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
```