A full-stack web application that delivers the best basketball highlight experience you can receive. Curated videos, filtered, sorted, and save any of your favorites as well. This repo contains the client side of the application while the server side can be seen here.
- Portfolio
- GitHub: Alex-Lee-Myers
- Email: [email protected]
- Twitter: @AlexLeeMe
Click me to view the live deploy through Heroku.
Click me to view the Server repository for AllBallCall.
P.E.R.N. (PostgreSQL, Express, React, Node.js)
Due to the nature of this project being required to reach MVP within 25 days, from server to client side, a host of packages were implemented to quicken progress on the client side.
- TypeScript
- Tailwind CSS 3.0
- Material UI
- React-Router-Dom V6
- React-Player
- React Legacy (Class Components)
Well, I did! I have over half a decade of experience in Illustrator and spent around 30 minutes on producing it.
I am a die-hard NBA fan. In the midst of working a full-time job as well as averaging 5 hours a night coding for my part-time bootcamp with Eleven Fifty Academy, I was unable to watch any games or keep up. I started to rely on Twitter or Reddit.com/r/NBA for highlights yet both were cumbersome to do so. I wanted a one-stop shop where I could find the highlights I wanted to see --- so I decided to make it myself.
Yes! Soon enough I will provide an experience beyond the scope of my intensive class. I may make it open-source in the future as well as I'd love to work with the community to build the best experience for all.
Indeed I am. Feel free to reach out to me via my LinkedIn if you have positions available for front-end, back-end, and/or full-stack.
- Week 1 (January 22nd through January 29th, 2022)
- Completed MVP of Server.
- Build out base structure of Client MVP.
- Test client-side register and login.
- Start implementing ReactPlayer and testing its functionality to ready for server fetch.
- Week 2 (January 30th through February 5th, 2022)
- Debugged profile dropdown menu crashing to become fully functional.
- MVP basic video post now possible with a user logged in.
- Provided ability for registering a user and logging in.
- Admin registration now available.
- Navbar conditionals setup to further provide functionality when props properly pass through.
- Styled both login and register page, including for mobile.
- Routing fixed up further.
- Week 3 (February 5th through February 12th, 2022)
- Navbar fully responds to states of a guest, user logged in, or an admin.
- New Settings.tsx Component:
- Structure built for users ability to edit their username, password, and email. Fully functional.
- Setting up the ability for a user to delete their account, all their videos, or all their comments.
- Tooltip added for registration. Conditionals being added later for friendlier UX.
- Mapping home page from server. Pagination process beginning.
- Week 4 (February 12th through February 19th, 2022)
- Head to San Diego...🌞⛱
- Major milestones hit throughout this week between looking at individual videos, commenting, and more.
- All CRUD endpoints work, as well as an additional few for user account information.
- EFA MVP goal hit.
- Week 5 (February 19th through February 22nd, 2022)
- Stylized every aspect of the application.
- Took off options on Navbar for features being implemented post-EFA.
- Integrated validation for all forms.
- Prepped for presentation taking place on the 22nd.
- Finalized Trello and Readme for last sprint completion before EFA presentation.
- Tuesday, February 22: Presentation Day
- Continued Support (March 2022 and beyond)
- Proper profile picture support.
- Search abilities.
- Options for sorting videos.
- Tags, players highlighted, and teams filter incorporated.
- Reworking all components to be functional components instead.
- Admin ability to highlight videos.
- Autocomplete options for tags/players/team filter.
- Widen scope of site to all basketball leagues.
- Pagination + Lazy Loading for videos.
- Automatic deletion of bad videos.
- Safety filters for inappropriate text/videos.
- Upvote feature.
- Refresh on VideoPost saves state.
| Date | Comments |
|---|---|
| 1/22/22 | Started my server build. Ran into extreme issues with PostgreSQL on my host computer that set me back a few hours. I ended up having to manually seek out all PostgreSQL related files within /AppData, /ProgramFiles, etc., delete them, then reinstall PostgreSQL from scratch. |
| 1/23/22 | After snafu of previous day, spent nearly 10 hours on development of my server mostly betweem researching database associations, applying them, and continuing to narrow down the tables I'd need for MVP. |
| 1/24/22 P.1 | Trello Board created. |
| 1/24/22 P.2 | Continued finalizing database associations. Ran into issues with primary keys conflicting with foreign keys. Setup some potential stretch goal tables/models regarding bookmarks and upvote features. |
| 1/25/22 | Debugged my issues with table's being set incorrectly and now fully functional, tested all endpoints as well. |
| 1/26/22 | Finished up UI design of the NavBar. Built out extremely limited React-Router-Dom. Debugged issues ts-node was flagging regarding it. Still need to figure out drop-down of the Portfolio and create terenary depending on isLoggedIn state for Logout+Signin/Register. |
| 1/27/22 P.1 | Tested ReactPlayer functionality. Minimal Tailwind UI integration with a card-style grid. Base structure working. Need to move to Home.tsx and then integrate fetching the server. |
| 1/27/22 P.2 | Started build up of Login UI. Needs a lot more work before functional. Additionally, did a copy-paste into Register file for a base start. Will touch that after Login finished. |
| 1/28/22 | Working on Login+Register further and testing. Navbar dropdown as well. |
| 1/31/22 | Navigation to login page working. Further reworking of props/states throughought whole App.tsx will be worked on in future updates. |
| 2/1/22 | Register endpoint working perfectly after reworking to become a functional component. |
| 2/2/22 | Navbar is able to be used to access both login and register now. Registration worked for mobile design too. Images added to make material more presentable. |
| 2/3/22 | Heavy debug day. VideoPost.tsx was troubleshooted for 4 hours alone. To no avail but left detailed comments for future restructuring and goals of file. |
| 2/4/22 | Videpost now working. Basic styling. There is commented code for further stretch feature updates. |
| 2/5/22 | Admin registration working. Basic styling. Conditional navbar not functional but implemented initial code. |
| 2/6/22 | Users able to update their username, password, and email. Settings conditional for when someone answers their reset questions correctly is working. Delete fetch functions made, but not implemented in the render just yet. |
| 2/7/22 | Implemented tooltip for registration/login suggestions for requirements before having to commit. Added password confirmation dialogue as well. Navbar works with mobile view as well. Added temporary profile picture as well. |
| 2/8/22 | Navbar fully responsive to the user state (guest/standard user/admin) and now has a logout function as well. Settings.tsx has modals setup to show on correct condition, yet fetch needs tested+debugged. |
| 2/9/22 | Settings.tsx modals worked on further with styling. Fetch was not working. Continuing to debug. |
| 2/10/22 | Settings.tsx: users are able to edit their username, password, email. they are also able to delete all their videos, all their comments, and/or their account (which deletes all their videos+comments as well). needs styling done. make sure navigating to home page after account delete as well. |
| 2/11/22 | Home.tsx reworked to be able to pass which video is clicked correctly. Props and State reworked for those components as well for future updates. |
| 2/12/22 | Heroku Deployed. Navbar was originally not working with Heroku deployment, but debugged and worked. |
| 2/13/22 | Home.tsx videos now have a link to their respesctive video when clicked. props being sent through of course. this is where users will eventually be able to comment on videos, owners of video edit or delete video, and admins can set the video to be marked as a highlight. |
| 2/14/22 | major progress! mapping comments. videos passing through correctly. essentially, Videos.tsx component is ripe for filling out the functionally. need to add ability to post a comment, conditionals for user state, and maybe integrate share buttons, but great progress was made tonight to hit MVP. |
| 2/15/22 | conditionals set for logged in users to see comments or not. may revert at a later date. edit/delete buttons currently show for users who own their comments but currently not functional. all fetches created for implementation of use cases in JSX for video editing/deleting for owners, that and for comments edit/delete. |
| 2/16/22 | able to delete after debug session. |
| 2/17/22 | able to post a comment. page needs refreshed before you see new comments. refreshing page also gets rid of all video props. needs debugged. |
| 2/18/22 | edit/delete comments work. delete has confirmation window as well. next up is being able to edit/delete video. |
| 2/19/22 | Full CRUD for users on their videos and for comments. MVP hit for that aspect of the app. Started beginning of AdminDashboard and all the states/props it likely will need. |
| 2/20/22 | Admin dashboard now working fully. MVP hit for the project! Admin are able to edit/delete all videos. Comments can be done later. |
| 2/21/22 | Form validation implemented for every post fetch in the application (register/login/videoPost) |
| 2/22/22 | Updated Trello board and ReadMe. Double-checking everything is working on client. Small text changes at minimum. May attempt to setup MyPark functionality as well if time alloted (in develop branch right now). Prepping for presentation. Posting videos and comments from multiple users. |