BetterBudget is a JavaFX-based budgeting application designed to help users manage their savings and transactions. With its easy-to-navigate interface, BetterBudget offers users a way to visualize their financial transactions, set saving goals, and receive suggestions for improving their financial management.

• Statement
• How to Use
• Technical Outline
• Objectives
• Dream Objectives
• Contributors

Our final project for Colgate's User Interfaces course is a budgeting application that helps users manage their savings and transactions. The goal of the application is to help users visualize their financial transactions, set saving goals, and make suggestions on where to reduce spending or allocate extra money. The application will showcase our proficiency in JavaFX, graphical user interfaces, and software design principles. The program was created to address a problem we see in the financial applications that we use. Often, the applications that give you up-to-date info on how much money you spend and receive, such as bank statements, do not include tools that help you manage your finances. These tools should do things such as break down the nature of your transactions and give relevant analytics, set budgeting goals, or list things that the user needs or wants to pay for. This application integrates these features into a single package, thereby addressing the aforementioned problem.

To get started with BetterBudget, clone the repository to your computer. Simply run the BetterBudget.exe file to start the application! You will first see a login screen, which allows you to either log in or create an account. The app already includes a mock user account that contains pre-populated data; if desired, you can use these login details to access this account:

• Username: Zul
• Password: Ahmedd

Once you launch the application, you will see four tabs:

• The Budget Input tab allows you to set a budget for your spending. After you set a budget, you can add spending amounts in different categories, such as entertainment and food, and the app will calculate how much of your budget that these categories have used up.
• The Budget Overview tab visualizes the data on the previous tab using charts to help the user compare the different spending categories and their amounts.
• The Transactions tab allows you to add specific transactions and payments you have made.
• The Transactions Breakdown tab visualizes how much you have spent on each spending category across different months in the current year.

The .java files that contain the code for the application can be found in the directory: app\src\main\java\com\budget\budgettracking, and consist of these classes:

• User class manages user accounts

• LogoTransition This is what does the logo animation. Interpolates upwards by translating

• App runs the application and initiates the scene switching

• LoginScene Holds the initial scene after the splash screen animation.

• MainWindow from here or register a new account with RegisterScene

• RegisterScene Here you can register your user and will be saved into data.csv

• MainWindow.java contains the main TabPane holding the following tabs:

  • BudgetInput.java allows the user to create and view Budget objects
  • BudgetView.java allows the user to visualize charts of their Budgets
  • TransactionInput.java allows the user to log transactions and assign them to a budget
  • TransactionView.java allows the user to view a line chart of transactions over time

• Budget objects represent budget categories

• BudgetList stores Budget objects

• Transaction objects represent user transactions

• TransactionList stores a list of Transaction objects

• ImageRectangle is the logo used in the Animation, Logging in, and Registering. Works as a container.

• DataStorage Handles complete File Persistency, and creation and deletion of certain objects like Budget, Transaction, and Users.

• data.csv Where All data is stored and then loaded into the application.

Many design choices in our application, such as the use shades of green as the main color theme for our application and the use of charts to visualize the user’s financial data, were informed by the design of other finance applications. The charts are important because they help users gain meaningful insight from raw user financial data, such as their spending on certain categories over time and how much a category occupies their budget. The use of TabPanes separates the different components and workloads of the application, such as transactions/budgets and their charts, so that the user isn’t overwhelmed by a large window comprised of multiple workflows.

1. Create an attractive and visually appealing intro screen and overall user interface
2. Implement a login screen for accessing persistent user data
3. Design a page for creating Budget objects
4. Develop a transactions page for inputting and storing individual transactions
5. Create transaction trends and metrics visualization
6. Implement spending category breakdown
7. Add smooth animations for transaction-related actions
8. Implement drag-and-drop functionality for easy organization
9. Design data persistence and file handling system
10. Ensure application resizability and responsiveness
11. Integrate back-end data between modules
12. Provide suggestions and allowances based on user spending habits

