Investing Dashboard

This app takes user input on the initial screen and then will provide the user with a dashboard to keep progress on his/her portfolio. It includes updated stock charts, news, and market sentiment.

Link to project: (Work in Progress) dashboard

How It's Made:

Tech used: HTML, CSS, JavaScript, React, TailwindCSS, StockData API

I am an investor myself and wanted and app that can keep track of my total investment value. Of course there are various ways to do this, but I wanted to include things like stocks, ETFs, crypto, and bonds. Each has their own input. The user must input their data which is just a net worth check. I took inspiration from Dribbble.com and the many dashboards available on their website. I chose to use the Side View Navbar because that just felt more intuitive than a top Navbar. It's not a website, it's a web app and I think that small difference makes it feel that way. Using React I structured the folders to include each page as a different file, as well as each component that I was going to use like the charts, navbar, and header. I stylized everything in Tailwind CSS and adjusted to fit the content that I wanted to showcase.

Optimizations

I'd love to include an ongoing chart with the data that is provided by the client. Obviously, this is only the beginning of an app like this, but it relies on continuing user input to be successful. Some things that I will continue to build out and try to improve are. Of course, these rely on user sensitivity.

  • storage options
  • login / signup
  • investing progress
  • future value calculator

Lessons Learned:

I learned a lot about the process of creating a larger project. Using an API with a lot of useful information is great, but it also comes with downsides like a limited number of calls per day or the backend speed. This type of data is not something that I could build myself, so I had to use what was available.

Examples: Take a look at these couple examples that I have in my own portfolio:

Movie Mania: github repo

ESJ Editing Services: github repo

Spelling Bee: github repo