Over the course of the past year, many of us heard a lot about the stock market and have started investing (GME to the moon 🚀). As such there has been a lot of discussions regarding the stock market through various platforms such as Reddit, Instagram and many others. However, there does not seem to exist a social platform for the sole purpose of stocks and stock related discussions. As a result, we wanted to develop a centralized social media platform that enables individuals to showcase their stock portfolios as well as track other portfolios they may be interested in! With the understanding that many of us prefer viewing stocks on our mobile devices, we built a user-friendly app to help display stock portfolios as well as to help create a social network between stock enthusiasts.
What it does
Stocker is a stock management app that allows users to add stocks that they have invested in into a virtual portfolio. But there’s a 21st century twist! Users can follow other users of the app to find out what stocks those users are investing in, giving insight into what stocks are popular amongst investors. Users also get up to date news about the stock market. We take a look at the stocks in their portfolio and generate a series of the most recent and relevant news related to their stocks. In addition, users get the ability to discover and get information on stocks with our stock lookup feature. For the cherry on top, users can visualize their investments through an elegant pie chart in their portfolio that shows the impact of each stock on their portfolio.
How we built it
When building out Stocker, we chose 3 key design principles to help ensure our product meets our specifications as well as ease our development process. Simplicity, Elegance, and Scalability.
We wanted Stocker to be simple to design, upgrade and debug. This led to us harnessing the lightweight framework of Flask and the magic of Python to design a REST API for the needed backend endpoints. To provide real-time stock updates and news, we harnessed multiple APIs such as Yahoo Finance and NewsAPI to ease the load of our application and further simplify our app. To help build out our initial minimum viable product we used SQLite3 and Firebase for rapid development, testing, and debugging.
To create an elegant and user-friendly experience we leveraged React Native and various design libraries to present our users with a new, modern platform for stocks! React Native also worked seamlessly with our Flask backend and our third-party APIs. This integration also allowed for a concurrent development stream for both our front-end and back-end teams.
Challenges we ran into
One major issue we faced during this hackathon was figuring out how to handle large API calls while updating the react-dom to reflect the new data. At the start, we found that due to the number of requests and size of our requests, our application’s responsiveness was drastically affected.
After playing around with React Native and testing our limitations we were able to dynamically render our frontend while maintaining a low amount of calls to our backend and to the APIs we used.
Package dependencies were another problem that we hadn’t anticipated when we started this hackathon. Due to the different package versions used between different packages and requirements of other packages we had to not only have the necessary packages but the right versions as well.
Another problem we faced was figuring out a pie chart library that can allow us to display our user’s portfolio. Although there were several open-source projects online, many of them caused conflicts when installing or didn’t do what we wanted. As a result, this decision was very time-consuming, and next time we would prefer it to go more smoothly.
What we learned
Along the way, this hackathon really helped us develop our hard and soft skills. For starters, for many of us it was our first time making a mobile app, so learning React Native on the “fly” was a unique experience. Moreover, it was also the first hackathon for one of our team members, so this event enabled them to hone their frontend skills while under pressure. Furthermore, we also learned how to implement third-party APIs to fetch data tailored towards investing info. Lastly, due to a virtual setting, it also tested our teamwork skills, and we explored new ways to collaborate over Discord to coordinate our issues and track our progress. For instance, we often stumbled upon many bugs which were resolved through a team effort. Overall, we learned new technical skills during the process and also improved working in a team environment.
What's next for Stocker
We have many plans ahead to upgrade the level of stock information provided and to grow the social capabilities of the app. In terms of the stock lookup, we want to provide the user with more stock metrics such as a detailed graph of historical data, balance sheets, income statements, and a financial analysis. We already have all the necessary information available in our backend and simply need to build an aesthetic UI to accompany it. Adding support for more markets and cryptocurrency is also a part of our future plans. For the social aspects, we want to allow for a more controlled and secure following network by adding a 2-way handshake with the following requests. In addition, we want to add a fully functional real-time chat service for users to communicate with secure end-to-end encryption. Looking ahead, we would also like to add the ability for users to post their own guides on stocks for their followers to see.