Moving, Challenges, and Building a Personal Budgeting App.

In 2017 I moved to Bed-Stuy Brooklyn and a day later I found out I was hired at Uniqlo. I moved out on a whim, without an income, and it luckily all fell into place. I lived there until school started up again that fall. Flash forward to 2021, I decided to once again move out of my parents’ residence; where I was fortunate enough to live without paying rent and many other perks that I often took for granted.

Was there a mystical correlation between moving and obtaining work that I believed could strike true once again? Partly and truly I am still holding out hope…

I want to live my life taking leaps and chances. Moreover, through this past year, for a multitude of reasons, I found myself getting stagnant. I worked on my portfolio site… and I worked on my portfolio site… and I, well you get it. I just never seemed to get it “right”. Finally after 5 iterations I decided I had to stop redoing it.

One of my portfolio iterations 2020

Another one of my portfolio site creations 2020

Upon moving, I found myself facing a whole new host of challenges. And if art school taught me anything, it is that these challenges can be turned into creative problem solving situations. Having trouble finding a bathroom when out in the city? Why not create a crowdsourced bathroom map app… and so on and so forth.

I am definitely an ideas person. So, now that I am in a new city, with new challenges, I decided to pick one and try to solve it with my own flair.

Budgeting.

I have never considered myself to be a frugal person. Not that I am out here buying extravagant items, but I am very good at making excuses for why I “need” something I really don’t need.

I know there are plenty of apps out there for budgeting… but it was a project I wanted to take on and make it my own.

Manually entering my expense data into an array

My app is still in early stages, in fact it at the time being is fully static — meaning that the data is all entered in the code. It is not yet formatted with a backend and that ye olde CRUD (CRUD is an acronym for the four basic types of SQL commands: Create , Read , Update , Delete) abilities.

As seen in the screenshot of the codebase, I am manually entering my expense data. My favorite to date is the ‘site hosting’ which in the comments reads: “I should cancel this…”.

I am then using this static data and displaying it in a list as well as, and this is the exciting part — for me at least, a pie chart.

For now the pie chart is created with a trial version of CanvasJS React. In order to get the percentages correct for each amount spent on each category I had to do some algorithmic problem solving. It was a head scratcher at first. And honestly upon solving this and creating the pie chart I felt more accomplished than I have in months. Which is truly a testament to the power of coding — that feeling when you’re up against a wall and then make it through to the other side — arguably the best feeling.

import React, { Component } from 'react';
import { expense } from '../Data.js';
import CanvasJSReact from '../assets/canvasjs.react';
const CanvasJSChart = CanvasJSReact.CanvasJSChart;
let sum = expense.reduce((accum, item) => accum + item.spent, 0);
function findPercentage(arr, value) {
  let sumNum = 0;
  arr.map(item => {item.category === value ? (sumNum += item.spent)     : (sumNum += 0);});
  return parseInt(Math.round((sumNum / sum) * 100));
}
class Graph extends Component {
  render() {
  const options = {
  exportEnabled: true,
  animationEnabled: true,
  data: [{
    type: 'pie',
    startAngle: 75,
    toolTipContent: '<b>{label}</b>: {y}%',
    showInLegend: 'true',
    legendText: '{label}', 
    indexLabelFontSize: 16,
    indexLabel: '{label} - {y}%',
    dataPoints: [
       { y: findPercentage(expense, 'Toiletries'), label: 'Toiletries' },{y: findPercentage(expense, 'Home Supplies'),label: 'Home Supplies',},{ y: findPercentage(expense, 'Misc'), label: 'Misc' },{ y: findPercentage(expense, 'Food'), label: 'Food' },{ y: findPercentage(expense, 'Drinks'), label: 'Drinks' },{ y: findPercentage(expense, 'Groceries'), label: 'Groceries' },{ y: findPercentage(expense, 'Travel'), label: 'Travel' },],},],};
 
  return (<div><div>Budgeting Chart</div><CanvasJSChart options={options}/></div>);}
}
export default Graph;

Hopefully I will continue developing my budgeting app and take it from its current static state to fully fleshed out dynamic application. I would want to take more time to research what is out there and what value proposition I could add to the space before making it public. For now it has been a fun challenge… which solves, for me, the not-so-fun challenge of budgeting.

Thanks for reading and stay safe!