HomeExperiencesProjectsResumeContact
Expenses Recorder

Expenses Recorder

The Expense Tracker is a tool I developed for managing and recording my daily expenses efficiently. It allows me to log and categorize my expenditures, add monthly budgets to monitor my spending, and instantly see if I've overspent or have extra savings for any given month. With customizable categories, detailed reports, and visualizations, I gain valuable insights into my spending habits, helping me identify areas for potential savings. The user-friendly interface makes managing my finances intuitive and straightforward, making the Expense Tracker my personal financial assistant for achieving my savings goals with ease.
Elliot Chin
Contributor2021, September - Present

Legacy Version

The idea for my Expense Tracker started in 2021 when I wanted to know my spendings. The first prototype was built in Java using Java's Swing UI library, with all information stored in files. Over time, I created additional prototypes, all utilizing Java's Swing UI library.

It had multiple panels, and each panel served a different purpose. The ""Entry Label panel"" was responsible for adding new expenses entries. The ""Stats Panel"" displayed a summary of my spendings for the given month. I also have donut graphs that would visualize the amount spent for each category, and calculators to distribute expenses amoung me and my roommates at that time. The ""Report Gen. Panel"" allowed me to generate monthly reports in the form of CSV files.

Expenses Recorder - Initial Prototype
Expenses Recorder - Initial Prototype written with Java Swing UI Library. Some values are masked for privacy reasons.

Current Version

The New and Improved version is built on Next JS, which is a JavaScript framework that allows me to easily build web applications. This current version contains similar features, as well as additional functionalities that could not be implemented in the legacy version.

New Components

I can effortlessly see my expenses categorized, allowing me to quickly determine if I have spent over my budget in any area. A comprehensive graph displays all my past recorded spendings, enabling me to see my spending habits over the months at a glance. This chart also allows me to make detailed comparisons, helping me understand my financial trends and make better-informed decisions.

Expenses Recorder - Example Current Month Spending Chart
A radar chart that displays an example of the current month's expenditures.
Expenses Recorder - Past Month Spending Chart
A bar chart that displays an example of all expenditures from past months.

Expenses View

I can effortlessly view a summary of my expenses for each month, giving me a clear overview of my spending patterns. I have the ability to see each entry in detail and modify any values if they are incorrect, ensuring that my records are always accurate. Additionally, all charts update in real-time thanks to the use of React hooks, providing me with up-to-date visual insights into my financial activities.

Expenses Recorder - Expenses Month Summary Example
A snippet of the component that displays an example summary for the month of July, 2023.
Expenses Recorder - Past Month Spending Chart Example
A snippet of an example list of expenses for the selected month.

Budgets Page

I can seamlessly add or remove budgets, giving me complete control over my finances. Each budget contains sub-entries that contribute to the total amount for a given category, allowing me to break down my spending and manage my money more effectively. This detailed approach helps me stay on top of my expenses and ensures I can make informed financial decisions.

Expenses Recorder - Expenses Month Summary Example
A snippet of the budget page, where I am able to modify the amounts to fit my financial needs.

Final Thoughts

This project has taught me a lot about developing web applications, significantly enhancing my skills and confidence in this field. Through extensive research on coding and designing user interfaces and user experiences, I gained valuable insights and practical knowledge. It provided me with a solid foundation in how web apps work, enabling me to tackle similar projects at work with ease. Overall, this journey has been incredibly rewarding, equipping me with the essential tools and confidence to excel in web development!

Trip Expenditures

With this tool, I record trip expenses seperately, which helps me analyze my spending habits specifically during trips. This feature not only allows me to see where my money goes when I'm traveling but also helps in better financial planning for future trips. By understanding my trip-related expenses, I can budget more effectively and ensure that I stay within my financial limits while still enjoying my travels.