Apex F1

The F1 Dashboard for the Tifosi, the Orange Army, and everyone in between.

Live Preview

Click here to see it live!

Introduction & Inspiration

Welcome to Apex F1. I built this project for one simple reason: I love Formula 1.

But let's be honest, I mostly built it because I am a huge Max Verstappen fan. MAX VERSTAPPEN TU TU TU DU MAX VERSTAPPEN

Every time I look at the standings, I want to see that #1 right at the top. So I created this dashboard to track the season, the drivers, and the teams in style. If you are a Hamilton fan, you are welcome too (but please don't look at the 2021 stats).

For the full experience, please play the Netherlands Anthem while browsing this repo.

The Project Explained

This is a modern, responsive Single Page Application (SPA) built to visualize Formula 1 data. It's not just a list of numbers; it's designed to look and feel like a premium F1 product.

Key Features

• Home Dashboard: Shows the countdown to the next race (so you never miss lights out) and the current championship leaders.
• Drivers Hub: A complete grid of all drivers for the current season. Click on a driver to see their detailed stats, points, and bio.
• Constructors (Teams): Detailed information about every team on the grid.
• Standings: Live updated driver and constructor standings.
• Circuits: Explore all the tracks on the calendar.
• Internationalization: Fully bilingual (English & French).

Tech Stack

• React 19: The core framework. I used functional components and hooks (useState, useEffect, useContext) throughout.
• Vite: The build tool. It's incredibly fast and makes development a breeze.
• React Router: For seamless navigation between pages without reloading.
• i18next: For handling translations. Because F1 is a global sport.
• CSS Modules / Vanilla CSS: Custom styling with a focus on a dark, neon-accented aesthetic (Glassmorphism).

Installation & Setup

Want to run this locally? Here is how you do it:

1. Clone the repo:

   git clone https://github.com/abdemeh/apex-f1.git
   cd apex-f1

2. Install dependencies:

   npm install

3. Start the engine (Run dev server):

   npm run dev

4. Open your browser and go to http://localhost:5173/apex-f1/.

API & Data Architecture

This is where the magic happens. I didn't just hardcode the data; I fetch it live from reliable sources.

1. Ergast API (via Jolpica)

The Ergast Developer API is the backbone of this app. I use it to fetch race schedules, standings, and driver details.

• Where: src/services/f1Api.js
• How: I created an axios instance to handle requests.

// src/services/f1Api.js
const BASE_URL = 'https://api.jolpi.ca/ergast/f1';

const f1Api = axios.create({
    baseURL: BASE_URL,
    headers: {
        'Content-Type': 'application/json',
    },
});

// Example: Fetching Drivers
export const getDrivers = async (year = '2024') => {
    const response = await f1Api.get(`/${year}/drivers.json`);
    return response.data.MRData.DriverTable.Drivers;
};

2. OpenF1 API

The Ergast API is great for numbers, but it lacks visuals. That's where OpenF1 comes in. I use this specifically to get high-quality driver headshots.

• Where: src/services/f1Api.js
• How: I implemented a caching mechanism to avoid rate limits.

// src/services/f1Api.js
// Cache for driver images
let driverImagesCache = null;

const fetchDriverImages = async () => {
    // Return cached images if available
    if (driverImagesCache) return driverImagesCache;

    const response = await axios.get('https://api.openf1.org/v1/drivers?session_key=latest');
    
    // Map driver acronyms to image URLs
    const imageMap = {};
    response.data.forEach(driver => {
        imageMap[driver.name_acronym] = driver.headshot_url;
    });

    driverImagesCache = imageMap;
    return imageMap;
};

3. Fallbacks

APIs can be flaky. If an image fails to load or isn't found, I have robust fallback mechanisms (using official F1 placeholders) so the UI never looks broken.

Design & Assets

• The Logo: Yes, the logo was generated by AI. I'm a developer, not a graphic designer!
• Fonts: I imported custom fonts (Formula1-Bold, Formula1-Regular) to match the official F1 broadcast typography.

Created By

Abdellatif EL-MAHDAOUI

• GitHub: abdemeh

Feel free to clone this, fork it, or just star it if you are a fellow F1 fan!