Budget Planning App

Homepage
Add Item Screen
Settings Screen
An Example of Custom Lists
Dark Mode

Inspiration

We both have the problem of not being aware of exactly how much money we spend. Budgeting apps exist, of course, but are often needlessly complicated, making it difficult to use them for simple things. We built this website to cut out the complexity and make it easy for everyone to use!

What it does

This website allows you to add items for expenses, either ones that you've already purchased, or ones you're planning on for the future, and adding them to an upcoming month to easily visualize how much you'll be spending in the month. You can set a budget for each month and see if you are over or under your budget. It also features a bar graph at the top of the page, showing the next three months of your spending, and if you are over/under your budget. You can also create custom lists for things such as wishlists to organize items that don't have a set month yet. You can also set an image to display for an item as well as a link. The website is responsive and works on both mobile and desktop, with many QoL features such as drag-and-drop and a light/dark mode.

How we built it

We built this website in VSCode using HTML, CSS, and TypeScript.

Challenges we ran into

At first, we wanted to make it purely an app, using Android Studio. However, the installation was messed up on both of our computers somehow, with frequent crashes and corruption. We decided to switch to building a website instead, because we were both familiar with the technology (VSCode) to make it.

Accomplishments that we're proud of

We're proud that we could make something fully functional in this short time, and a website that we both actually need to use and will use after this!

What we learned

Of course, we improved our HTML/CSS/TS skills, especially with learning to make it functional on both Android and iPhone. We also became much more fluent with using Git and GitHub, since we used GitHub Pages to publish the website.