dustatron / trail-blazer-mockup

Blazers Pre-Post-Game

A React build of the TailBlazers Pre, live, and Post game pages.

Created by, Alysia Petti, Alex Shreen, Dusty McCord. June, 2020

Work Log

• Started building out the following components. - Hero - NewsFeed - KeyPlayers

• Still need to find the correct API endpoint for KeyPlayer data.

• Created a reusable Header Bar component in /js/Shared/HeaderBarTemplate.js

  • pass title={'title you want'} and the component should render out a title bar.

Links to Designs

Pre-Game

Desktop

Mobile

Live Game

Desktop

Mobile

API Endpoints

Here is some reference code from the original code. This code block seems to be making the bulk of all the api calls.

Reference link to original code

Player data || API endpoint

endpoint lists https://github.com/seemethere/nba_py/wiki/stats.nba.com-Endpoint-Documentation

Note the ${gameId} at end of url

https://data.nba.com/data/v2015/json/mobile_teams/nba/2019/scores/gamedetail/${GameId}_gamedetail.json

this is a working test url for postman

https://data.nba.com/data/v2015/json/mobile_teams/nba/2019/scores/gamedetail/0011900023_gamedetail.json

News Feed TrailBlazers API

This is an example of what this api returns. Example Json Data

https://www.nba.com/blazers/api/1.1/json

News Feed API with video

https://www.nba.com/blazers/api/1.1/json/?type=video&channels=highlights

API Link for Schedule

https://data.nba.com/data/v2015/json/mobile_teams/nba/2019/teams/trail_blazers_schedule_02.json

API for game recap

https://api.nba.net/2/blazers/article/?games=0011900023&freeform=recap

must use this header to use this api call

headers: {
  "AccessToken": "internal|bb88df6b4c2244e78822812cecf1ee1b"
  },

Ticket Price

https://buyblazertickets.com/includes/jsonp.php?callback=?

Useful Links

Get logo

town should be three letter

https://www.nba.com/.element/img/1.0/teamsites/logos/teamlogos_80x64/${town}.gif

Higher quality

https://nba.com/blazers/sites/blazers/files/${visitorTeam.tn.toLowerCase()}.png

Get full body image

player.id is a string of numbers

https://ak-static.cms.nba.com/wp-content/uploads/silos/nba/latest/440x700/${player.id}.png

Get head shot

player.id is a string of numbers

http://ak-static.cms.nba.com/wp-content/uploads/headshots/nba/latest/1040x760/${player.id}.png

Installation instructions

This project was bootstrapped with Create React App.

• Clone the repo wil

  git clone <Link to repo>

• Navigate to your new directory by typing:

  cd pre-post-game

• Run npm install to get all needed modules

  npm install

• Run production server with the following command:

  npm run start

Folder Structure

Below is an overview of each folder/file's purpose and recommended management style of new implementations:

/PRE-POST-GAME/
|
|-- /node_modules/
|-- /documentation
|
|-- /public/
|   |-- index.html
|   |-- manifest.json
|   |-- robots.txt
|
|-- /src/                               # Source files
|   |-- /css/
|       |-- App.css
|       |-- index.css
|   |-- /media/
|   |-- /js/
|       |-- /components/                # Where all .js/.jsx components will live
|       		|-- /Shared/                # components that will live in many places.
|       			|-- headerBarTemplate.js  # Header Bar that is used between every component.
|       		|-- /PreGame/               # Components specific to PreGame
|       			|-- /ArenaInfo/
|								|-- index.js
|       			|-- /CTA/
|								|-- index.js
|       			|-- /Footer/
|								|-- index.js
|       			|-- /Hero/
|								|-- index.js
|       			|-- /KeyPlayers/
|								|-- index.js
|								|-- player.js						# Player details to be listed out.
|								|-- tempData.js					# Stand in data for mockup
|       			|-- /NewsFeed/
|								|-- index.js
|								|-- NewItem.js					# Single news item to be listed out.
|       			|-- /UpcomingGames/
|								|-- index.js
|       |-- App.js
|       |-- App.test.js
|       |-- serviceWorker.js
|       |-- setupTests.js
|       |-- simpleLinks.js							# For Development. links to other component views
|   |-- /scss/
|				|-- /abstracts/
|           |-- _mixins.scss            # Storing responsive styling
|           |-- _variables.scss         # Brand colors
|				|-- /base/
|           |-- _cssReset.scss          # Zero out defaults
|           |-- _base.scss              # Base styles for site
|           |-- _alert-message.scss     # Styling for alert error messages
|				|-- /components/
|           |-- _app.scss          			# Styles for app component
|           |-- _header-bar-template.scss
|           |-- _key-players.scss
|           |-- _news-feed.scss
|           |-- _pre-game-index.scss
|				|-- main.scss										# Imports _mixins, _variables, _cssReset, _base, _alert-message
|   |-- index.partial.html              # HTML used for the .append() in script.js
|   |-- index.template.html
|
|   .gitignore
|   package-lock.json                   # Handled by .gitignore
|   package.json
|   README.md
|   yarn.lock