Back

F1 Web Experience

2023 | Interactive Map, Stats & News

Overview

Driven by a passion for motorsports, I created an interactive web platform that showcases historical Formula 1 data and race events in a visually engaging format. This project, undertaken independently, was both a learning experience in API integration and a practical application of JavaScript for dynamic content updates.

The website’s core feature is its integration with Mapbox, enabling users to explore F1 race data through an interactive, custom-designed globe. Each historical F1 event is represented by a marker on the globe, allowing users to click on specific races to view detailed results and related data. The data is dynamically fetched via a REST API from an extensive F1 historical data library, providing real-time updates and an immersive experience.



View on GitHub

Skills Used

  • HTML/CSS
  • Rest API Integration
  • JavaScript
  • Mapbox GL JS
  • UX Design

Highlights

Interactive Season Map

Explore F1 event locations over the years with an interactive Mapbox globe. Users can select a season, zoom into race locations, and view detailed results for each event.

Events dynamically update based on the selected season, allowing users to explore F1 race locations across different years via a slider.

Latest Motorsport News

Relevant news articles are fetched from a news API and presented in a dynamic grid layout, keeping users updated with the latest in motorsport.

Season Standings

Access historical F1 standings for top drivers and teams across all seasons, dating back to the inaugural year.