Coming into this project, I didn’t want to fall into the traps from my previous projects of trying to create a complex application. Rather, I went into with simplicity in mind and to make it look clean. This approach worked out very well for me and I was able to create a responsive application that has great functionality and actual styling that I’m proud of.
I created a budgeting application and with the theme of simplicity, I called it ‘EZ Budget’. It’s a straightforward application with a simple and clean UI that a 5 year old could use. You can add budgets, add expenses to those budgets, view expenses for those budgets, and remove expenses as well. You can also delete budgets entirely. I purposely omitted the function of changing the budget cap as I want to encourage the user to stick to the budget that they set. If you’re going to change your budget willy-nilly, then there isn’t really a point to a budget.
I used React-Bootstrap for the styling, and it was an absolute dream to use compared to doing manual bootstrap styling in class names like I’ve had to do in previous projects. React-Bootstrap has its library of modals, buttons, etc. as true React components which I found much easier to manage than the styling I had to do in the post with just HTML elements.
Redux was used for state management of the budgets. This allowed me to easily call the budgets and display them in containers and and access any corresponding expenses as I needed to.
On the backend, I had two models set up (again… simplicity) — just a Budget modal and an Expense model. A budget has many expenses and an expense belongs to a model. I set up a model method on the Budget model to calculate the current total of expenses for a budget and this was used to drive the progress bar that appears on the frontend.
All-in-all, I’m happy with how this project came out and React definitely made a night and day difference for how to implement Javascript in an application in an organized fashion.
