This beginner project is a single-page Angular application that fetches and displays Formula 1 data using the OpenF1 API. The dashboard showcases driver information, race results, and other race-related data in a clean, responsive interface.
📷 Screenshots (click here to views screenshots folder)
Results Page:
- Angular v20.3
- TypeScript
- HTML & CSS
- OpenF1 API
The purpose of this project is to apply what I've been learning about Angular development. The goals include:
- Practicing Angular fundamentals (e.g. components, services, directives).
- Building an application with multiple pages using routing and navigation buttons.
- Exploring styling with CSS.
- Integrating real-world data via REST APIs.
[ 🟢 = Completed | 🟡 = Partially Completed/In Progress | 🔴 = Not Completed ]
- 🟢 Multiple pages accessible via Angular routing.
- 🟢 Navigation bar for switching between views.
- 🔴 Home Page: Overview of application.
- 🟡 Standings Page: Table showing driver standings for specified season.
- 🟡 Results Page: Table showing results for each race in a selected season (positions, total points, point gain, etc).
- 🔴 Caching functionality for retrieved data from API.
- Improve performance/efficiency by caching retrieved data.
- Fix issue with repeated duplicate API requests.
- Fully integrate data into Standings table.
- Include Sprint race results.
- Create individual pages for each track/driver.
- Ensure Node.js is installed.
- Clone the repository:
> git clone https://github.com/RafaelGoodman/f1-dashboard-angular.git > cd f1-dashboard-angular
- Install dependencies:
> npm install - Run the development server:
> ng serve - Open your browser at:
http://localhost:4200
NOTE: During active F1 sessions, OpenF1 API access is restricted, so the site won't function as intended.
NOTE: In order to not exceed the API request limit, I have artificially delayed the loading of certain components. It may take a while for pages to load, so please be patient 🙂.