F1 World Champions Web Application

About This App

F1 World Champions is a modern web application that showcases Formula 1 racing data throughout history. Users can explore different F1 seasons, view race details, and discover information about world champions and their achievements.

Backend Application

To run the backend app, please visit the repository [https://github.com/umairshahid436/f1-world-champions-api]

Working example

Technology Stack

Frontend Framework

• React with TypeScript for type-safe development
• Vite as the build tool for fast development and builds
• React Router for client-side routing and navigation
• Tailwind CSS for utility-first styling
• TanStack Query (React Query) for state management
• React i18next for multi-language support
• Vitest for unit and integration testing
• React Testing Library for component testing
• MSW (Mock Service Worker) for API mocking during tests

Development Tools

• ESLint for code quality
• Prettier for consistent code formatting
• Husky for Git hooks automation
• Conventional Commits for standardized commit messages
• Commitlint for commit message validation
• Pre-commit hooks for code quality checks
• Pre-push hooks for test validation

Project Directory Structure

src/
├── api-types/         # TypeScript types for API responses
├── assets/            # Static assets (images, icons, etc.)
├── components/        # Reusable UI components
│   ├── async-renderer/ # Handles loading/error states
│   └── ui/            # Basic UI components (buttons, inputs)
├── mocks/             # MSW mock handlers and test data
│   ├── handlers/      # API request handlers for testing
│   └── mock-data/     # Static mock data for tests
├── modules/           # Feature-based modules
│   ├── races/         # Race-related components and logic
│   └── seasons/       # Season-related components and logic
├── routes/            # Application routing configuration
├── services/          # API service layers and HTTP client
├── translations/      # i18n translation files
└── utils/             # Utility functions and helpers
    ├── constants/     # Application constants
    └── test/          # Test utilities and setup

Purpose of Key Directories:

• api-types: Contains TypeScript interfaces that match the backend API structure
• components: Shared components used across multiple features
• modules: Feature-specific code organized by domain (races, seasons)
• mocks: Testing infrastructure for API mocking
• services: Handles all external API communication
• utils: Common utilities, constants, and helper functions

Environment Setup

Required Environment Variables

Create a .env file in the root directory with these variables:

# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api

Environment Variables Explained:

• VITE_API_BASE_URL: The base URL for your backend API

Note: All environment variables for Vite must be prefixed with VITE_ to be accessible in the browser.

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm (comes with Node.js)

Installation Steps

1. Clone the repository

   git clone [https://github.com/umaireu/f1-world-champions-web]
   cd f1-world-champions-web

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env
   # Edit .env with your actual values

4. Start the development server

   npm start

5. Open your browser Navigate to http://localhost:5173

Note

To run this application locally, you'll need to set up the API. The API repository and setup instructions can be found at: [https://github.com/umaireu/f1-world-champions-api]

Available Scripts

# Development
npm start              # Start development server with hot reload
npm run build          # Create production build
npm run preview        # Preview production build locally

# Code Quality
npm run lint           # Check code with ESLint
npm run lint:fix       # Auto-fix ESLint issues
npm run format         # Format code with Prettier
npm run format:check   # Check if code is properly formatted

# Testing
npm run test           # Run tests in watch mode
npm run test:run       # Run all tests once
npm run test:coverage  # Run tests with coverage report
npm run test:ui        # Open Vitest testing interface

# Git Workflow
npm run commit         # Interactive conventional commit helper

Pipeline and Merge Request Process

Before any merge request can be approved and merged, all pipeline stages must be completed successfully:

Pipeline Stages

1. Install Dependencies

   • Install project dependencies

2. Linting

   • ESLint runs on all TypeScript/JavaScript files
   • Code must pass all linting rules
   • No TypeScript errors allowed

3. Testing

   • All existing tests must pass
   • Coverage threshold must be maintained (minimum 70%)
   • 

4. Security

   • Codeql configured to detect vulnerability

5. Build Verification

   • Application must build successfully
   • No build errors

6. Summary

   • Summary about pipeline

Common Issues and Solutions

Build errors after git pull:

# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install

Tests failing unexpectedly:

# Clear test cache
npm run test -- --clear-cache

TypeScript errors:

# Restart TypeScript service in your editor
# Or run type check manually
npx tsc --noEmit

Additional Screenshots

Highlight row (when winner is also that season’s champion) View

No data found View

Error View