InvestoBull – A Stock Price Prediction WebApp
InvestoBull is a web app designed for everyday investors who struggle with the intricacies of the stock market. This app not only provides insights into the fundamentals of blue chip stocks in the Nasdaq alongside relevant news articles, but also provides stock price predictions powered by an ensemble of delicately tuned machine learning algorithms, to help investors make informed decisions. We do the heavy lifting so that our investors can enjoy their new-found financial freedom.
Quick links: Quick Start Guide | Swagger API Documentation
React | ChakraUI | Axios | Node | Express | MongoDB | Firebase | Stripe | Azure ML | Swagger
- 1. Project Description
- 2. Requirements and Goals
- 3. Integration of Tech
- 4. Above and Beyond
- 5. Next Steps
- 6. Contributions
- ✅ Fully functional webapp that integrates all technologies learned throughout the course
- ✅ Home page with a table containing at least 10 stocks
- ✅ Retrieve stock details through an API and store stock data on MongoDB
- ✅ Display fundamentals for each stock - market cap, earning etc.
- ✅ Hard code stock predictions in our database as our MVP
- ✅ News page that shows articles relevant to the financial market
- ✅ Deploy the webapp on Vercel
- User Accounts
- ✅ Secure authentication with email and Google, ability to reset password
- ✅ Persistent watchlist for each user
- ✅ Watchlist-specific news in the News page
- ✅ Basic in-app notification system
- ✅ Different tiers of subscription plans
- ✅ Secure credit card payment through Stripe
- Stock Details
- ✅ Render an interactive graph using historical price fluctuation
- ✅ Display relevant news for each stock
⚠️ Breakdown of all variables used for future price predictions
- User Interface
- ✅ Clean and consistent UI with high readability
- ✅ Loading spinners and responsive buttons to indicate interactive components
- ✅ Responsive UI that is mobile ready
- Real-time Data
- ✅ Setup cron jobs on GitHub Actions to retrieve and update the MongoDB database with real-time stock data such as latest price and volume from Alpha Vantage
- ✅ Utilize cron jobs to fetch the latest news articles from News API
- User Experience
- ✅ Light and Dark mode to improve accessibility
- ✅ Drag-and-drop functionality to maximize user customization
- ✅ Perform User Acceptance Testing with potential users/customers, and improve user flow based on feedback
- Stock Price Predictions
- ✅ Integrate AutoML to deploy models as endpoints
- ✅ Have predictions set up for more than 10 stocks
⚠️ Graph detailed metrics related to each stock - moving averages, RS, RSI values etc.⚠️ Set up in-app notifications to alert users on price fluctuations- ❌ Send emails to alert users on important updates
- ❌ Analyze technical factors like moving averages, etc. for tuning and validating machine learning algorithms
- ❌ Display public reports from analyzers
- Documentation
- Used Chakra UI: a CSS framework, and styled using inline CSS
- Built a Responsive UI for mobile view
- Went above and beyond by designing cron jobs using Javascript to fetch realtime stock data
- Used React to build reusable components to set up the website
- These components helped minimize code repetition and maximize re-usability
- The stateful components and virtual dom structure significantly reduces page load times and eliminates unnecessary updates
- React prevents DOM injection attacks
- Used Context API to track state
- Eliminates the need for passing state as props
- Less boiler plate code compared to Redux
- Used custom hooks for abstract site functionality
- Create reusable functions and avoid code duplication
- Use Stripe Elements integration to handle credit card payments
- Eliminates the need to handle critical credit card data
- Used React-firebase integration for authentication and storing user data
- Eliminates the need for building a custom OAuth solution
- Enhances security of the overall application
- onSnapshot event listener makes it easy to update React state when the firestore database is updated
- Set up APIs using Express for
- Getting stock data
- Getting price prediction for stocks
- Handling credit card payment
- Getting stock news
- Used Axios to make calls to the backend
- Supported in more browsers compared to fetch – even older ones
- Great documentation and better code readability
- Built a future proof, scalable schema design in MongoDB Atlas to store the following:
- Real-time stock data
- Quarterly stock data
- Price fluctuation graphs data for a stock
- Predicted future price for stocks
- Stock-specific news
- News information from different news sources
- Went above and beyond by integrating Cloud Firestore, a MongoDB fork hosted on Firebase, to store:
- User data – name, email, photo, plan, etc.
- Collections of user-specific Watchlist stocks, Notifications, and successful Payments
Storing data on Cloud Firestore allowed us to keep all user-related data on Firebase, enhancing integration with the authentication system
- It eliminates the need for determining relations between tables
- Lower latency when reading / writing to large databases
- Minimal data holes since data is stored as a JSON
- Better horizontal scaling capacity for future-proofing
- Deployed the website on Vercel
- Higher performance with lower latency compared to Heroku (for free plans)
- Bigger free-tier plan for projects compared to other bigger hosting platforms like AWS, Azure, GCP etc.
- Went above and beyond by deploying cron jobs on GitHub actions
- These trigger serverless functions set up on Vercel to pull in the latest stocks, news, and prediction data
- Azure ML and AWS SageMaker both provide anomaly detection, but we decided to use Azure as Microsoft offers free credits ($250) for students
- Well documented interactive portal, CLI or Python Notebooks to train and deploy models
- Offers easy to use and intuitive functionality for time series forecasting, that be tuned to a high degree of sophistication
- Supports classification, regression, and time series forecasting
- Easily manage and scale your resources all in one platform
- Predictions use real-time stock data and queries Azure daily for updated predictions
- Leveraged Javascript to update stock, news and prediction information present in our system
- Triggered by scheduler attached to Github actions which triggers serverless functions in Vercel to parse latest data
- Firebase Authentication
- A simple yet secure way of setting up OAuth – no need to reinvent the wheel
- Seamless integration for email + Google Account login or signup
- Cloud Firestore
- Storing user data – name, subscription plan, watchlist, notifications, etc.
- Removes the need to move user data out of Firebase
- Inbuilt Listeners like onSnapshot update the state of the website in real time when changes are made to a collection
- Seamless way to process Credit Card payments
- Reduces security concerns by eliminating the need to store credit card information
- Easy integration into the website using stripe elements
- Used NewsApi to fetch real-time news data corresponding not only to individual stocks but also to different news sources
- Provides the right balance between news sources available and the size of the free plan. Learn more
- Used the Alpha Vantage API to fetch real-time data for different stocks
- Most stock data APIs provide similar data but Alpha Vantage had really clean documentation
- Used Chart.js to render a reactive open/close chart with real-time data stored on our database
- Used react-beautiful-dnd to enable the drag-and-drop functionality for the news cards
- Performed UAT with 20+ potential users, where we make observations on each user's workflow
- Addressed UI / UX concerns - color scheme, setting up light/dark mode, loading spinner, responsive buttons, etc.
- The MongoDB structure has been designed to handle new markets like TSX and NYSE if we decide to scale up in the future
- Workflows have been set up to add new stocks without going into the database
- Helps new users navigate through the webapp
- Clean way to test and document endpoints our API endpoints
- Interface to interact with APIs
- Find alternative to the free API plan which currently only allows updating data for only 5 stocks a minute
- Set up in app notifications for price fluctuations alerts that can be pre-set by the user
- Send email alerts with important updates similar to newsletters
- Analyze technical factors like moving averages for fine-tuning our algorithms
- Display reports from reputed stock analysts
- Create a workflow that automatically downloads and cleans data to train machine learning models
- Developed a responsive front-end for Home, Stock Details, Plans and parts of About Us, including interactive graphs and credit card payment section
- Took leadership on setting up a scalable and future proof MongoDB schema along with backend integration and Swagger API documentation for stock details, stock news, and stock predictions
- Deployed the project on Vercel and set up the cron jobs to update data in real-time
- Coordinated and scheduled meetings alongside text updates for smooth flow of the project
- Developed the front-end for the news page, including a news filtering system
- Set up the drag-and-drop functionality and made the news page responsive
- Worked on stock predictions, Microsoft Azure AutoML integration with backend
- Trained and deployed machine learning models using historical data of Nasdaq stocks
- Initial development of frontend components such as Home and Stock Table, and created Quick Start Guide
- Set up the login/signup system using Firebase Authentication and stored user data on Cloud Firestore
- Built the Navbar, Watchlist, Notifications, Payment Popups, and About Us components, and integrated user accounts with Payments, Notifications, and Watchlist
- Led the overall UI/UX development, performed UAT with potential customers, and enhanced UX by adjusting to user feedback
- Took charge of the repo structure and code cleanliness, designed README documentation, aided with Vercel deployment, crons and Github Actions
Thanks for reading our documentation ❤️ Have a bullish day!