aaronkeith / f1ormula

A dashboard that will allow users to view visual representations of F1 races and statistics

F1ormula

A dashboard that will allow users to view visual representations of F1 races and statistics.

Languages/Libraries

• HTML5
• CSS3
• Javascript(ES2015+)
• Express
• MongoDB
• RESTful API

Screen Capture

f1ormula's Issues

User can view a visual representation of qualifying data

Motivation
Create a visual representation of qualifying data and positions for a particular driver and constructor for a selected race
Implementation

• Create F1ormula repository
• Clone repository
• Create index.html, index.js, styles.css template files
• Install linters
• Create .package.json file
• Install MongoDB, express and body-parser dependencies
• Connect MongoClient
• listen on port 3000
• Link relevant files
• Link Bulma via CDN
• Source car and driver number images
• Edit and export car images including driver number in Photoshop
• Source API data
• View data in httpie
• Fetch request for relevant information
• Render driver specific data
• Create dropdown for specific rounds

User can display relevant race data via dropdown menu.

Motivation
Allow user to select relevant race data from a dropdown menu located at the top of the page.
Implementation

• Allow user to select from one of the 19 races included in the schedule
• Add click event to dropdown
• Source relevant race data from API
• Modify request on a race by race basis to comply with API JSON data
• Source track layout images
• Include:
  • First Grand Prix Date
  • Number of Laps
  • Circuit Length
  • Race Distance
  • Lap Record
  • Elevation
    

User can now view a carousel with a visual representation of each track

Motivation
Allow user to view carousel with visual representation of each track.

Implementation

• Source track images
• Use Photoshop the crop and size each image so that they are uniform
• Use Photoshop to inset F1 data logo
• Create uniform text bar on each image with track name
• Import images to public folder
• Implement HTML for the carousel and auto transition
• Implement CSS media queries and transitions for carousel

User can view the corresponding position results data for specific race

Motivation
Allow user to easily compare starting position versus finishing position.
Implementation

• Link and fetch race result position information.
• Fetch JOSN data that is relative to fields.
• Data varies based on drivers, need to account for variance in fetch protocol.
• Display visual finish representation for drivers
• Display relevant results data
• Start position
• Race Status
• Points
• Fastest Lap
• Lap Speed

User can view race circuit below dropdown menu

Motivation
Allow user to view tack layout, sectors, DRS zones and elevation
Implementation

• Source circuit images
• Edit circuit images in Photoshop
• Include elevation profile
• Include historical data (first race, lap record)
• Include number of laps
• Include circuit length
• Include race distance
• Create
  within the page to house the circuit images
• Style the circuit images in CSS