Giter Club home page Giter Club logo

formula-fun's Introduction

Formula Fun

Table of Contents

Introduction

For all the Formula One fans with favorite drivers who drive for different teams - now is your chance to make the team of your dreams and find out how they would perform! No longer do you have to pick one uniform to root for - the sky is the limit with this responsive, accessible React app. Pick from any of the drivers from the 2021 season, read through their overall career stats, and decide who you want to pair up to create the season winners.

Technologies

  • React
  • Router
  • Cypress
  • Javascript
  • JSX
  • Fetch API
  • CSS
  • HTML

Contributors

Illustrations

Demo

Deployed Page

Visit the deployed page to start building your F1 team!

Wins

  • Being able to implement a fully accessible, mouse-free navigatable, screen reader capable app that can truly be used by anyone.
  • Creating a beautifully responsive design that looks modern and inviting on every screen.
  • Providing seamless error handling that prevents most user errors before they even happen.
  • User tested to ensure quality before deployment.

Challenges & Improvements

  • API limit - this app was developed with a 100 request per day limit. In order to be as clean as possible, each call was strategically planned and created to be reusable, only fire when a user requests specific data, and allow page-to-page navigation without excessive or unnecessary fetches.
  • Error handling with an API that intercepts errors behind the scenes was a challenge. This API tackles the errors and sends them back in an array with a message for the developer. Translating this into something a user will understand and be able to navigate was challenging. Clone this repo and try a fetch with a bad parameter to see how I was able to successfully error handle for these responses!
  • Async Javascript - for this project, I learned and implemented asynchronous fetches to allow the page to present data promtly to the user.

Set Up

  1. Fork this repo
  2. Clone the repo to your local machine
  3. Run npm i, then npm run build, then npm start
  4. View the project in the browser by opening localhost:3000

Sources

Project Specs

  • The project spec & rubric can be found here.

formula-fun's People

Contributors

kanderson58 avatar

Watchers

avatar

formula-fun's Issues

Create Page Components

  • Race Page - for MVP, just a welcome/about page
  • Team Page - section with two class cards & team card
  • Drivers Page - list of all twenty drivers with fetch ability to open up single driver card

Error Handling

  • If the user has not selected two teammates, the driver box(es) are empty with a message asking the user to select their driver
  • If the user has not run a race yet, the standings are all at 0 and the drivers are alphabetized
  • User cannot submit no team name

Create Driver Component

  • Fetches data about single driver
  • Displays all available info and does not render if not available

Render Driver Details

  • Driver card will fetch driver data and pass it down to details
  • Details will organize and display it nicely

Render each Driver Card

  • Styled
      that has all twenty drivers and is a controlled form that stores which one the user has clicked on

Non-API Branch

  • Provide enough data to be useable once 100 request limit per day is hit

Syntax Check

  • Semicolons
  • Every piece of data is used
  • Indentation
  • Single quotes
  • Extraneous CSS

Both Drivers Chosen

  • Both driver cards show up in team spots
  • Team card shows up as soon as second driver is picked
  • Team name starts as "Unnamed", user can click on "edit" button and input pops up to name team
  • Behind the scenes: combine remaining single team members into one team
  • Constructor's rankings are shown, with your team's combined points as their ranking

Create Team Info Component

  • Contains two driver cards
  • All the info for the team
    • team name
    • rankings - will they be an 11th team? Or will the drivers be taken from their respective teams and the two teams left with a single driver get merged?
    • allow users to switch out drivers after all three races have been run

None/One Driver Chosen

  • User will see two empty boxes with an "add driver" message as the team cards if no drivers are chosen
  • User will see one filled, one empty with an "add driver" message if one is chosen
  • Team card is hidden until both slots are filled

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.