This Formula 1 Dashboard SPA shows you the the latest statistics about:
- Driver standings
- Drivers
- Race schedule
The upcoming Formula 1 season (2017) is right around the corner. To give race fanatics and Max Verstappen fans insight in the upcoming season is why I build this app. Through the menu you can navigate to the different sections with every page showing different statistics. You can even sort race drivers by name.
When a race fanatic comes home from work with no internet connection (for example; by train) I want them to look at the upcoming race schedule so they can get ready for the upcoming race.
express
: Web application framework used for basic routingrequest:
To make http callsejs
: Client side templating engineergast developer api
: Formula 1 API (returns .json)
To run this project locally:
- Clone the repo to your computer and
change directory
into the folder.
$ git clone https://github.com/nickrttn/performance-matters && cd minor-pm
- Install the dependencies
$ npm install
- Start the server
$ npm start
You should see the following message:
The server is running on: http://localhost:1337
- Expose the server
$ npm run expose
You can than run it trough pagespeed with the url provided by ngrok.
- For environment variables you'll need to create a
.env
file in theroot directory
. Put the following variables into the file:
API_URL_DRIVERSTANDINGS=http://ergast.com/api/f1/2016/driverStandings.json
API_URL_RACEDRIVERS=http://ergast.com/api/f1/2016/drivers.json
API_URL_RACESCHEDULE=http://ergast.com/api/f1/2017.json
🎉 Great success!
- I've compressed most images using
sketch image compressor
and used inline svg with the data uri. - With
npm compression
I enabled Gzip compression. - With
browserify
andUglifyJS
I've bundled and minified the JavaScript file. - Used
cleanCSS
to minify the CSS.
- Implement service worker
- For commit messages: GitMoji is used.
- Follows Necolas' Idiomatic-CSS principles Idiomatic CSS
Please refer to SemVer to read more about versioning.
- Tutus Wormer @wooorm to have a shoulder to cry on.
- Joost Faber @joostf for mental support.
- My parents for cooking dinner everytime I came home after a long day of work.
Licensed under MIT
© Danny de Vries | 2017