F1Desktop is a web project developed during the 2024 academic year for the Systems and Standards for the Web course. It's a website dedicated to Formula 1, offering not only up-to-date championship information but also a variety of interactive features and games, providing an immersive experience for motorsport fans.
This project was developed with a focus on optimization, accessibility, and web development best practices, achieving a score of over 90% on Google Lighthouse.
For the development of F1Desktop, a combination of technologies was used to ensure efficient performance and a smooth user experience:
The page's design was built using pure HTML and CSS, following modern web standards and avoiding the use of elements like div and id selectors in the CSS. This results in more structured, semantic, and easy-to-maintain code.
The project incorporates a balanced mix of programming technologies:
- JavaScript: Responsible for approximately half of the client-side computational logic.
- PHP: Used to manage the other half of the logic, allowing for integration with the server and databases.
Various APIs have been implemented in both JavaScript and PHP to provide a dynamic and interactive experience:
- 🌦️ Real-time Meteorology: Consultation and display of up-to-date weather data.
- 🗺️ Dynamic and Static Maps: Graphical representation of circuits and relevant locations.
- 🎠 Image Carousel: An interactive gallery with Formula 1 images.
- 🏁 Up-to-date F1 Data: Real-time information about the championship.
For data management, especially in the interactive games, MariaDB was used, ensuring an efficient structure for storing and retrieving information.
F1Desktop doesn't just provide information; it also includes several interactive games designed to enhance the user experience:
- 🃏 F1 Card Memory: A classic game where the user must find matching pairs of Formula 1-related cards.
- 🚦 Reaction Traffic Light: A reflex test where the user must react to the changing lights of the traffic signal, simulating a race start.
- ❓ What Would You Rather?: A question game where the user chooses between different F1-related options.
- 🏎️ 3D F1 Car Viewer: A real-time visualization of a Formula 1 car, allowing users to explore its details through an interactive 3D model.
One of the fundamental pillars of the project was to ensure a seamless experience on any device. To achieve this, various responsive design techniques were applied, including media queries and adaptation strategies for different screen sizes.
F1Desktop has achieved a score of over 90% on Google Lighthouse, which guarantees efficient performance, reduced loading times, and an optimal user experience.
