Inspiration

As a low-income first-generation college student, I have been always interested in learning about personal finance and am passionate about sharing this knowledge with friends and family. It has been a goal of mine for a while now to develop a simple website to help display this information.

What it does

This web application serves as an interactive flowchart that breaks down what you should do with your money in a few key steps.

How I built it

Starting from scratch, I drew out on paper what I thought would be a useful way to display this long flowchart that I originally found on reddit link. There were a few implementations out there already, but nothing that I thought was easy to use and simple to follow. After outlining how I wanted it to look, I created blank HTML, CSS, and JavaScript files and just started coding from there.

Challenges I ran into

It has been a while since I've created any type of web application where I wrote HTML, CSS, and JavaScript from scratch. I came across semantic-ui which helped speed up some of the formatting and styling, but even then it became tedious and cumbersome to style some of the elements to my liking. The most challenging parts for me was relearning the basics and getting the interactive parts done using JS.

Accomplishments that I'm proud of

I almost gave up because I was getting frustrated with how long I was taking to develop such a simple website, but I am proud that I finished it and it works great. It is on a topic that I really enjoy learning and teaching others about, so I had fun making it.

What I learned

I learned the fundamentals of web technologies again and feel like I have a better grasp of what it takes to build a website from scratch to deploying it on GitHub pages. I learned javascript and semantic-ui.

What's next for Personal FinANTs - Spending Flowchart

Although there are a ton of features I want to add in the future, some of the main ones include:

Adding more sections to the website to include additional budgeting, saving, debt, credit, and investing information.
Breaking the information down and narrowing it to different age groups.
Do something more advanced technically such as hooking up a database, creating some APIs, using a web dev framework
Adding some more colors to make things pop out more