UI proposal

[mile-ignjatovic]

I found this repo by accident and spent a week analyzing it since i dont know much about ML or Python :D Iam a web dev (react mostly) and i need a comprehensive UI. Wrote these guidelines this morning. Tell me what you think. I will create an initial UI wireframe/mockup for this as soon as i can - keep in mind that iam not a UX designer so it will probably be bad. All suggestions, changes, and comments are greatly appreciated.

Purpose: an online service where users with access can train, run, and compare ML betting bots, and get, check, store, and share predictions for game results.

Features:

- User login: User can login with google account through firebase (google login for starters, enable email/pass and others later)
- Todays picks: User sees the ML picks for today. The picks are fetched from a different source via API based on sports category selected.
- User can select or search for a sports category (currently just NBA) from a dropdown above todays picks.
- on sport category change or init, we fetch model predictions for today from that category and change the history data list based on that category
 - Default sport category: User can set default sport category from the settings modal accessed from top right user avatar dropdown (default is NBA until new data is added)
- Pick historical data: User can see the historical data of picks and their accuracy by category (only NBA now) (maybe add name of model or model version as additional info).
- Current sports data: In the same table (or not :) user can see the current scores in real time
- Newsreel: user can search the web and get the sentiment, news or other information regarding the team/player/game he has picked. this info is displayed on the right similar to what we have in [tradingview ](https://www.tradingview.com/chart). This should be something like helper information section. We could leverage chatGPT to get an overall sentiment on scraped news articles or create a twitter/news ML bot? so many ideas :)
- User chat: User can add comments on different games like we have for crypto in [coinmarketcap](https://coinmarketcap.com/currencies/bitcoin/) community section or other. Basically, the user selects a category and next to each predicted game he will se a chat box with comments or something similar.
- Game detils: User can select a game forom the picks and see detailed information about the pick. Predictions, news, stats, historical data, user chat...
- In app bet: User can pick games and place bets (but not for real). we use this data to construct user matrics?
- User metrics: User can see his own picks and games historically to see his overall historical score?
- Notifications: User gets a notification if there are new picks for today
- Notifications settings: User can opt out form notifications in the settings modal
- ML page: allow users to compare create and tweak models?
- Favorites: user can select his favorite teams or picks. Dont know how this would work. just an idea.
- Trending picks: user can see what picks have most 'likes' or comments or whatever. Could be also combined with news/twitter/or whatever scraper or bot.
- Social media: user can share his picks through socials
- Dark mode: User can change the app theme in settings modal? Just for fun.
- Place a bet: Iframe of a betting site in app?
- User logout: User can logout by clicking on the icon in top right and selecting logout from the dropdown menu.
- more features ...

Technology:

- React for UI and firebase for user login and user data (ML predictions and historical data can be stored in firebase as well)

Target audience:

- designed for anyone who wants to try and leverage ML for sports betting.

Benefits:

- makes it easy for users to see and manage ML picks for games. maybe train ML models whith diff configs and test in the future?

Basic idea of how this should work in the background for now:

• reactJs PWA for UI. We can create a PWA that can be accessed like a website or downloaded as an "app" with a single btn click that can run locally on any device that has service-workers browser support (internet explorer is not supported only i think. need to check) Will still need to be online for the app to work properly (will display cached data if user is offline), PRO: we get an app like experience on mobile devices without having to register the app on any app store. This is an initial solution. CON: If the app progresses should be best to create a dedicated android and ios app.
• UI will get all data it needs via api calls.
• The NBA-Machine-Learning-Sports-Betting should be changed in a way that it trains the model every day for for all supported sports categories and save prediction data to a DB which can be accessed through an API

For starters:

• we could run the NBA-Machine-Learning-Sports-Betting in google colab manually and expose APIs to get relevant data for now
• the reactJs app can be in the same repo as NBA-Machine-Learning-Sports-Betting?
• app can use firebase to handle user data. If we use firebase for hosting and user data its just a question of changing the firebase api key if we want to create a new project where the owner is not me :)
• UI can be made without the data from NBA-Machine-Learning-Sports-Betting, we just need to agree on the data format. (like it is now is ok as well)
• all calculations and data manipulations can be done separately from NBA-Machine-Learning-Sports-Betting and parsed on the UI and saved to firebase or whatever DB.

[kyleskom]

Please add this to discussions page.