UFC Fight Predictor

Full stack web application for UFC matchup analysis. The project compares two fighters, shows side-by-side stats, and returns a machine learning prediction with confidence and explanatory factors.

Overview

The application is split into a React frontend and a FastAPI backend. The backend loads a trained scikit-learn model and fighter data, while the frontend provides the user interface for selecting fighters and viewing prediction results.

Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• Axios
• React Router

Backend

• FastAPI
• Uvicorn
• Pydantic

Machine Learning

• Python
• Pandas
• NumPy
• scikit-learn
• Joblib
• SHAP

Features

• Fighter search and selection
• Red corner vs blue corner comparison
• Prediction result with confidence score
• Fighter profile and matchup statistics
• Model information endpoint
• Responsive frontend deployed on Vercel
• FastAPI backend deployed on Render

Project Structure

.
├── backend/              # FastAPI application
│   ├── app/
│   │   ├── main.py       # API entry point
│   │   ├── routers/
│   │   ├── schemas/
│   │   └── services/
│   ├── model/            # Trained model artifact
│   └── requirements.txt
├── frontend/             # React + Vite frontend
│   ├── src/
│   ├── package.json
│   └── vercel.json
├── data/                 # Raw and processed data
├── scripts/              # Data pipeline scripts
├── src/ufc_predictor/    # ML feature engineering code
├── render.yaml           # Render deployment config
└── runtime.txt           # Python runtime for Render

API Endpoints

• GET / - API information
• GET /health - service health check
• GET /fighters - fighter catalog
• POST /predict - matchup prediction
• GET /model-info - model metrics and features

Running Locally

Backend

pip install -r backend/requirements.txt
uvicorn backend.app.main:app --reload

API docs:

http://127.0.0.1:8000/docs

Frontend

cd frontend
npm install
npm run dev

Frontend:

http://127.0.0.1:5173

For local frontend API calls, create frontend/.env:

VITE_API_URL=http://127.0.0.1:8000

Deployment

Backend on Render

The backend is configured through render.yaml.

Start command:

uvicorn backend.app.main:app --host 0.0.0.0 --port $PORT

Health check:

/health

Frontend on Vercel

Use these settings:

• Root directory: frontend
• Framework preset: Vite
• Build command: npm run build
• Output directory: dist

The frontend uses frontend/vercel.json to proxy /api/* requests to the Render backend and to support client-side routing.

Model Notes

The current model uses matchup-based features such as age difference, height difference, reach difference, win rate, stance, striking accuracy, and takedown accuracy. Predictions are intended for educational and portfolio purposes only.

Responsible Use

This project is not betting advice. Predictions are estimates based on historical data and model assumptions.