Ac-Srikanth / f1_standings_app

App that displays Formula 1 information.

Formula 1 Standings App

Summary

App online here: https://ccasci-formula1-app.netlify.com/

Formula 1 Standings app made for study purposes regardings API calls, server creation, render information on screen and to have fun.

This app was made for study purposes only and does not intend to have commercial value.

I do not own or intend to own any of the information or images displayed here. They are probably FIA copyrighted.

Features

Check any circuit year (2020 was cancelled due COVID19, so it will not appear until season starts) for Formula 1 Standings, drivers and races details.

---

Constructors:
✅ Check position. ✅ Check # of wins. ✅ Check Total Points. ✅ Link to company Wikipedia Page.

---

Drivers:
✅ Show current constructor. ✅ Check position. ✅ Check # of wins. ✅ Check Total Points. ✅ Link to personal Wikipedia Page.

---

Schedule:
✅ Check Circuits order. ✅ Check Date and Time (if available). ✅ Show Pole Position. ✅ Show Race Winner. ✅ Show Country. ✅ Link to specific race Wikipedia Page for more details.

---

Twitter: :white_check_mark: Check last news.

---

Mobile ready :white_check_mark: Used react-responsive package: https://www.npmjs.com/package/react-responsive

---

Component Logic

Used Material-UI for components: https://material-ui.com/

Structure:

|- TopMenu
|-- Personal Info
|-- Year Selector
|-- Twitter Area
|--- Twitter Commands
|--- Extra Information
|- Standings Area
|-- Constructor Standings
|-- Driver Standings
|-- Schedule Table

Api Calls

F1 WorkFlow:

• All files on f1_data_calls folder
• Using axios to get JSON raw information from https://ergast.com/mrd/ API
• Filter and manipulate raw information
• Moment.js to handle date when necessary: https://momentjs.com/
• Serve info to react components

Twitter:

• Used react-twitter-embed package: https://www.npmjs.com/package/react-twitter-embed

Images

• For further studies, created a simple personal server to serve drivers and constructors images with Node and Express. Code on this repository: https://github.com/carloscasciano/f1_assets_server.

• Flags images are served from www.countryflags.io and receives a small treatment to get proper countries names and codes

Online

• Used Netlify to add app to online production.

Tools

• VSCode
• Node
• React
• ESLint