https://github.com/mirokrastanov/nba-dashboard
🏀📆💻▶️A Fully Responsive Full Stack Web Application offering a modern dashboard with NBA stats, team rosters, standings, news, analysis, transactions, player stats and more.
https://github.com/mirokrastanov/nba-dashboard
angular app firebase front-end nba responsive spa student web
Last synced: 7 months ago
JSON representation
🏀📆💻▶️A Fully Responsive Full Stack Web Application offering a modern dashboard with NBA stats, team rosters, standings, news, analysis, transactions, player stats and more.
- Host: GitHub
- URL: https://github.com/mirokrastanov/nba-dashboard
- Owner: mirokrastanov
- License: mit
- Created: 2023-07-17T08:39:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-07T16:15:54.000Z (about 1 year ago)
- Last Synced: 2024-08-07T19:31:08.526Z (about 1 year ago)
- Topics: angular, app, firebase, front-end, nba, responsive, spa, student, web
- Language: CSS
- Homepage: https://nba-1-480a7.web.app/
- Size: 9.57 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NBA-Dashboard
🏀📆💻▶️A Fully Responsive Full Stack Web Application offering a modern dashboard with NBA stats, team rosters, leaderboard, upcoming games and more with a detailed page for each.
## Selected for Best Project from all the students in the course Angular - June 2023 (close to 500 people) 😊
### Disclaimer
- This is a non-commercial student project designed to showcase programming skills. I have only used it in a student environment @SoftUni.
## App Demo
#### The app was deployed using the Firebase Hosting service
- BACKUP: [In case main hosting is down](https://nba-1-480a7.firebaseapp.com/)
#### Data last updated - Aug 2023
- Please note - the last data update was made in August 2023. The data will not be updated further as this is a showcase student project. If needed the scraping algorithms can be queued to perform an update regularily. Or better yet - be replaced with a real API. For this project I could not find a suitable and free API in order to showcase my skills. Using a real API would be much easier anyways. :)
# General App Overview
## Introduction
- The app provides all sorts of NBA information.
- The user experience is nicely designed and styled with beautiful elements.
- Both Light and Dark mode are available throughout the whole application pages.
- Mobile devices gain a specifically designed experience tuned for small screen devices.
## Key Features
- Light/Dark modes - selection is remembered
- Favorites/Likes for Logged in Users. Favorites are displayed in the User's Profile.
- Authentication
- Guest features/access are limited
- Users get an enhanced experience and twice as many available features
- Search with auto suggestions (show up as you type)
- Dynamic navigation with animations and active highlight
- Special mobile device views and navigation show/hide button
- And much more...
## Page Map
- Dashboard (Some elements change depending on guest/user status)
- Standings
- Western Conference Standings
- Eastern Conference Standings
- Teams
- Selected Team Details
- Team Roster
- Team Advanced Stats
- Players
- Selected Player Details
- Transactions (Only for logged in Users)
- News (Only for logged in Users)
- Current News Article Details (Only for logged in Users)
- Analysis (Only for logged in Users)
- Current Analysis Article Details (Only for logged in Users)
- User Profile (Only for logged in Users)
## Sneak Peak Images
- Dashboard (User View)
- Dashboard (Guest View)
- Teams (with nice hover effects)
- Navigation (with a custom animated tooltip on hover)
- Navigation on big screens
- Navigation on mobile devices (toggled on)
- Mobile View with navigation toggled off
- Liked Team (already added to favorites)
- Not liked (you can click on the star to add it to favorites). Also showcases the custom tooltip on hover telling you what happens if you click the star. The star also spins with an animation effect, but to see that you must try out the app. :)
## A lot more awaits you on the app. Thank You!
- BACKUP: [In case main hosting is down](https://nba-1-480a7.firebaseapp.com/)
# Technical Information
## Front End side
### This SPA project was built using the Angular framework
- More information regarding Angular can be found in [this README](https://github.com/mirokrastanov/NBA-Dashboard/blob/main/client/README.md) and in the [Angular Docs](https://docs.angularjs.org/api).
## Back End side
### Back End is fully handled by Firebase
- Read the details of this project's back end handling and challenges. [Here](https://github.com/mirokrastanov/NBA-Dashboard/blob/main/server/README.md)
### NBA Data obtained via web scraping
- The lack of a free and feasible good API led to me learning web scraping and incorporating it for this project.
- It was a great way for me to learn more about the `puppeteer` library and web scraping as a whole.
- This of course made the Front End use of this data harder than using a regular API.
- There were many challenges and the process was very involved.
- Read more about it [Here](https://github.com/mirokrastanov/NBA-Dashboard/tree/main/web-scrapers)