Financier running on the “budget” tab

Hello! I have been working on Financier since January 2016 and I’m really excited to share it with you all. 😄 I built Financier to provide a way to budget based off of the zero-based budgeting and the envelope system. I wanted to share some of my thoughts and ideas when building Financier:

Full offline functionality

Financier running with the wifi turned off (and then refreshing the page)

Due to the nature of budgeting software (it’s kinda like a spreadsheet), why shouldn’t the software work offline?

Using normal, already-widely-supported-across-web-browsers technology can make this possible. Open source tech such as PouchDB and Service Workers (falling back to Application Cache) along with an SPA framework (like Angular 1) makes this process seamless.

You only need to visit Financier once with an internet connection to use it fully offline. Once you come back online (and you’re using the premium service), Financier will seamlessly sync with your account.

As a bonus, if you are online while using Financier, any other devices with that budget open will receive changes instantly — Google Docs style. You can collaborate with your spouse while having a phone conversation to budget out the month while you’re both in different locations.

2. Feel like a spreadsheet (and not a CRUD webapp)

When you have been working with web apps on a day-to-day basis, traditional CRUD apps have a certain “smell.” Things like non-instant feedback (needing to talk to the server to get an answer when you switch a month in the budget view), or not allowing to the user to do certain things (restricting the user from going to the budget for months too far in the future/past) are all things that I wanted to avoid. It’s just bad UX.

Because all of the computations are done in the frontend (and the database just stores the atomic records), the user can get instant feedback and can write a budget for 1965 if they wanted to.

Some might argue that a backend is needed for the computations. It’s not. By only calculating the differences (for example, when adding a transaction, add the transaction’s value to the balance instead of recalculating everything), the app can be very performant. By using a virtual list for the transactions in the account view, the page can stay performant with loading and scrolling thousands of transactions without needing to add UX crutches and place the burden on the user with patterns such as pagination or infinite scrolling.

Turns out that Angular 1’s dirty checking model is actually quite performant (or at least performant enough) once you optimize your DOM.

3. Certain functionality needs to be there

A net worth report for keeping you motivated:

Financier’s net worth report

The “red right arrow” option for allowing you to use Financier even if you’re underwater with debt:

“Red right arrow” feature

Ability to assign income to this month’s budget or next month’s:

Assign income to “this month” or “next month”

These things are all included in the first release.

4. There needs to be a usable free version

By designing an offline capable web application that can work and persist data on your browser without communicating with the backend, there is an interesting possibility for the distinction between a free and paid version:

Make the paid version sync with the backend for sharing your budget across devices and backup to the cloud. Allow the free version to work, but it won’t sync (the data will persist locally on your machine). If you clear your browser data or lose your computer, you’ll lose your budgets.

5. It needs to be usable without signing up

I couldn’t tell you how many times I’ve bounced from the landing page from some startup due to some shitty signup form before I could demo anything. This is why once you go to app.financier.io you can immediately get started budgeting. Furthermore, once you sign up for the paid version all of your budgeting data you wrote in the free version will start syncing.

Financier is personal budgeting software done right.

You can see it in action at financier.io.