michaelriceio / f1-champs

A SPA built with React showing the F1 World Champions from 2005 to today.

F1 Champs!

F1 Champs is a SPA that shows the Formula One World Champions from 2005 to today. Clicking "view" on a row will take the user to a new page showing them all of the Grand Prix winners from that year, highlighing the years' World Champion. (I hope I'm using the correct terminology, I'm new to Formula One :))

Installing

• git clone https://github.com/micahelriceio/f1-champs.git
• cd f1-champs
• Using Yarn
  • yarn install
  • yarn start
• Using NPM
  • npm install
  • npm start

A browser window should open to localhost:3000

Building

To run production ready code make sure you're in the root directory then:

• Using Yarn
  • yarn build
  • yarn global add serve
• Using NPM
  • npm run build
  • npm -g i serve

Then type server -s build The site will be available for viewing at localhost:3000

Architecture

The site has a simple architecture. All code is in /src/ with Index.js being the entry point to the application. App.js is used to set the header and define the routes. All components are in /src/components. styled-components is used to style the site and all styles are kept in /src/components/styled.

Technologies Used

• React
• React Router
• Prop-Types
• Styled Components
• Polished
• Styled Normalize
• Axios

Dev Dependencies

ESLint is used to keep the code clean. A slightly modified version of Airbnb's eslint config is being used. The changes can be viewed in .eslintrc

• ESLint
• Airbnb Javascript Style Guide

IDE Used

VS Code - Version 1.24.0 (1.24.0)