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
parent 861462b41e
commit 2217489c15
1 changed files with 108 additions and 0 deletions
--- a/README.md
+++ 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
+```