A real-time match prediction web application where users predict match outcomes, earn points for correct predictions, and compete on a live leaderboard.
Built with a strong focus on fair play, simplicity, and reducing human error in tracking predictions and results.
- Secure authentication (login/signup)
- Predict the winner of the current match
- One prediction per game (cannot be changed)
- View personal prediction history
- See match results and prediction outcomes
- Track performance (points, correct & wrong predictions)
- Live leaderboard updates
- Create new games (select teams & match time)
- Declare match winners
- Control which game is active
- Automatic leaderboard & history updates after results
- Live leaderboard updates
- Instant history updates after results
- WebSocket-based event broadcasting
- Clean and responsive UI
- Dark mode support
- Role-based navigation (Admin/User)
- Error handling and success feedback
- React
- React Router
- Context API (Auth & Theme)
- WebSockets for real-time updates
- REST APIs for games, predictions, leaderboard, and authentication
- WebSocket server for live updates
- Stores users, teams, games, predictions, and scores
-
User
- Can predict games
- View history and leaderboard
-
Admin
- Can create games
- Declare winners
- Access admin dashboard
Admin routes are protected and hidden from normal users.
- ✅ Correct Prediction: +10 points
- ❌ Wrong Prediction: 0 points
- Only one prediction allowed per game
- Predictions must be made before game start time
- Admin creates a match and marks it as current
- Users predict the winner before the game starts
- Admin declares the winner after the game
- System updates:
- User scores
- Leaderboard
- Prediction history
- Real-time clients via WebSocket
Create a .env file in the frontend root:
REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_WS_URL=ws://localhost:5000