---

swishlist is an app developed for basketball players to log and track their shooting progress during workouts. Designed for mobile devices, this app provides the user a tool where they can record the total shots attempted and made from various locations with the aid of an interactive basketball court map. The user can then review their workouts to help identify and target areas of the court where they need to focus on improving their shooting percentage.

Additional features of the app include:

• Player profile page with personal details and shooting statistics
• Leaderboard of top players in various categories
• Motivational quotes to reinforce work ethic and determination

Getting Started

To run swishlist locally, clone the project by running the following command in your terminal:

git clone [email protected]:BryanNilsen/Swishlist-React.git

Once you have the project cloned in your terminal, run:

npm install

This will install the libraries and other dependencies used by swishlist

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

npm start

Runs the app in the development mode. Open http://localhost:3000 to view swishlist in your browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Database

You must run JSON server in another instance of your terminal so you will have access to the data that swishlist is capturing. Navigate to the api directory and run the following command:

json-server -p 5002 -w swishlist.json

Resources

Adobe XD

I used Adobe XD from the very beginning of development to design the UI/UX aspect of this app. This tool allows developers to quickly build a prototype and provides a blueprint when building the app.

For more information, check out Adobe XD

Moment.js and react-moment

I used the Moment.js and npm react-moment tools for formatting dates in this app. These tools allow the user to parse, validate, manipulate, and display dates and times in JavaScript.

To use Moment.js and react-moment in your React app, use the following npm command in your terminal:

npm install --save moment react-moment

For more information, check out Moment.js and npm react-moment

Acknowledgments

Special thanks to everyone at NSS who took time away from their own projects to assist in the development of this app. You know who you are and are greatly appreciated.