Full Stack Budget App

Project Introduction

It's often said that the best diet is the one you'll stick to. Similarly, I've found the best budget to be the one you stick to.

Historically, I've found budget apps to be too restrictive in how they orient your finances. Additionally, while many will link to your bank and credit cardaccounts promising auto-categorization, I've found that to require far more maintenance than expected.

Moral of the story: no existing solution best aligned with the refrain above.

Situation

Over the past year our family has settled on a simple but effective format for our budget. It builds on the concept that events take one of three forms:

• Income (money in)
• Expenses (money out)
  • Fixed (amount is predictable)
  • Variable (amount may change month to month)

We managed this budget in Excel. While working out the process and kinks, this sufficed. However, as historical data mounted and visibility to the budget summary proved difficult, it was time for a new medium.

Task

This budget model should exist in an application. For visibility, a web application would be ideal.

The idea would be to appropriately store budget targets, income, and expense transactions in a database while wrapping the logic into an application and displaying an intuitive user interface.

Because of my affinity for web development and my desire to practice full-stack components, I decided to design it myself. Here's my intended stack:

Action

I wrote this program over a series of weeks. I worked to approach the development by adhering to agile principles: a minimum viable product upon which I built additional features.

The application is nicely organized out of a central "server.js" file. Routes, views, components, helper functions, models, etc., are neatly organized around the file structure (see below).

Result

The result is superb. A fully functioning, full-stack web app with an intuitive interface. Here's some details about what I achieved in this app:

• Cloud hosted app with Heroku, facilitating access via a browser and internet connection
• User authentication using PassportJS, fully protecting the interface
• User input forms to define budget targets and logging expense and income transactions
• File upload forms to facilitate mass import of transactions via CSV
• Proper data storage using MongoDB's NoSQL document and collection structure
• Optimized data models to reduce data reads
• Summarized, filterable views for budget comparisons and transaction level detail

Take a look at some screenshots of program (NOTE: all data is fake):