This project was developed together with two colleagues during the final year of my Bachelor’s degree in Computer Science, as part of the Web Technologies course evaluation. The main goal was to gain hands-on experience with widely adopted web technologies, including:
- React for building user-friendly client-side interfaces,
- Node.js with Express for server-side programming,
- Java Spring Boot for enterprise-level backend services
- and tools to interact with PostgreSQL and MongoDB databases.
Starting from several datasets (player information, match details, in-game events, and played matches) provided as CSV files downloaded from transfermarkt.com , we designed a small microservices-based architecture consisting of three servers:
- Gateway Server (Node.js + Express): Acts as an intermediary, routing client requests to the appropriate backend services.
- MongoDB Service (Node.js + Express + Mongoose): Handles read/write operations on a MongoDB database, mainly for frequently updated and dynamic data.
- PostgreSQL Service (Java Spring Boot): Manages read/write operations on a PostgreSQL database. This service follows the Repository Pattern, which organizes the code into layers for better structure, maintainability, and development process.
The datasets were split across the two databases according to their usage:
- Static data (read-only or rarely updated) was stored in PostgreSQL,
- Dynamic data (frequently modified, e.g., match events) was stored in MongoDB.
Finally, the Gateway Server was extended with a WebSocket feature using the JavaScript library Socket.IO. This allowed the system to:
- Manage real-time communication across different chat rooms,
- Handle multiple message streams efficiently,
- Provide client users with the ability to chat with other football fans in dedicated discussion spaces.
A custom UI section was developed to support this feature, enabling users to engage in conversations on various football-related topics in real time. ⚽💬
The client side of the application was built entirely with React, leveraging the (now legacy) Next UI library (currently known as Hero UI), along with some Tailwind CSS for styling. Communication with the server is handled through:
- REST APIs, managed via Axios, for structured data requests.
- WebSockets, enabling real-time message exchange without relying on inefficient polling techniques.
(Here you can showcase some screenshots of the UI to give a clear picture of the project.)
The following screenshots were exported from Figma using a plugin that converts code into Figma components. Since the Figma project was also intended to serve as a prototype, we slightly modified certain parts to present the website in a more prototypical and visually clear way.
Since this project was originally submitted using my educational GitHub account (where all commits and development history are stored), on this personal profile I decided to upload the entire project in a single commit for reference and showcase purposes.