# 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
```