• HTML/Styling
  • We styled our app using Bulma.io. With Bulma we all the css were written for us already and we can simply change the class name according to their documentation to have the desired visual effect. An example is we used a bulma template to style our login page, the code can be found here
• Redux
We store primarily the user state in the Redux store, which powers most of our website (twitter feed, discussion board etc...) We also use redux thunk to make calls to our back-end API, the information from which is stored in our Redux store (such as team stats, player stats, etc)
• API
We use an API to gather player and team stats, as well as handle all user login features. You will find our API in a separate repo: https://github.com/Tonychen0227/CPSC436api
• MongoDB
We have 4 collection in our mongoDB: user, team, player, and discussion. All self explanatory: the first saves user email, hashed password, JWT token, base64 profile picture, and other information, the second saves all team stats, the third saves all player stats, and the fourth saves all discussion board material.
• Deployment
We deployed our app on Heroku with the Papertrail add-on to aid debugging. Same applies to our API project found here: cpsc436basketballapi.herokuapp.com. Our main app is found here: cpsc436basketball.herokuapp.com

Basic Contribution Requirements

I took charge of building an API for our project found here: https://github.com/Tonychen0227/CPSC436api The primary technologies I took charge in were Meteor (most of the setup and adding required middleware) and MongoDB, where I built most of our database operations such as user login/logout as well as discussion.

Implemented Stats/Plays, Stats/Teams and Stats/Analysis using Recharts and BizCharts for data visualization Used axio to make call to our backend to retrieve teams and players data Implemented several data filter for users to select and filter data under Stats page

Styled the app using Bulma.io. Implemented the Navbar and dropdown list for stats page. Implemented the news carousel component and integrated NBA twitter App and team twitter App into our website. Implemented backend calls to retrieve players and teams statistics from our database.

Functionality

This project solves the problem of the lack of a overall hub for NBA fans that includes news, discussion, and stat analysis not found on the official stats nba website. To solve this problem, we added the following integrations all into one web application: Stats analysis and comparisons (which is actually not possible on the official NBA stats page), Discussion board which is user customizable, The ability to select a favorite team and have the UX be affected based on what team is selected, official twitter accounts, and news.

Challenges

• User Login was faced with several challenges. Facebook SDK is hard to work with, and there were some weird requirements there such as the need for a privacy policy. Halfway through implementation we kind of got screwed over due to Facebook SDK deprecating http support, so we had to migrate. Also a lot of user testing was required with that aspect, and there were some challenges faced there. I think our user login reached a good spot and none of the problems were impossible to deal with, given enough effort was spent to resolve them.
• Styling was one of our challenges. We were focusing to much on implementing the functionality of our app; when we have made the skeleton of our web it was too hard for us to write the css file due to the complexity and the number of components in our app. We tried writing css with Sketch and Zeplin using drawn structure but different components wouldn't work well with each others. We have to adapt another method to do the styling. We found Bulma.io. It took us around 2 days to read through and understand the documentation and it was fairly easy to use. This tool has greatly decreased our development time. In order to solve styling conflict and difference in opinion. We decided to have one developer styling the entire app

Above and beyond?

• Built the discussion board from scratch, using JWT token for login persistance, requiring email authentication, and allowing a user to log in via Facebook I think were all aspects that go above and beyond the basic requirements of a typical user login system. Additionally added profile picture support, which I think very few other teams were able to implement.
• We added media integration in our app. Our initial blueprint for the app is to be a statistic focused app where the sole purpose is for NBA stats enthusiasts to find and play with the data they want. Then we decided we want to make our app as an information hub for NBA fans. We have found API that provided news from ESPN and successfully retrieved the data using HTTP request and stored the news articles in redux state. We also integrated twitter into our app. We decided to map each twitter integration to each user given their favorite team. These features really took the advantage of redux state and made our app more tailored to user's preferences
• On the stats page, we implemented team and player comparisons: something that is unavailable on the official NBA stats website. This is one of our main standout features of our application.