Technology,  Story

I built my Excel spreadsheet for my travelling trip into a web application... and better

Author

Joan Heimanu Teriihoania

Date Published

This web application is hosted at https://budget.joan-teriihoania.fr.

Every trip I plan turns into the same spreadsheet within a day or two: a column of expected costs, a column of actual costs, and a running total I re-check obsessively whenever I've spent more or less than expected. It works... I think. It just doesn't have a very good UI... and it takes a hell of lot of time to update it, which is time I'd rather spend sipping a cocktail. By the third city on a multi-leg trip the sheet is more patchwork than plan.

So I built a small app that does the one thing a spreadsheet won't: it takes what's left of the budget every single day and redistributes it across the days still ahead. Here's what it's for, how the numbers actually move, and how to run it yourself.

Why not just use a spreadsheet

Because a spreadsheet's daily budget is a number you typed once. Mine needed to be a number that reacts. A flight paid two months in advance, a hotel deposit, a scooter you rent every day, and the €8 you spend on iced coffee are all "expenses," but they don't behave the same way against a budget: one already left your account, one repeats on a schedule, one is the actual day-to-day spend you're trying to stay under. Spreadsheets don't distinguish between them unless you build that distinction yourself, every time, for every trip. And good luck with that... I tried... I don't think anyone should.

So here we are.

How is it structured?

The entire app is a function of a single JSON object called Trip with sections, incomes, expenses, an emergency fund, participants, the currently active day. There's no database and no server*; the file lives on your disk, opened and saved directly through the browser's File System Access API, the same way a native app would. Edit anything and every number on the dashboard recomputes from scratch. Nothing is cached or staged, which sounds inefficient until you realize it's exactly what makes the tool trustworthy: what you see is always a pure function of what's actually in the file.

If your browser doesn't support that API (Firefox, current Safari), it falls back to a plain file picker and a downloaded copy on save.

Incomes

Before you can even plan for the trip, you need to know how much you have. You might have multiple sources of income (especially if multiple people are participating). As such, you can list each income separately and track which one has been received (most notably, unreceived income is not taken into account in the budget calculation). You can also import a list of incomes, if you have lots of them...

Expenses

Obviously enough, a trip has expenses. Before we even start the trip, as well as during it. The app considers three kinds of expenses: prepaid, one off, recurring, and ongoing.

Prepaidone-off, and recurring are known before the trip. They are planned costs (things like flights, a hotel deposit, a weekly scooter rental). They reduce the budget pool up front and shape the daily allowance, but don't count as day-to-day spending.

Ongoing expenses are the actual spend you log day to day (coffee, taxis, dinner). That's what your daily allowance is tracked against, and what drives recalibration (we will talk about it below). Basically, it's what you track during your trip and what actually needs to be monitored the most!

Each expense has:

  • a name so you can know what each expense and payment is for
  • an amount, that's pretty obvious;
  • a category, which is arbitrary and purely informative so you can see the spread of your budget;
  • a date (or schedule for recurring expenses) which is when the payment is planned to be paid if it hasn't already (obviously enough, payments which were paid before the trip should be put in the prepaid expenses);
  • and a status which is purely informative (it doesn't affect the budget calculation) but helps you confirm when a payment has indeed been carried out.

Sections

A trip is broken into sections (legs essentially). Each section has a date range and a coefficient, a weight that says how much more (or less) expensive that leg should be allowed to be relative to the others.

A coefficient of 1.3 next to 0.8 means Bangkok gets proportionally more of the pool per day than Chiang Mai... because you probably already know, before booking anything, that one city would be pricier than the other.*

Settings

The settings page is for general order stuff, mainly the name of the trip but also:

  • the currency which affects the display
  • the secondary currency (if you have multiple currencies involved) which appears as a popover in any amount calculated for the budget from amounts defined in the primary currency using the current exchange ratio
  • a currency conversion feature in case you wanted to convert all numbers in your trip from one currency to another
  • the number of participants which is used by the dashboard to calculate per person costs and budgets
  • and an emergency fund which is the amount that the app will leave as "left over" to account for any surprises you might encounter (hopefully you won't need it, but it's usually better to have it)

Budgets!

Now, the core of everything this app was built for: the budget and the dashboard. As you might have already seen in the Sections, we have different kinds of budgets: base, redistributed, and recalibrated. Let's start with the simplest: base budget.

Before anything is done, the app will take all income and subtract all expenses giving us with an available budget amount. A net positive (usually) that can be used for "every day" activities. This gives us a flat base budget which is then divided per day, and then prorated per trip section. The longer a section, the more base budget it will have.

Now, if everything was so simple I wouldn't need a budget app. As already mentioned above, not all cities are equal. If you go to Paris, the prices are much much higher than in East Asia for example and this you can take into account to create the redistributed budget.

In the Sections, you can define distribution coefficients and lower (or increase) the budget of one section of your trip. In effect, this subtracts (or adds) from the section's base budget xx% and pools it into a redistribution fund which is then redistributed to other sections. Basically, you are moving budgets away (or into) sections depending on how much money you estimate will be needed. This gives us the redistributed budget.

Still not the end though. Budgets don't always go as planned (I could say never). During a trip, you might overspend or underspend your allocated budget and will want to see how it affects the rest of your trip. And that's what the recalibrated budget is for.

In our example, let's say we are in the middle of our trip. So far, we've underused our budget which leaves us more money to spend. How the app takes that into account is simple: what isn't spent is reassigned later. For example, in a 5-day trip, on the first day you had expected to spend 100€ but actually spent 90€, then you have 10€ left to spend. The app will simply take that 10€, divide it by the number of remaining days (4) which mis 2.5€ and apply the readjustment to all remaining days. This way, if you save on some days, you immediately see your future allocation.

Conclusion

There a bunch of other things I haven't talked about, like the account balance evolution over time, the bank statement import, and more. I invite you to try out the budget planner yourself! For me, I'll be going on my own vacation. See ya!

This web application is hosted at https://budget.joan-teriihoania.fr.