Budget Buddy
Budget Buddy is my first project and the start of August. It was a very messy and fun building process and I learned a lot about software development. Below you can find out more about the idea behind Budget Buddy, how (I think) the code works and my reflections on the building process. Click on the links to check out the web app and the repository (for the code).The idea behind Budget Buddy
The main point of the project is to be a simple and fast way to enter expenses on a mobile phone. This, in combination with the fact that it is free to use and modify is the unique value proposition (UVP). If you were to look at Budget Buddy as a business, its business model canvas would be structured very similar to the business model canvas of August. The UVP could be added to the core of the business model canvas, the value propositions. Let me explain the details of the idea using a UML Use Case Diagram.
On the left-hand side you can see two people that can interact with the system. The developer (me or anyone adopting the software) can add features or break stuff. Both things might happen at the same time.
The user can
- Enter an Expense
- View Expenses
- Refresh by clearing browser data
Entering an expense includes submitting the expense, this means that to enter an expense you always have to press the submit button so that it is saved in the app. Viewing an expense can include deleting expenses but since it does not have to include it (you might just want to look at the expenses), deleting an expense extends viewing it. To delete an expense you have to select it and confirm that you want to delete it.
When viewing expenses the user can open settings (by pressing the settings icon). This allows the user to set up a category. Even though name and budget of the category have to be set separately, I decided to model both as being included in the set-up of a category, since a category without a budget or name does not fulfill its purpose.
How the code works
I built budget buddy using AI in the form of an LLM. I do not understand the code as I do not speak JavaScript and HTML fluently, at least not right now. If you are interested in my reflections about using AI you may look further down the site. With that being said let me try to make sense of the beautiful mess AI and I created. I am very much aware that this code does not follow best practices but a part of me does not care because it works, or at least it seems to work. On the other hand I do want to improve my coding style and make the code easier to maintain and extend without being afraid of breaking things. I guess like with many things in life it is about finding the right balance.
Anyways, here goes my attempt to explain what I built. Let's go top-down from a high level of abstraction into the nitty-gritty details. First let's look at the file structure. There is two files behind the web app:
- index.html
- app.js
Here you can see the parts of index.html and app.js in the order they appear in the code and how they are connected:
The modals are important elements. They seem to basically be pop-up windows, at least that is how I used them. I like that they allow the user to focus on a specific thing such as data entry. That is why I used them a lot. There is a modal for expense input, one for viewing and deleting the expenses, one for settings and finally one for displaying the terms which is not part of the functionality though. Nevertheless the last modal is very important because it notifies the user that local browser storage is used to store data. This is the reason why all user data disappears after clearing browsing data.
The html part is responsible for the structure of the modals while the JavaScript part implements the logic behind them. Let's now dive into the logic behind the JavaScript part by looking at the control flow. Quick head's up: while making this graph I realized that the basic structure of the control flow seems to make sense: If you press on the left cell of a category you can enter and expense, if you press on the right cell you can view your expenses and delete them. If you then press the settings button you can change the category budget and name (separately). However, I got lost when trying to follow the trail of functions and finding a good explanation for why there is local storage and a global array for storing budgets. I stopped myself from going deeper because the main take-away here is that a simpler and cleaner solution, especially for interacting with local storage should be what I explore in potential next projects. You can find my more general thoughts on trying to learn from the building process below. Anyways, if you still want to dig in, enjoy:
Reflections on the building process
Here are some things that worked well:
- Using a lot of functions to keep things modular
- Iterative building approach: tiny changes, tested often
- Focussing on core functionality: quick data entry and not flashy features
Here are some things I will try to improve in the future:
- Try to better leverage LLM capabilities by outsourcing specific tasks and understanding exactly what I want from the LLM
- Focus on building within a clearer structure and following best practices when it is useful to let me create more
- Try to keep things more consistent for future reference so that I can built upon what I built without fear of breaking things
So all in all I am happy that I am laying the foundations for my personal software development workflow. However, there is still a lot more for me to learn. I think in the age of LLMs and other types of "artificial intelligence" it is very important to find a good balance between speed and understanding. The question of successful delegation is: "What do I do myself and what can someone or something else do for me?"
I do not think it is an easy question to answer. Also I think it is becoming a lot more relevant for a lot more people, including myself, because AI offers new capabilities. Regarding Budget Buddy I feel like I may have over-relied on the AI. The problem was that I did not know what exactly I wanted because I did not know how to do it at all. Moving forward I might try to understand a bit more of the code. This might mean investing a bit more time initially but then I will be able to prompt the AI more effectively and outsource specific things such as a function that just does one specific job, which is faster in the long run. This leads to another strength of using AI in software development: You can test the output of the LLM! I would like to learn more about testing so that I can be sure I covered all important scenarios. On the other hand it is also possible to make tiny changes and instantly test them so that (hopefully) little can go wrong.
In summary I want to try and implement a few best practices in a way they make building things faster and more fun. For example cleaner functions that are coded so that you know what they do (which means less comments needed), less repetition and clearer flow. I guess it is about finding the balance between a very rigid and structured and a dynamic and creative approach that is suitable to yourself and the context of your project. I am excited to see where my programming journey leads me, thank you for coming along for the ride!