Inspiration for the project comes from the increasing importance of financial literacy for the next generation. The world of stocks can be a difficult one to break into and navigate and would benefit from a way to easily conceptualize speculated stocks. Our app accomplishes this by taking gains from stock investments and turning them into virtual trees that grow in response to movement in the built-up portfolio.

What it does

After logging in, the app takes you to your stock dashboard. In the dashboard, you can see your portfolio in the form of a garden of trees. There are different ways to manage the portfolio:

  1. You can open up the comprehensive stock page to look at the stock you've invested in over the course of the app's existence.
  2. You can choose to sell the stock for liquidated cash, which can be turned into USD, or reinvested into other stocks.
  3. The app will make recommendations based on previous investments, categories of the stock (e.g., law firms, car manufacturers, pharmaceutical companies, etc.), and the history of the stock.

The garden aspect of the app is supposed to be emblematic of the general health of the profile. This can be represented through the colors of the trees.

  1. Green, a healthy steady increase of gains from the portfolio. The aim is to get as many green trees as possible.
  2. Orange, a fluctuating tree. While not making negative returns, it is better to avoid these trees as they are representative of stocks that have a high fluctuation rate, or have been losing value over an extended period of time.
  3. Dead, the worst kind of tree. This tree is to show an overall loss on a particular stock. It's advised to avoid this by either selling the stock or holding it in the hopes it makes a gain.

How we built it

We designed the UI with Figma and built the website with the Next.js framework. We retrieved stock market data through the IEXCloud API. The data would be sent to the main dashboard page in the app, where it would then be used to make recommendations and update the tree states. User data (such as client ID, state of the trees, invested stocks, etc. ) would be stored in a Firebase database.

Challenges we ran into

We ran into a time crunch with our project, where we got the groundwork for the app done but have an incomplete implementation of the interface. Only one of us had experience with Next.js, and we lacked experience with Firebase. Finding a solid API for stock market data was another hassle.

Accomplishments that we're proud of

All of us on the team have come into a better understanding of how a hackathon works and have a new perspective on app development. We managed to cover quite a bit of ground despite individually having only significant experience with one tool or worse.

What we learned

We learned to utilize Figma's multipurpose functions (exporting as SVG helped immensely for the background). We also learned how to use Next.js to develop web apps and how to effectively coordinate on work.

What's next for

In addition to the planned features for this hackathon, we have ideas for some future improvements:

  1. Linking banking information for the introduction of real-world application
  2. Setting up a "risk-free" environment with "play cash". Simulate what would happen if you were to invest with no profit or loss involved
  3. Two-factor authentication, to ensure that your investments and gains are your own.
  4. A variety garden, allocated garden spaces for big stocks could be introduced to compartmentalize the stock portfolio (making different gardens for different stocks).

Built With

Share this project: