Paper Tracker - A budgeting app prototype
A prototype budgeting app that implements the envelope method of personal budgeting.
This project was started with several goals in mind. First, I wanted to make something more interesting than a to do list (not knocking them as a learning tool, just not inspired by them). Second, the project had to utilize git as if I was part of a team. Third, the project had to use some form of web components.
I decided to create a prototype of an idea that had been bouncing around my mind for quite sometime. It’s always a bit janky to use a spreadsheet for budgeting, and I was interested in a tool with more flexibility, while retaining the simplicity and ease of use. The initial design was drawn with pen and paper, and refined several times. Feedback on the first design was mostly positive. However, the consensus was that it didn’t use color effectively, and was too unintuitive. I went back to the drawing board with a hachet, and pruned away or simplified every element in the original design. Color was reworked (and remains something that I need to focus on for future projects).
The server was built on Koa.js 2, a replacement for Express that uses async/await instead of callbacks. I tried to keep the amount of middleware to a minimum. The user authentication was handled with JSON web tokens and bcrypt for password hashing. While signups are not currently implemented, the user login follows the basics for security.
My usage of Git was based on this article by James Chambers. The basic workflow I followed was as follows:
- Create a new branch for the feature. Checkout the branch
- Implement the feature, adding and committing to the branch
- Fetch, and then Rebase the branch back onto master
- Merge the feature branch onto master and then delete it.
The biggest error I felt I made in my use of git was not using a dev branch. Instead I was merging back onto master and pushing that out to github. I did eventually realise and rectify this during a refactor of the app’s scss code.
During the construction of the app, I learned a few important lessons. The project should have been contained within a single repository (whereas I split it into app and server). This led to unnecessary delays when deploying to AWS. While a minor error, the use of a dev branch would have kept my repos cleaner. The largest error I made was not planning the underlying architecture of the server and app. This led to a need to rewrite large portions of the app’s components to work with the server. Had I mocked up an API with Postman, this would have been largely avoided. In addition, the first draft of my app’s scss was monolithic and tightly coupled. In the rewrite of the components, I refactored the scss code into a more modular and reusable framework. Very little of the current scss is specific to this app, and I plan on reusing several parts of it for another project.