From 2217489c152f65f4b4a8ced99023aa3a6f202b55 Mon Sep 17 00:00:00 2001 From: henry Date: Tue, 17 Mar 2026 20:18:10 +0100 Subject: [PATCH] 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 --- README.md | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..575ba36 --- /dev/null +++ b/README.md @@ -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 +```