This is a demonstration project using:
- https://ergast.com/ api
- Tailwind UI
- VueJS
- Cypress.io
| Version | Developer | Project link |
|---|---|---|
| v1.0 | Russ Forster | https://f1data.project.russforster.co.uk |
This is a VueJS website built using data sourced from https://ergast.com/ api. It is comprised of the following site structure:
- Home -- Hero banner with data coming from API -- List of the first 3 races with description coming from API -- List of all teams racing in season from API
- All drivers -- All drivers listed with information, in conjunction with filtering functionality to filter by which drivers finished a race with a particular status (dnf, engine failure etc) from APIs
- Specific drivers -- Formulated page from query parameter of driver, and information from subsequent API call to get season data of said driver
- Final championship standings -- List the top 3 final standings in "podium" order, and lists final table standings from API
- Race list -- Lists all races from the season with the information about each race (winner, fastest lap etc) from API
- Header -- This is made up of header title and links
- Next race strapline -- This contains the next {round}, of the {season} at the {location} on the {date}
- Error message -- This is a conditional block that will only display the error message passed into it from failing API's
- Footer -- This is made up of links
The deployed files are located within docs folder, so that github can host the site pages. A CNAME record has been applied to point to this github repo.
All built files for production get produced into the dist folder
This has been tested using Cypress, Lighthouse, and exploratory testing and all API calls are have error handling. It is WCAG 2.1 AA compliant and fully responsive.
- Clone the repo to your machine or visit https://f1data.project.russforster.co.uk to navigate around the website
- All uncompiled code is located in "src" folder
- There are various comments throughout the files for the purpose of demonstrating thought and approach particularly around error handling
- Component test scripts are located in cypress/components folder
npm install
npm run serve
npm run build
Note: If you are having problems running this command in your editor, try navigating to the folder in command prompt and running from there
npm run lint
npx cypress run-ct / npx cypress open-ct