Football League Tracker is a product-style football analytics dashboard built to help fans explore club performance across multiple competitions in one place.
It combines league tables, form analysis, live match context, club insights, scorer leaderboards, and upcoming fixtures into a polished dashboard experience.
Football League Tracker lets a user choose a club and instantly understand:
- where the club sits in the table
- current points, rank, goals scored, and clean sheets
- recent form and momentum
- last match result and next upcoming fixture
- top scorers in the competition
- clubs with the most goals
- clubs with the most clean sheets
- recent league winners
- competition-specific context such as Champions League progression
- Premier League
- LaLiga
- Serie A
- Bundesliga
- Champions League
- Multi-league dashboard experience with a product-style UI
- Live standings and club-level metrics
- Current action and live match context
- Last match result with quick access to YouTube highlights
- Form analysis with:
- points trend
- goals scored vs conceded trend
- scoring consistency
- win / draw / loss distribution
- home and away form
- clean sheet rate
- League-wide panels for:
- current top scorers
- most goals
- most clean sheets
- recent winners
- Club-specific upcoming cup and European competition tracking where data is available
This repository includes actual product screenshots for portfolio presentation.
This project is designed as a portfolio-ready football product concept rather than a basic stats viewer.
It focuses on:
- clean presentation
- data hierarchy
- football-specific insight panels
- multi-competition browsing
- polished dashboard interactions
- JavaScript
- React
- JSX
- Tailwind CSS
- Vite
The dashboard frontend is designed to work with a separate backend proxy/cache built on top of football-data.org.
Current production architecture:
- frontend app on Vercel
- separate backend repo/project for football-data proxying
- shared backend caching so users see the same snapshot instead of each browser hitting the upstream API
The frontend expects:
VITE_FOOTBALL_PROXY_BASE_URL
Example:
https://your-backend-domain.vercel.app/api/football-data
Some cup fixtures still use manual fallbacks where the active API plan does not provide reliable domestic cup coverage.
- Install dependencies
npm.cmd install- Start the app
npm.cmd run dev -- --host 127.0.0.1 --port 4174- Open:
Set your frontend backend URL in:
.env.localwith:
VITE_FOOTBALL_PROXY_BASE_URL=https://your-backend-domain.vercel.app/api/football-dataThe production deployment is frontend-only:
- Vercel hosts the dashboard UI
- the separate backend handles football-data requests and caching
- the frontend only needs
VITE_FOOTBALL_PROXY_BASE_URL
- src/App.jsx - main UI and dashboard logic
- src/lib/footballApi.js - frontend data client for the backend proxy
- src/data/teams.js - local club metadata
- src/index.css - global styling and theme system
- vite.config.js - Vite config
- backend repo - separate backend project for proxying and caching
.env.localis ignored by git and should never be committed- some recent-winner data is maintained manually
- some domestic cup fixtures currently use verified public-source fallbacks
- proxy/cache coverage still depends on your football-data.org plan
- stronger production data reliability for domestic cup competitions
- richer event-level match data such as scorers and goal timestamps
- historical season analysis
- deeper player-level analytics
- improved mobile-specific layout refinements
- additional portfolio screenshots and product branding assets
This repository presents Football League Tracker as a football analytics product concept suitable for:
- portfolio presentation
- frontend product showcase
- continued feature expansion
- deployment on platforms like Netlify