aoaoberlin/basketbao

BASKETBAO

About the project

One-week full-stack React project just for fun. An exercise on mobile-friendly SPA (single-page applications) using React Hooks, Bootstrap, external API calls, backend routing and database calls. It was fun to make it. And the data is super didactic too! 🏀

(back to top)

Built with

• React.js
• Express.js
• MongoDB
• Node.js
• Bootstrap
• balldontlie API
• axios
• Heroku

(back to top)

Installation

1. Clone the repo

   git clone https://github.com/aoaoberlin/basketbao.git

2. You'll need to set up the environment variables: a .env file is needed in the root folder (to set up MONGODB_URI), and .env.development and .env.production are needed inside the frontend folder to set up REACT_APP_API_URL (for development you might want to use http://localhost:5005/api; for production it might be something like https://yourapp.herokuapp.com/api)

3. You'll also need to set up a database and to feed it with data. We downloaded multiple data files from balldontlie API, then merged them into one big file and seeded our own database to prevent calling the external API again (as the data won't change in the near future and also because we needed more data than the restricted amounts that balldontlie would provide us per hour). After creating and seeding your DB, make sure to update your .env file as described above.

4. Run the following commands to install the NPM packages for both backend and frontend:

   npm install
   cd frontend
   npm install

5. To run the app, run

   npm run dev

(back to top)

Using the app

1. The app is pretty straightforward. We collected statistics from all NBA seasons (1979-2021) and separated them into six categories: points, assists, rebounds, steals, blocks and three-pointers made. We focused on single-season statistics; for instance, we can compare how the same player performed on different seasons.

2. For performance reasons, we trimmed the data: for each category, only the 500 first results will be fetched from the database. Also, we weeded out any data from players with less than 25 matches on a specific season.

3. Each category is displayed on a separate table. The tables are automatically sorted by their statistics, so the Points table will be sorted (descending) by points. You can also click on Player, Season and Games to sort each table by any of its columns, either descending or ascending. Remember, there will be 500 data points on each table, so the pagination will go from page 1 to page 50 on each table.

4. It's possible to sort by players or seasons. Searching by Michael Jordan will return only his statistics. If he never made it to the top 500 in any of the categories, he won't show up, as is the case in Rebounds, Blocks and Three-Pointers Made. But he's surely there on the Points table! You can also search by year or decade: 1986 or 198 (for 1980-1989) will give you your specific data.