Skip to content

JPierce28/hooper-hobby

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vinyl Viewer

Abstract

In this project I was tasked to create a react application. The API that I pulled from was here, once I got an API key I tested the API with postman to verify the information was what I needed. I then planned out an HTML wireframe and component structure. The goal was to creat and application that allows a user to browse NBA teams, look at thier rosters, and save indiviual basketball cards. Another use of this application would be to check the rosters on each team. A user can filter the teams by west or east confrence and the page will only display the appropriate teams. Once a card has been saved you can view that card in the "My Cards" section where you can also delete a card from your own saved collection.

Project Goals and Objectives

The goals of this project were to showcase what I have learned in school and what I am capable of creating. Using the technologies I've learned to this point my objectives were to create a project that combines my joy of software and basketball. A full project spec can be found here

Wins & Challenges

  • A challenge I faced was implementing react-routerv6. I was new to versoin 6 and since I was also new to react hooks, I had to learn how to implement routes and parameters so that I can create and use info in the url path.
  • Another challenge came in the cypress testing portion of the project. Using intercepts and stubbing information so that I did not fetch information everytime I tested my user interface.

Contributors

Preview

ezgif com-gif-maker (3)

Tech Used

  • React
  • React Router
  • HTML
  • CSS
  • Cypress
  • RESTful API
  • Postman

Project Install

  • Clone this repo to your machine.
  • In the root directory of the project, run npm install on the command line.
  • To start the server, run npm start.
  • To run the test suite, run npm run cypress on the command line, and select e2e in Google Chrome when prompted by Cypress.