https://github.com/mullah98/my-footy-app

A football data app built with Next.js, featuring the latest standings and fixtures powered by API-Football.
https://github.com/mullah98/my-footy-app

api backend frontend nextjs react

Last synced: 27 days ago
JSON representation

A football data app built with Next.js, featuring the latest standings and fixtures powered by API-Football.

• Host: GitHub
• URL: https://github.com/mullah98/my-footy-app
• Owner: Mullah98
• Created: 2024-07-26T15:10:52.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2025-01-09T14:38:21.000Z (about 1 month ago)
• Last Synced: 2025-01-09T15:38:43.688Z (about 1 month ago)
• Topics: api, backend, frontend, nextjs, react
• Language: JavaScript
• Homepage: https://www.youtube.com/watch?v=vH9TijMc_jo
• Size: 230 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# My Footy App Project

This is a live football stats app built using **NextJs**, with the data provided by [**API-Football Services**](https://www.api-football.com/).

# Features

- Display live football fixtures, standings, top scorers and assist leaders

- View detailed stats, squads and club transfers for each team

- View upto date statistics for each player

- Data fetched from **API-Football Services**

# Getting started

- `Clone the repository` git clone repository_link

- `Install dependencies` npm install

- `Set up the environment variables by creating a .env.local file with your API key from api-football.com` API_FOOTBALL_KEY=your_api_key_here

- `Run the development server` npm run dev

- `View the app`

# API Integration

This project uses the [**API-Football**](https://www.api-football.com/) to fetch football data. Ensure you have an API key by signing up on their platform.

# Project structure

- `/components:` Contains reusable components such as Player, Team and Fixture

- `/pages:` Main pages of the app including fixtures, standings, and stats

- `/api:` API calls to fetch data

# Deployment with Vercel

- Push the project to your GitHub

- Link your GitHub to Vercel

- Deploy your app with a single click

- More details on the deployment [**Next.js deployment docs**](https://nextjs.org/docs/pages/building-your-application/deploying)

# Challenges

- `Handling Real-Time Data-` Managing and updating live football data for fixtures and stats in real time was challenging. I implemented efficient caching techniques using React Query to reduce API calls and improve performance by automatically caching and syncing data.

- `API Rate Limits and Testing-` API-Football's rate limits initially restricted the number of requests I could make, making thorough testing difficult. To overcome this, I opted to purchase a membership, which provided a higher request limit, allowing me to perform more extensive tests.

- `Loading the Current Fixture List-` Ensuring the current fixure list was displayed correctly was a challenge. I had to ensure all fixtures were complete before moving onto the next round which required handling data dependencies and making sure the state was updated after each map result.

- `Deployment Issues-` During deployment on Vercel for the first time, I faced multiple build errors due to environment variable configuration. This was resolved by properly setting up .env.local and configuring the variables in Vercel's dashboard.