jbkuczma / nbareact

🏀 iOS and Android NBA app created with React Native

Swish

An iOS and Android NBA app created with React Native. If you would like to request a feature, find a bug, have a question, or would like to leave feedback, open an issue! ⭐️ this repo to show support!

Download

• iOS - Download here!
• Android - Coming soon!

Features

• Scores and stats for in-progress and completed games
• Detailed play by play
• Full team stats for a season
• Full player stats for a season and over their career
• Detailed player game stat graphs
• Conference rankings
• League leaders
• Videos and highlights (coming soon)
• Compare two players (coming soon)

Libraries Used

React Native

React Navigation

Redux

Redux Thunk

React-Native-SVG-Charts

React-Native-Modal-Dropdown

nba.js (custom and modified implementation to work with React Native)

Resources Used

Set Splash Screen iOS

Test your React Native App on your iPhone

How to Submit to the App Store

Getting Started

• Fork (optional) and clone repo

  git clone https://github.com/jbkuczma/NBAreact.git && cd NBAreact
  

• Install and link dependencies

  npm install
  
  npm link
  

• Run

  npm run start:ios
  
  npm run start:iphoneX
  
  npm run start:android (an emulator must be running first)
  

nbareact's Issues

Refractor PlayerScreen

The PlayerScreen can now be reached 3 different ways:

• From the roster
• From the league leaders
• From the player search

PlayerScreen is currently written for data returned from the roster API call, but LeagueLeaders and PlayerSearch API calls return different properties.

Property	Roster	Player Search	League Leader
Player ID	player_id	personId	player_id
Name	player	firstName & lastName	player
Height	height	heightFeet & heightInches
Weight	weight	weightPounds
Years Experience	exp	yearsPro
School	school	collegeName
Number	num	jersey

Based on this, if we are navigating from a league leader item to the player screen, the player will have to be looked up from PlayersInLeague array from the Redux Store and that value will be used.

tl;dr Refractor PlayerScreen to use data for a player found in the PlayersInLeague array

Score doesn't update

Score doesn't seem to update despite data changing from callback. S C A R Y.

Make a <Loader /> component

Many of the screen contain a of loader implementation that is the same across the components. This should be made into its own component for ease of maintenance.

App name

If I do decide to publish v2.0 I'm thinking the app name should be different; the repo will still be named NBAreact.

Current ideas:

• Swish
• Hoops

Team Stats Page

When a user clicks on the team logo from GameStatsTeam page, they will be taken to that team's own page. Possible ideas on what to include are season record, stat rankings, roster, player stats; will look into.

Add videos

Add a new tab that is strictly for videos. Could see if there is an API endpoint the NBA uses or scrape videos from /r/nba

ios error

Bundling index.ios.js
Transforming modules ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.0% (391/393)...(node:11817) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 668): UnableToResolveError: Unable to resolve module ./App/Assets/Images/back_button_white.png from /Users/open/NodeProjects/react-projects/NBAreact/App/NBAreact.js: Directory /Users/open/NodeProjects/react-projects/NBAreact/App/App/Assets/Images/back_button_white.png doesn't exist

Add shot chart

In the individual player page, look into adding a shot chart for the player.

Set up live reload with Webpack

Want to set up live reload and hot reloading for webpack with React

Individual player page does not load with historical data

When the date is set to a date for a past season, the following happen:

• Indivdual player page doesn't load
• Player image does not render for the player cell

Why?
There is no player_id returned from the endpoints.

Add nugget for game (see description)

Each game has a property called "nugget" which seems to be a highlight statement (ex: "Wizards pull even with Pacers for No. 4 seed", "Harden: 32 points, 11 rebounds"). Think about adding this to either the game cell or the game detail page.

Career stats for player screen

The player's screen currently only shows game stats for the current season. A great enhancement to this screen would be the option to show a player's career stats.

Android

If Android versions plans to be published it needs visual improvements. iOS seems fine.

Passing current date

The date in the header can be changed properly along with its corresponding text. I need to pass whatever the new date is to ScoresPage.js in order for the games to be displayed for that date.

Add dividing lines for scoreboard

