https://github.com/rembertdesigns/formula-1-driver-standings
🏎🏁 This GitHub repository features a Formula 1 Driver Standings application, showcasing my skills in web development and data visualization. Through this project, I aim to provide an interactive and dynamic way to track F1 standings. Dive into the code and explore how web technologies can bring sports data to life.
https://github.com/rembertdesigns/formula-1-driver-standings
dark-mode data-visualisation ergast-api f1 formula1 historical-data interactive javascipt mui portfolio-projects racing responsive-web-design scss-framework sports-analytics statistics theme-toggle vite web-application
Last synced: 8 months ago
JSON representation
🏎🏁 This GitHub repository features a Formula 1 Driver Standings application, showcasing my skills in web development and data visualization. Through this project, I aim to provide an interactive and dynamic way to track F1 standings. Dive into the code and explore how web technologies can bring sports data to life.
- Host: GitHub
- URL: https://github.com/rembertdesigns/formula-1-driver-standings
- Owner: rembertdesigns
- Created: 2022-07-28T21:32:01.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-09-22T23:12:22.000Z (8 months ago)
- Last Synced: 2025-09-23T01:07:27.812Z (8 months ago)
- Topics: dark-mode, data-visualisation, ergast-api, f1, formula1, historical-data, interactive, javascipt, mui, portfolio-projects, racing, responsive-web-design, scss-framework, sports-analytics, statistics, theme-toggle, vite, web-application
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏎️ 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
https://user-images.githubusercontent.com/105387636/181641722-278393f1-46c2-4450-8388-562f084a261b.mov
## 🧰 Installation & Setup
To run this project locally:
```bash
# 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
```bash
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*