Finance App
Time
2023 [1 week]
Team
Solo
Languages
MERN Stack · Chart.JS · Tailwind CSS
Goal
As a budget-conscious individual, I find it challenging to get a clear and visual understanding of my financial habits over time. I need an intuitive application that not only lets me log in and monitor my expenses and savings but also visualizes my financial progress through easily digestible line charts and detailed table summaries.
Process
I began the project by crafting a robust front-end using React, accentuated by the responsive design capabilities of Tailwind CSS. A core feature was the integration of Chart.JS, which allowed for a dynamic line graph representation of data. Shifting focus to the back-end, I employed Express.JS and Node.JS as the foundational frameworks and selected MongoDB for its versatile database solutions.
One particular aspect I'm proud of is the implementation of a modal window for inputting expenses. Rather than redirecting users to a separate page, which can interrupt the user flow, I opted for this streamlined approach. The modal provides a seamless and intuitive experience, allowing users to quickly and efficiently log their expenses without ever leaving their current context.
Once a user hits their spending limits, the overspending is immediately highlighted in a vivid red, drawing attention to areas where budget adjustments may be needed. Beyond this, we recognize that sometimes users need to make modifications. So, we've integrated a seamless feature allowing for the swift deletion of any tracked expense, giving users full control of their financial data.