1. Implement real-time suggestions and feedback based on user spending habits
2. Deploy the application either as an executable or web app
3. Create an automated testing harness

• Malcolm Bell
• Minh Tao
• Zul Ahmed
• Lily Tran (unofficial contributor)

We would like to thank our project members for their hard work and dedication in creating BetterBudget.

• Zul: For the beginning part of the project, this is what I was trying to get right. I was trying to get a visually appealing splash screen/intro animation. Which took a long time. I had to do a lot of research and reassess my knowledge because I thought it would be similar to my other experiences, but it was a different thing entirely. In the end, I got it done, and I was really happy with not only the result but the process that I came to because I thought it was really clever and utilized other resources and Applications well. I also pioneered on the color branding and the theme which was after this hex code #00BB62. Furthermore, I designed both renditions of the logo and implemented it into the code when needed. The logo was made with the BubbleBody Neue font. User Auth was harder than it looked because I wanted to simply copy and use my older project’s login scene but it was so closely tied to the backend of that project that it made it very difficult to do so. I then remade it in a different format but with similar elements. This was different from what I had before because this loginScene wasn’t based on a class of Scenes, rather a file-by-file basis. Data persistence like that isn’t something I was experienced with, however, I was able to find a solution that worked for our application and add in the User Authentication. This came thanks to Riley who helped me on 2 occasions so I really thank her for the resources to look at and her code which guided me in the right direction for where I wanted to go with this. Towards the end, I also stitched the backend and frontend together once the frontend was developed. As of yet, Data Persistence with whole application works
• Minh Tao: I was responsible for implementing Lily’s color palette into our program via CSS. I was also responsible for selecting and implementing a font for our entire application. I settled on the current font for our program because as a finance app, we want the font to evoke a sense of security and reliability, so we wanted our font to strike a balance between not looking too outlandish or too generic. The pages displaying the user’s transaction list and breakdown graph comprised the bulk of my work. I carried over some knowledge from my Project 1 work to improve the functionality of this page, such as input validation and the use of a delete button in the table. The page was also the initial testing ground for implementing Lily’s design palette and my chosen font before they would be used for the rest of the program. After the project concluded, I built and packaged the application into an executable that allows any user to simply clone the repository and run the executable to use the app. Overall, I am happy with my contributions to the application's design and deployment.
• Malcolm Bell: I was responsible for the BudgetInput and BudgetView pages, which required front-end development as well as backend integration for managing Budget objects and their interactions with transactions. I also took on a large planning role in this project. I used tools like Canva and Trello to map out the design of our project architecture as well as create a roadmap for the project’s objectives. I learned how to build upon my knowledge from my SpendingTracker project to shape the Budget interfaces. I learned how to use new features such as PieChart and StackedBarChart, which came with difficulties. I was able to tackle these challenges through research, experimentation, and help from Professor Fourquet and my classmates.
• Lily Tran: Lily is an unofficial contributor to the project and friend of Minh. She created and designed a color palette at Minh’s request; the palette informed the colors and design details used throughout the application.

Thanks to our Professor, Elodie Fourquet, and all of our wonderful classmates. Collaboration with our classmates throughout this course allowed us to learn how to use unfamiliar features and reinforce our understanding of concepts we used readily.

• JavaFX CSS Skinning

• StackedBarChart

• PieChart

• OpenCSV

• Hanken Grotesk (font) - Google

• Bubbleboddy Neue (font) - Zetafonts

• Berns, Roy S. Color Science and the Visual Arts. John Wiley & Sons, Inc., 2000.

  • Helped us understand complex color concepts

• Yau, Nathan. Visualize This: The FlowingData Guide to Design, Visualization, and Statistics. John Wiley & Sons, Inc., 2011.

  • Helped inspire and guide us in visualizing financial data

• Spolsky, Joel. User Interface Design for Programmers. Apress, 2001.

  • Gave us inspiration for our interface and how to integrate principles of design