👋 Welcome to EuroBet24, a web application created for the Check24 GenDev that enables users to place bets with and against friends for the UEFA European Championship 2024 in Germany ⚽.
- 📌 Deployment here: https://eurobet24.vercel.app/ . Testaccount: Email gendev@gmail.com , Password: TEST123
- Overview of Used Technologies
- Database & Backend
- Frontend
- Real-time Updates and Points Allocation
- Possible Optimizations
- Additional Notes
Main Programming Language: JavaScript (Frontend and Backend)
Frontend Framework: React
Styling: Scss / Css3
Backend & Real-time Database: Google Firebase
Cloud Functions: Google Cloud (for calculating user points)
Before starting to actual writing code for the challenge I used the the skills acquired in my Software Engineering lectures to create a domain model (design class model). This model allowed me to visualize the connections between different data elements and provided a solid foundation for structuring the entire project:
Additional notes regarding the domain model:
- All models have a unique ID (User => uid, Community => communityName, Match => matchId, Bet => betId equals matchId).
- A user can place a bet, and each bet is affiliated with one user.
- Each bet is placed on exactly one match, and for each match, there can be multiple bets.
- A user is part of at least one community (GLOBAL_COMMUNITY) and can be a member of up to five communities.
Database
- I decided to use the Google Firebase Realtime Database,a NoSQL cloud database. This database synchronizes data across all clients in real-time, ensuring live updates in the Leaderboard or match results within the React web application.
Key points about the database structure:
- There are three main collections:
communities,matches, andusers. - Bets from each user are persisted as a sub-collection within
users:users/{uid}/bets.
Backend:
- For backend I made use of the backend cloud computing services provided by Google Firebase. It hosts my database, services, functions and the authentication. I created two Firebase projects: one for development and testing purposes and the other for production.
.csv match file:
- I used the given dataset and converted it to JSON-format. Additionally, I added the columns matchId, matchType, game_status, goals_home and goals_away. This JSON-file was finally imported in my database and is fetched by the client (react app).
I decided to use the popular language JavaScript and the framework React to create a simple UI that can run on any device and browser in web.
Additionally, I use the library MaterialUI for some React Components (Buttons, Tables, Alerts, Lists,...).
The user can signup / signin by entering a username, a email (not used yet) and a password.
The frontend consists of a single page/route encompassing four main elements.
-
📊 Dashboard: displays the current matches (last finished, live with a red background color, and two upcoming) along with a sneak preview of each community's leaderboard. Users can view communities they are part of by clicking on the "Show sneak preview" button, which reveals a table displaying a "summarized" leaderboard (*See als scenarios for the sneak preview at the end of this document / attachement).
-
👨👩👦👦 Communities: Consists of two elements, "Actions" and "Your communities". In "Actions", you can either create a new community or join community, for both you only have to enter a Community name. The community name is unique (!Upper and lower case). More specific, there are two buttons (Create and join), and when you click on one of them there appears a "Drawer". "Your Communities" displays all communities you are part of. When you login for the first time, you are default part of GLOBAL_COMMUNITY (All Users). I implemented this with a simple approach, if a user signs up, the userId is written to the GLOBAL_COMMUNITY member-array. Of course there can be other (up to 5) communitites displayed. If a user is already part of 5 communities and clicks on the create / join button, an error alert appears. Similar to the sneak preview there is below each communityName a button "Show leaderboard" that opens again a Drawer (in the Code one main component to show the realtime-updated Leaderboard (
"MainDrawer.js"). There you can search a user and display different views (Show all users, View for you with arrows, Sneak preview, Top3, Pinned Users, Current User, Last Place). The leaderboard table consists of rank (sorted like : 1,2,3,3,5,....), username and current points of each user. When some event happens (goal scored => points changed), the leaderboard updates in realtime ( see also Realtime updates). A user can display a flexible amount of users (5 to 1000, default 10) and can also jump directly to himself.
-
🎰 Bets: Consists of two elements, "Matches you placed a bet" and "Matches available for betting". In "Matches you placed a bet" there is a list of all matches you placed a bet. It shows the match, the date of the match, the gamestatus (Finished, Live or upcoming), the result you betted, the actual result, and the points you will / have receive(d) for the match. If points > 0 for a match, the points are displayed green. If a match is live, the result blinks red. In "Matches available for betting" you can see all matches that are available for betting now. A match is "available" if you didn't placed a bet yet on this match and it hasn't the game_status FINISHED or RUNNING. You can simply enter the goals for the home team and for the away team via Input and press on the button "Bet". After that, this specific game will be switching to "Matches you placed a bet".
-
📅 Match schedule: This section displays all games of the EURO 2024, sorted by date and type of game (GROUP STAGE, ROUND OF 16, QUARTERFINALS, SEMIFINALS, FINAL) Via Select you can filter by type of game. Additionally, there's a link to the official website of EURO 2024 for viewing groups, lineups, and goalscorers.
All elements of the frontend are live and updated in real-time whenever events occur (e.g. match data changes, user joins a community, bet is placed).
The application admin can update results directly in the database (See live demo in next section), there's no need to restart anything.
Fancy features
-
Darkmode and lightmode
-
Choose language (Currently German or English)
-
Display flags for each country
-
Live matches are blinking in red
-
Runs as a "native app" on mobile phones (special settings in
"index.html"):
RPReplay_Final1715264129-min.mp4
The most challenging and "funny" part of this challenge was definitely providing realtime updates and especially setting points for each user in realtime. The firebase realtime DB stores data in JSON format and synchronizes it across all connected clients in real-time. Integrated with the React web application, it enables seamless data storage and synchronization between frontend (React app) and backend (Firebase). Firebase provides methods once() to fetch data once or on() (which I used) to set up listeners for real-time updates. When data changes in the database, the changes are automatically propagated to the React app, keeping the UI up-to-date with the latest data. Thus, when a match is modified in the database, every current user can observe the update almost instantly.
Setting points for each user:
To accomplish this task, I utilized Firebase Cloud Functions, a serverless framework that executes JavaScript code in the cloud. I created a calculatePoints() function to determine the points awarded based on the logic (8 points for the exact result, 6 points for the correct goal difference if not a draw, 4 points for the correct tendency, and 0 points for any other outcome). This function is triggered automatically whenever there is a change in any match ("matches/{matchId}"). It retrieves all user IDs that have placed bets on the affected game(s) and calculates the points for each user by comparing the actual result with the predicted outcome.
With this approach, automatic and realtime updates are ensured!
Even if I am happy to manage all the different requirements, there are several areas where optimization is possible:
- Adaptability: Currently, the app is designed specifically for EURO24. However, once EURO24 concludes, the app may become obsolete. To address this, I can optimize the database structure by introducing a main collection named
competitions, with subcollections for each competition (e.g.,competitions/{id}/matches). This optimization allows for easy importing of competitions into the database and instant display on the frontend. - Security: Currently the password is displayed as plain text in the database. Storing passwords as plain text in the database is a significant vulnerability and implementing encryption is a MUST-HAVE in real-world projects.
- External API for matches: In such a project with live data, I would normally use an external API that fetches data for the matches so there's no need to actual manually update the results as an application admin. For this project it was required to also have the possibility to manually update the results so it's okay.
- Number of API Requests: To improve frontend performance, I can reduce the number of GET requests. For instance, consolidating multiple GET requests, such as those for current matches and match schedules, into a single request can enhance efficiency.
- Folder Structure and comments: Cleary seperate the components that are written to reuse them in other components from those that are specific for one page.
- Update the match schedule to the right/updated times and matches - Display the groups (A, B, C,...) to see the results of the teams
I had lots of fun writing code for this amazing challenge. After my university lectures, I couldn't wait to continue working on this cool project because for me, there's nothing more captivating than making progress in a coding project and seeing new functionalities added every day.
I want to thank Check24 for the opportunity to apply for the GenDev scholarship and I'm looking forward to hearing from you!
If you have any questions or would like to discuss anything further, please feel free to reach out to me via email: david.luff03@gmail.com.
-Sneak preview scenarios:
- normal:
- user is in top 3 (no duplicates):
- members < 7:
- user not in top 3 and user has only the last place behind (no duplicates):
