Football Prediction App

This is a full-stack web application that leverages a machine learning model to predict the outcomes of football (soccer) matches. The frontend is built with Next.js and TypeScript, and the backend prediction model is served via a Python API.

✨ Features

• Match Outcome Prediction: Input match data to get predictions (Win, Loss, Draw).
• Interactive Dashboard: Visualizes model performance and prediction data.
• Model Performance Metrics: Displays key metrics like accuracy, precision, recall, and F1-score.
• Feature Importance: Shows which factors (e.g., team form, player stats) are most influential in the model's predictions.
• Confusion Matrix: A visual representation of the model's prediction accuracy.
• Responsive Design: A clean, modern UI that works on all devices.

🛠️ Tech Stack

• Frontend:
  • Next.js - React Framework
  • TypeScript - Typed JavaScript
  • Tailwind CSS - Utility-First CSS Framework
  • shadcn/ui - Re-usable components
  • Recharts - Charting Library
• Backend:
  • Python - Language for the prediction model
  • Flask / FastAPI (assumed) - API Framework

🚀 Getting Started

Prerequisites

• Node.js (v18.x or later)
• pnpm
• Python (v3.8 or later)

Installation

1. Clone the repository:

   git clone https://github.com/NAJID-MOHAMED/football_predection.git
   cd football-prediction-app

2. Install frontend dependencies:

   pnpm install

3. Install backend dependencies:

   pip install -r requirements.txt

4. Create a local environment file: Create a .env.local file in the root directory. Your API keys and other environment variables will go here.

   NEXT_PUBLIC_API_URL=http://127.0.0.1:5000
   

Running the Application

1. Start the backend server: Open a terminal and run the Python API.

   # (Assuming the entry point is index.py inside the api folder)
   python api/index.py

2. Start the frontend development server: Open a second terminal and run the Next.js app.

   pnpm dev

The application should now be running at http://localhost:3000.

📁 Folder Structure

.
├── api/                  # Python Backend API
│   └── index.py
├── app/                  # Next.js App Router
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/           # React Components
│   ├── ui/               # shadcn/ui components
│   └── dashboard.tsx
├── hooks/                # Custom React Hooks
├── lib/                  # Utility functions
├── public/               # Static Assets
├── .gitignore
├── next.config.js
├── package.json
├── requirements.txt
└── tsconfig.json

.gitignore Recommendations

Your current .gitignore file is well-configured for a Next.js project and already includes .env*, which ensures your local environment variables are not committed.

For the Python backend, you should ensure the following patterns are also in your .gitignore to exclude common Python artifacts:

# Python
__pycache__/
*.pyc
*.pyo
*.pyd
.Python
env/
venv/