A modern Single Page Application (SPA) built with Svelte 5, featuring England football club data and designed as a Progressive Web App (PWA).
This application serves as a comprehensive learning project for exploring Svelte 5's capabilities while creating a functional football club information platform. The app fetches and displays data about England football clubs in an intuitive, responsive interface.
This project was developed as a personal learning initiative to master Svelte UI library fundamentals and modern web development practices. It demonstrates practical implementation of various frontend technologies and design patterns.
This project encompasses several key learning areas:
The application follows modern frontend architecture principles:
/api
folder for handling cross-origin requestsgit clone https://github.com/Kuhlen/england-football-clubs.git
cd england-football-clubs
yarn install
yarn dev
http://localhost:5173
yarn build
yarn preview
This application implements a custom CORS proxy solution to handle cross-origin requests when fetching football club data. The proxy is located in the /api
folder and deployed as a serverless function on Vercel.
If you encounter issues with data fetching, you may need to activate the CORS proxy service first:
This step is required due to CORS restrictions when accessing external APIs from the browser.
This application is deployed on Vercel, leveraging its serverless architecture for optimal performance and scalability. The deployment includes:
The application emphasizes clean, modern design with focus on:
The application emphasizes clean, modern design with focus on:
Hand-built SPA routing system to understand the fundamentals of client-side navigation without relying on external libraries.
Utilizes Svelte's built-in store system for managing application state and data flow.
Implements browser storage for persisting user preferences and cached data.
Organized into reusable components following best practices for maintainability and scalability.
Custom serverless function deployed on Vercel to handle cross-origin requests, enabling secure access to external football APIs without exposing API keys or dealing with browser CORS restrictions.
This is a personal learning project, but feedback and suggestions are welcome! Feel free to open issues or submit pull requests.
This project is open source and available under the MIT License.
Through this project, I've gained hands-on experience with:
When I updated this project on July 13, 2025, the details page couldn't display squads. This was because the squad key in the API https://api.football-data.org/v2/teams/{id} no longer provided squad data. However, I noticed that the API https://api.football-data.org/v4/teams/{id} provided squad data, albeit with a different schema than v2. Feel free to change it if you want to try it.
This project represents my journey in learning modern web development with Svelte 5. It serves as both a functional application and a comprehensive learning resource.