Creating Total Slice: My Personal Takeaways
Presenting my personal reflections on creating Total Slice, a personal finance tool that uses visualizations to help people gain a better grasp of their finances.
As a student who came into the Qoom Creator Group this Summer 2021 with mostly front-end experience, I wanted to challenge myself to get a little more comfortable working with the backend. I found that working with Qoom's database easy to use for account authentication, and user data and helped make my project Total Slice a reality during the course of the program.
Inspiration
Total Slice was inspired by my own personal experience trying to figure out my personal finances. For some reason, I found that my banking and bill statements, seeing plain numbers on a page, did not help me to understand where my money was going. This is perhaps due to the fact that I am more of a visual learner. So, I wanted to find a way to help those who were more visually-inclined see what is going on with their money to give better context. Thus, Total Slice was created.
Early Wireframe Prototype of Total Slice
Main Features
Total Slice is a working website that includes the following features:
- Pie Charts generated by Plotly.js
- An Itemized Monthly Budget Breakdown
- Total Slice Status Bar
- A Currency Converter using ExchangeRate-API
Once the user signs up for a free account, they can log in and go into their dashboard. Inside the dashboard houses the budgeting form where they can fill out their monthly income as well as expenses that apply to them. Once they hit the 'Calculate Results' button at the bottom of the form, pie charts are dynamically generated to help visualize their total monthly income vs expenses as well as an itemized breakdown showing the the income/expense types and their dollar figure amount. Finally, the Total Slice status bar updates to tell the user in plain terms whether their expenses outweigh their income for the month or not. The status bar also tells them to look into particular expenses that take up greater than or equal to 50% of their monthly income so they can make any necessary adjustments.
An extra feature I implemented was the currency converter to practice using APIs. It uses the ExchangeRate-API which gives reliable up-to-date currency exchange data that is easy to use.
I also included some personal finance blogs, videos, and wikis in the Resource section of the Total Slice website to help better educate my users on personal finance. It is my hope that Total Slice can be a useful tool to help people better understand the state of their money and can help people make more informed financial decisions.
Lessons Learned
During one of the Tech Talks, we learned about Regular Expressions (Regex), which could be used to help filter form data. With a bit of practice, I managed to incorporate regex into the input areas of the Total Slice's budget form to prevent the user from inputting anything other than dollar amounts and thus prevent errors from happening.
Here's a code snippet that shows regex syntax in the pattern attribute inside the input tag:
<input type="number" name="income" id="income" pattern="/^[0-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/" step="0.01" placeholder="Enter Your Income" />
Another lesson I learned was understanding the javascript functions for Open DB, Qoom's database. I had to go to a few office hours to understand what the async functions do and the difference between GET, POST, and PATCH methods. From there, I learned how to add form data to the database using javascript as well as updating the form data within the database and having that reflected in the pie graphs, the itemized budget breakdown list, and the Total Slice status bar.
Final Thoughts
The Qoom creator group provided a great learning experience for me. Having the chance to help develop a project on the Qoom platform with the guidance of the Qoom founders and staff alongside a cohort of peers helped me improve my coding abilities, pick up new skills in design, wireframing, and using APIs, and challenged me to get out of my comfort zone and create a project in an area not familiar to me. I am definitely interested in exploring how to create more fintech-related apps in the future, and Qoom has given me confidence to do this.
Total Slice Live Site Link: https://alerthorse44.qoom.space/~/TotalSlice