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:
108
README.md
Normal file
108
README.md
Normal 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
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user