Development of my first personal project-Budget Buddy
Project Blog Post 22nd April 2023
Are personal finance and budgeting topics of interest to you? Do you want to discover the many stacks that may be used to develop a full-stack web application? If so, you might be interested in my most recent project!
Goal for my Project
I made the decision to create a budgeting app during the Dev Academy boot camp utilising as many different stacks as I could, including React, TypeScript, and Redux for the front end and Node.js, Express, Knex, SQLite/Postgres for the database and server side. Additionally, I employed Dokku for deployment and Auth0 for authentication. Furthermore, I discovered how to use Material UI to enhance the app's user experience.
My goal for this project was to apply the skills and knowledge I learned during the boot camp to build a personal finance/budgeting app. I started by writing user stories and creating a wireframe for the layout. However, I quickly realized that I wasn't very good at designing the layout, so I decided to use a wireframe that I found on the internet.
I started building the app by creating CRUD (Create, Read, Update, Delete) functions and then adding functionality such as creating a budget, adding expenses, and displaying the current balance. I also used nocks and mocks for integration testing to ensure that the app worked correctly. I began to research ways to show the data nicely for the user and came across Material Ui. I quickly fell in love with their designs and started employing their components into my app. I have used their select input, cards, modals, data grid buttons and many more. Learning how to use their functionality through the document was a fun experience!
Reflecting
Looking back on this project, I realize that there are a few things I would do differently if given the chance. For instance, I would definitely change how I handled the date system, since using the month names as values made it difficult to convert them in the back end. I also noticed some limitations with the Material UI library. While it's very visually appealing and relatively user-friendly, I encountered a bug with the DataGrid component when trying to render it out through testing. Unfortunately, I had to skip testing this component as I couldn't solve the issue. Additionally, the input required function in Material UI didn't behave like the normal HTML behavior, allowing users to submit blank input.
However, I'm excited to explore new approaches to styling my future apps. In particular, I'm currently considering using Tailwind, which I believe will offer more flexibility and customization options.
All in all, this project taught me a lot about using different stacks together, writing user stories, and conducting integration testing. It was a great opportunity for me to apply my skills and knowledge to build something that I'm truly interested in. If you're curious about the process and want to learn more, please feel free to check out the code on my GitHub Repository or try using it by visiting.