🏎️ Formula 1 Driver Standings

📌 Overview

An interactive web application that displays Formula 1 driver standings across multiple seasons (2010-2025). Built with modern web technologies, this project showcases comprehensive historical F1 data, responsive design, and interactive features including dark mode and season selection.

🛠️ Technologies Used

• Vite: Modern build tool and development server
• Vanilla JavaScript: Clean, performant frontend logic
• SCSS: Advanced CSS preprocessing with custom design system
• Historical F1 Data: Comprehensive standings from 2010-2025

🚀 Features

• Multi-Season Data: Browse F1 standings from 2010 to current (2025)
• Interactive Season Selector: Dropdown to switch between any available season
• Dark/Light Theme Toggle: Modern theme switching with smooth transitions
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Winner Highlights: Special cards for championship winners in completed seasons
• Real Historical Data: Accurate points, wins, and team information
• Touch/Swipe Support: Mobile-friendly drawer navigation
• Loading States: Smooth animations and user feedback

📸 Demo

Screen.Recording.2022-07-28.at.5.34.19.PM.mov

🧰 Installation & Setup

To run this project locally:

# 1. Clone the repository
git clone https://github.com/rembertdesigns/Formula-1-Driver-Standings.git

# 2. Navigate into the project directory
cd Formula-1-Driver-Standings

# 3. Install dependencies
npm install

# 4. Start the development server
npm run dev

💡 Note: Make sure you have Node.js (>=16.0.0) and npm installed before starting.

Available Scripts

npm run dev      # Start development server (port 3000)
npm run build    # Build for production
npm run preview  # Preview production build

📊 Data Coverage

Historical Seasons (Complete)

• 2010-2024: Full championship results with final points and win counts
• Includes legendary battles like 2021 (Verstappen vs Hamilton) and 2010 (4-way title fight)

Current Season (2025)

• Live standings with race-by-race updates
• Real-time points tracking and win statistics

🎨 Design System

The app features a custom design system with:

• CSS Custom Properties: Dynamic theming support
• Component-Based SCSS: Modular, maintainable stylesheets
• Responsive Typography: Fluid scaling across devices
• Color-Coded Rankings: Visual hierarchy for podium positions
• Smooth Animations: Enhanced user experience with transitions

📈 Project Highlights

• ⚙️ Modern Tooling: Vite for lightning-fast development and optimized builds
• 📱 Mobile-First: Touch gestures, swipe navigation, and responsive layouts
• 🎨 Custom Design System: Scalable SCSS architecture with CSS custom properties
• 📊 Rich Data Visualization: Color-coded standings with podium highlighting
• 🌙 Theme Support: Dynamic dark/light mode with user preference persistence
• 🏆 Championship Focus: Special winner cards for completed seasons

🚧 Coming Soon

Phase 1: Enhanced Data

• Constructor/Team standings alongside driver standings
• Race-by-race breakdowns for each season
• Qualifying results and grid positions
• Fastest lap and pole position statistics

Phase 2: API Integration

• Live data from Ergast Developer API for real-time updates
• Automated weekly updates during race weekends
• Historical race results and detailed telemetry

Phase 3: Advanced Features

• Driver comparison tools and head-to-head statistics
• Interactive season timeline and race calendar
• Performance charts and trend analysis
• Social sharing of favorite seasons/drivers

Phase 4: User Experience

• Driver and team detail pages with career statistics
• Search and filter functionality
• Favorite drivers/seasons bookmarking
• PWA support for offline access

🤝 Contributing

Contributions are welcome! Whether you're interested in:

• Adding new data sources or seasons
• Improving the responsive design
• Implementing new features from the roadmap
• Fixing bugs or optimizing performance

How to contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - feel free to use, modify, and build upon it!

🏁 F1 API Integration

This app is designed to work with the Ergast Developer API for live data integration. The current version uses comprehensive historical data, but the architecture supports easy API integration for real-time updates.

Technical Implementation:

• Modular data fetching with fallback to historical data
• Async/await patterns for API calls
• Error handling and loading states
• Caching strategies for optimal performance

🌎 Let's Connect

Ready for your next F1 data project or web development collaboration?

• 🐦 Twitter/X → @RichardDRembert
• 💼 LinkedIn → linkedin.com/in/rrembert

I'm available for freelance projects, contract roles, and full-time opportunities in web development, data visualization, and sports analytics.

---

Built with ❤️ for Formula 1 fans and data enthusiasts