Expenses planner SPA

This is a small single-page app that I decided to create with a bit of inspiration when I was thinking about buying a few things but had some troubles figuring how to spend my money reasonably.

I bet everyone has such a moment when with a given amount of money they have to decide what they are going to buy.

The idea

The idea behind the app is to make it easier for a user to make a decision, to free him from calculating his budget over and over again. Let's just make things easy, add an item and a price, see how much do you have and decide whether you will buy it from the start or maybe a bit later.

The task

Let's start with a DB that will contain all the information, items, budged, and so on, then add here a front-end that will show it and allow move items, exclude some of them from calculations, maybe add a couple of separate lists for items with a different priority. That sounds just about right.

The process

I'm going to describe the process of developing the application and how it was changing, getting some new features in the process, and extended functionality by showing some model images.

Let's start with the basic functionality that I have planned - a list of items with a price and some "action" buttons to manage items.

Here we have a list of items with names, prices, and a bunch of icons for each one. They are "hide - show", "swap", and "delete", respectively. The last icon will collapse all icons to preserve space in the list. Pretty quickly I realized that I will need not one but at least 2 lists - for important itemsand other items. Se let's just step a bit further with it.

Now I have 2 lists. For now, I'm good with it, but for the future, this is a place to upgrade the app by making it possible to create lists by the user himself, as many as he wants.

Another new thing here is a set of fields to add items to the list. The only thing missing here for a bare minimum is a budget and some configuration link to change it.

With 3 fields added I can know calculate how much money will I spend and how much will I have left.

The "Show - Hide" button will not hide an item but rather exclude the item from calculations, in other words, its price will not be subtracted from the budget while still having the item in the list.

The "Switch" button will move the item to another list.

Now I feel like I have too few options to mark my items, so I'm going to add the "Favourite" icon to the item and let it be on top of the list if it's marked. Another thing that I thought would be good to have is a currency switch. What if I want to go on vacation to another country? It would be a pain to convert all costs from $ to another currency before adding the expense to the list. So let's add a switch on top of the app that will change every cost to another currency. In addition, it would be nice to be able to add items directly in 1 of 2 currencies and calc the money left accordingly.

That's pretty much it for now. The UI in the pictures above is a bit different from the app since it's just a mockup from XD, but the features here are described more or less accurately. Now I'm going to show App's UI and bit's of code that make things work.

Let's see what did I create based on those plans...

From the first glance, the app has a slightly different layout, but still let's just summarize what do we have here from the start:

• Header with 4 types of summaries: Starting budged (green), then subtotal of expenses from the first list, subtotal from the second list, and Total of money left when all expenses are subtracted.
• Left from "TOTAL" I have a currency switch with 2 interesting currencies for me.
• Just above that switch is an icon for a config, it calls a pop-up where I'm planning to have a couple of fields to set up the budget.
• In the main area, there are 2 lists, each has a title, subtotal of expenses in the list, items, and a component to add items to the list.

Now let's look closer to some parts.

Adding the item component has 3 steps: add a name, pick currency and add price.

From each step I can go back 1 step or to the beginning, click on buttons, or hit enter. No matter what currency I will pick the app will convert the price to the app's current currency, so all prices and totals are always consistent. When Item is added, it will trigger recalculating all over the app and try to update the cloud-based DB.

Let's see how quick actions (icons) work if I need to delete the item or so something else.

This is a quick demo of disabling an item, marking it "favorite", moving an item to another list, and deleting an item. Here is also shown a switching of the currency.

The result

I had this app on hold for quite a while since I started working on this blog, hopefully, I will soon work with it a bit more and get it ready for deploying. For now, it's still not ready. I know it's a bit clunky, UI requires some work, and there a plenty of small things to do, not to mention the need for refactoring since I did it quite some time ago and with my current experience I probably can do most of the functions in a better way.

Long term list of improvements

1. Add the ability for a user to add lists, to name, and to rename it.
2. Add "edit" to the price and the name of the item.
3. Connect to the currencies API (disabled for testing purposes)
4. Add functions to a config pop-up: set budget, set currencies.
5. Add somewhere exchange rates for currencies
6. Add mobile layout (never thought of going for mobile, but that would be nice)
7. Add Tailwind CSS and refactor styles
8. Refactor multiple states, change useState hooks for a useReducer (now when I've used it that seems an obvious choice), or go for a Redux to learn that incredibly popular tool.
9. Maybe add authorization and save user settings to DB

Stuff used to create this app

• React (Create React App)
• Strapi CMS for a backend, the simplest config with just a few tables.
• Strapi CMS deployed to Heroku and connects to a cloud-based DB
• MongoDB Atlas contains my DB

In the end, I'm planning to deploy it on Heroku or Vercel hosting.