The topic of this project is a website that allows users to keep track of results during the 2023 F1 Championship. It isn't a complete website, but it is a good start for a project that could be continued in the future.
We (Paul and Antoine) have been fans of Formula 1 for years and we just started to introduce Alexandre to this wonderful sport and universe. As big fans of Formula 1 since multiple years, we decided to create a project dedicated to this sport.
Note
- This project falls into the scope of the Advanced Web Programming Course during our fifth semester, the study abroad semester while at ESSCA in Budapest, Hungary. More precisely during our third year curriculum at EFREI, which is a French CS engineering school.
- This project has been realized in parallel with the UML Project. To access this project, please see the directory UML and read the README.md file for more information.
The focus of our project is to develop a dedicated online platform for Formula 1 fans, providing them with an opportunity to engage with the sport through an informational website. This platform aims to cater to the interests of Formula 1 fans by creating a space where they can explore the sport in a unique manner.
The project leverages a modern web development stack:
- Backend: It utilizes Node.js with Nitro.unjs acting as a powerful Next Generation Server Toolkit and TypeScript for type safety. Prisma ORM simplifies database interactions with PostgreSQL.
- Frontend: It's built with Vue.js for a reactive and component-based user interface, enhanced with CSS for styling.
- P4ND4P0W3R - Paul HU
- AntoineD01 - Antoine DUPONT
- AlexForex - Alexandre GUILLOIS
-
Clone the repository:
git clone https://github.com/P4ND4P0W3R/f1-pit-lane-predict.git
-
Navigate to the project directory:
cd f1-pit-lane-predict
-
Install dependencies:
npm install
-
Start Client-side:
npm run dev
-
Start Server-side (in a new terminal):
cd server npm run dev
Now you should be able to access the frontend application in your browser at http://localhost:5173
.
- server: Contains the backend code.
- api: Contains the API logic.
- drivers: Contains the logic for drivers.
- races: Contains the logic for races.
- results: Contains the logic for results.
- teams: Contains the logic for teams.
- user: Contains the logic for users.
- src: The main source code for the Vue frontend application.
- assets: Contains the assets of the application (images, fonts, etc.).
- components: Contains the components of the application.
- router: Contains the router logic.
- views: Contains the views of the application.
- public: Holds static files.
- package.json: Defines frontend and backend dependencies and scripts.
-
IDE Setup: VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
-
Type Support: TypeScript cannot handle type information for
.vue
imports by default, so we replace thetsc
CLI withvue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of.vue
types. -
Future Enhancements:
- Robust Betting System: Implement a secure and engaging betting system, allowing users to place bets on race outcomes, driver performance, and other events. This could involve virtual currency, leaderboards, and reward systems.
- Live Race Tracking: Integrate live race data to provide real-time updates on driver positions, lap times, and race incidents. Visualizations like live maps and timing charts would enhance the user experience.
- Personalized Predictions: Develop a machine learning model to offer personalized race predictions based on historical data, driver performance, and user preferences.
- Social Features: Enhance user engagement by integrating social features like chat rooms, forums, and the ability to share predictions and results with friends.
- Expanded Content: Provide more in-depth content beyond race results, such as driver profiles, team histories, technical analysis, and news articles.
-
License: This project is licensed under the MIT License.