kw23085/hoopr

Hoopr lets you create your own basketball player profile and search for tournaments and games to join.

Hoopr

--

Brief Description

Hoopr lets you create your own basketball player profile and search for tournaments and games to join.

MVP: Basic CRUD app for Hoopr with React as the front-end framework.

Dream Feature: User will be able to form teams with other user and join tournaments and games.

-- ###Explanation of Technologies Used

Backend:

• Node.js
• Packages: Express, Mongoose, Bcrypt, body-parser, connect-flash, MongoDB, dotenv, morgan, react-router-dom, axios, jwt-decode

Front-End:

• React.js
• JavaScript
• HTML
• jQuery
• Bootstrap

--

Planning Docs

Screenshot of Wireframe

Screenshot of ERD

--

--

###Approach Taken

1. Planning Phase

After understanding the project requirements I immediately started to create my ERD and Wireframe to get a better understanding of the scope of my app.

Trello board:

https://trello.com/b/kRMfQkJX/project-4

2. Set up the back-end and have the flow of data ready for front-end

I started by creating my server to make sure the app is able to create Users and Games.

3. Work with front-end

After setting up the back-end I moved to the front end to work with react. I made sure I organized the react files in a neat and easy to read format.

4. Polish

Once the MVP is done. I made sure keep testing the features to find for bugs.

--

###Major Hurdles & Victories

• Implementation of the tokens.
• Passing data between parent and children components.

--

If we had more time:

• Make code more DRY and clean
• Allow User to create teams
• Allow User to join games

--

Installation Instructions

1. Run npm install to install all packages
2. Open up a new tab and run $mongod (If you don't already have Mongo, you will need to do a brew install)
3. Open up another new tab and run $nodemon (If you don't already have Nodemon, you will need to do a brew install)
4. Save your code and enjoy Hoopr!

--