This content originally appeared on DEV Community and was authored by master ngunezi
Introduction
DiskiPred is a fullstack web application I developed that allows users to predict football match outcomes across multiple leagues, track their predictions, and earn points based on real match results. The project challenged me to integrate real-time sports data and build a seamless user experience from backend to frontend.
Project Overview
The platform lets users browse upcoming football fixtures, select their predictions (home win, draw, or away win), and submit them before kickoff. After matches finish, the system automatically fetches results from an external football API, compares them against user predictions, and updates user points and leaderboards.
Technical Stack
I built DiskiPred using the MERN stack:
MongoDB for storing user data, predictions, and match results.
Express.js and Node.js for creating a RESTful API that handles user authentication, prediction submissions, and result updates.
React for building an intuitive and responsive frontend interface.
Key Features and Challenges
User Authentication: Secure signup and login using JWT and bcrypt for password hashing.
Real-time Data Integration: Automatically syncing match results from the API to keep leaderboards updated without manual input.
Prediction Management: Allowing bulk submission of multiple predictions with validation and deadlines.
Responsive Design: Ensuring smooth user experience across devices.
Performance Optimization: Caching frequently accessed data to reduce API calls and speed up responses.
One of the biggest challenges was synchronizing matchdays and fixtures across multiple leagues with varying schedules. I implemented logic to group matches by global matchdays for consistent user experience.
What I Learned
This project strengthened my fullstack development skills and taught me how to architect scalable applications that handle real-time data. I gained valuable experience with authentication, API integration, and optimizing frontend performance.
Conclusion
DiskiPred represents a comprehensive fullstack challenge I successfully delivered from concept to deployment. It’s a project I’m proud of and a solid demonstration of my ability to build complex web applications end-to-end.
Check it out: diskipred.netlify.app
This content originally appeared on DEV Community and was authored by master ngunezi