An app to present a list of F1 world champions starting from 2005 until now.
- An app request list of F1 winners from 2005 until 2023
- Clicking on an item shows the list of the winners for every race for the selected year
- Row where the winner that been the world champion in the same season should be highlighted (if winner of the round is the champion of the season)
- UI should be clear to fit best result
- Sticking to the single page application is mandatory
- App should be delivered to GitHub and be shared for viewing by multiple people
https://www.leanportal.nl/ used as a reference for UI/UX implementation
http://ergast.com/mrd/ used to get documentation over Ergast Developer API https://flowbite.com/docs/components/accordion/ used as a base for UI components
- Clean,reusable code
- Frontend best practices
- Cache when using API
- React hooks
- No backend
This project was bootstrapped with Create React App.
- React - render engine
- React-router - pages routing util
- Tailwind - styling utility
- Zustand - app state manager
- Jest, RTL - testing libraries
- Serve - local development server to verify production build
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
If you want Jest to update test snapshots after test has changed you can use:
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Deploy your prod. version of the app to local server, so you can test it before to deploy to your cloud provider.
Build and Deploy your prod. version of the app to local server. This is combined npm run build and npm run serve commands.
Everything works? Great! You know how to contact me ;)