F1App is a web application built with React that provides information about the current Formula 1 season. It allows users to view the race schedule, countdown to upcoming races, and see key race results.
- Displays a list of races for the current Formula 1 season
- Shows race information including name, location, and date
- Provides a countdown timer for upcoming races
- Allows users to click on a race to view detailed information
- Fetches race results for finished races and displays the winner and other key information
- Automatically scrolls to the next upcoming race on initial load
- Restores scroll position when navigating back from race details
- React: JavaScript library for building user interfaces
- Axios: Promise-based HTTP client for making API requests
- date-fns: Library for manipulating and formatting dates
- Ergast API: API providing Formula 1 data
To run the F1App locally on your machine, follow these steps:
-
Clone the repository:
git clone https://github.com/synjan/f1app.git
-
Navigate to the project directory:
cd f1app
-
Install the dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and visit
http://localhost:3000
to see the app running.
The project structure is as follows:
f1app/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── RaceCard.js
│ │ ├── RaceCard.css
│ │ ├── RaceDetail.js
│ │ └── RaceDetail.css
│ ├── App.js
│ ├── App.css
│ └── index.js
├── .gitignore
├── package.json
└── README.md
public/
: Contains the public assets and the HTML template.src/
: Contains the source code of the application.components/
: Contains reusable components used in the app.RaceCard.js
: Component for displaying a race card with basic information.RaceCard.css
: Styles for theRaceCard
component.RaceDetail.js
: Component for displaying detailed information about a race.RaceDetail.css
: Styles for theRaceDetail
component.
App.js
: The main component that fetches data and renders the race list and details.App.css
: Styles for theApp
component.index.js
: The entry point of the application.
.gitignore
: Specifies files and directories to be ignored by Git.package.json
: Contains project metadata and dependencies.README.md
: Provides information and instructions about the project.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License.