On the gameStatsTeamDev branch, look into adding dividing lines between headers, teams, and scores. May have to wrap each text component in its own view

Preview/Recap article

There is an endpoint for a preview (if the game hasn't started) and recap (if the game is finished) article for a provided game. A fourth tab could be added to the game detail screen and render the appropriate article.

Add shadow to image

Since some of the team logos are all white and transparent, they can be difficult to see on the chosen background color. Look into adding a small shadow for better viewing.

Boxscore not appearing

Sometimes when navigating to the boxscore tab, the list doesn't appear until any scrolling begins

Integrate Redux, v2.0 rewrite

Will try to implement Redux throughout the app

Missing data

If a callback fails to produce data, address the problem. See below for example:

Initial launch screen

Something cool to have would be have a splash screen animation like how twitter launches on iOS

App Icon

At some point I'm going to need to design and create an app icon.

Button to control date and season

Let the user choose a date and have that be applied to the scores page.

Scores / Standings tabs are at the top

Possible bug? Would prefer the tabs to be on the bottom

No games are being played

If no games are being played, then the user is presented with a blank home screen. Maybe think about adding an image just so it isn't blank?

Info cut off

Smaller screen size leads to stats being cut off.

Add a timeout for the team page with players

Right now it is just an infinite loop of the loader image.

Web version

To show this app to a user without them downloading, I could try and make a web version with ReactJS.

To Do

• Create new WebApp folder
• Create main page
  • Style main page
• Render games being played for given date
  • Have date reflect number of games being played
  • Render game rows
  • Render game data for each cell
  • Style game cells
• Render team stats for a selected game
  • Set up modal to overlay current screen with selected game stats
    • Style modal
    • Fill modal with the data
• Render league standings

Detailed player game log

Right now in the player page, a list of their games is displayed along with points, rebounds, and assists for the game. Clicking on a game from the player page should go to a new page that displays more stats from that game.

Vertical align responsive images

Having trouble making the images stay vertically aligned with the text below them while using Bootstrap's responsive image class.

Image shadows

The current way of having a shadow behind an image only seems to work with iOS and not Android.

Virtual buttons

Some android devices have virtual nav buttons and this can cause the the last playercell in a listview to not be displayed fully.

Calendar icon isn't fully displayed

Q&A: Why were the images taken out?

As much as I loved having the team logos and player images in Swish, they had to be removed for release on the App Store. There is a branch (swish_with_images) that contains Swish before the images were taken out.

As the development of Swish continues, I will try to update that branch as well with features that make it to master so the full app could still live on.

In the future if I can acquire rights to use the actual team logos or some custom made alternative version, then I will add them back in.

Tab bar icons

Will need tab bar icons for:

• Scores (scoreboard)
• Standings (trophy)

Add loading screen or indicator for standings page

So the user isn't staring at a blank screen waiting for the data to load, add a loading indicator of some sort.

Invalid dat

Only comes up when running iOS simulator through Xcode.

Have season change depending on date

There will probably be a global season variable to start but when the date is switched, the season will change depending on month and year.

Standings page buttons

The buttons are not the proper colors

Change header color for Team Page

Basically I want the green to be the team color instead.

Introduce secondary team colors

If the primary team colors are very similar (see Houston and Toronto), the graphs can be very difficult to read

Stat bars do not line up properly

Add league leaders

New tab, displays league leaders in various categories

Filter out duplicate plays

Notice this happens at the end of the 4th quarter (first might represent end of quarter and the second might represent end of game).

Add conference buttons for standings tab

buttons will allow either conference's standings to be shown.

Change splash screen

As of now the splash screen is still the default one that comes bundled with React Native. I think this only pertains to iOS.

Add game info on press

When one of the game cells are pressed on the scores page, provide more details. Ideas: points scored by quarter, team stats, maybe player stats. We'll see what direction this idea takes.

Refresh game list capabilities

The games list should only be able to be refreshed if the date used to look up games in the app is today's app. The reason for this is data won't change when a game has finished or has yet to begin, and can help save data for users.

Improve readme

Manually season for league standings and stats pages

For now, at the beginning of every season, the year variable will have to be physically changed. Will look into