This is my proudest accomplishment in web development.

If you look at my other projects, you can see that I'm slightly obsessed with creating tools to help people track their finances. This, right here, is the real deal version of all of that.

Complete will a fully customizable dashboard, OAuth, tutorial system, and a PostgreSQL database, this thing looks beautiful and has a pretty complex database. I've put a ton of thought and effort into this (27,000 lines non-boilerplate code!), and I've learned a ton about React throughout the process.

I think this project speaks for itself. I've included some images and description below, but I'd advise checking it out hands-on. You can create a temporary account, and use the application fully without entering any personal information, by using the "Sign in with Temporary Account" feature here. Or, you check check out this demo below. Try dragging things around and clicking stuff!

Note: this demo is a roughly cloned version of the real site, using pre-loaded data instead of a database. You may run into issues, and this is likely out-of-date. Once again I will plug the Full Site if you haven't checked it out yet.

The Design / UI Features

I think I really nailed the design here. I tried to keep it simple, sleek, and modern. A good example of that is the tutorial/walkthrough that plays when you create your account, to help the user get familiar with the UI:

When I'm designing the UI, I try to think of ways to break things as I go. Usually that ends with me spending hours on something that I thought would take 20 minutes, but the price is worth it (most of the time). I strive to make things flawless.

It's all in the small details for me. If the interface you're using looks like a grid, you should be able to navigate vertically using Enter and Shift + Enter, instead of just tab. If there's a popup, your keyboard focus should be moved to the popup, and the first and last focusable elements should exist in a loop. If there's a way to drag something into a different position, it should feel like you're actually grabbing and dragging the thing.

Robust Saving System

Since I'm using Supabase's free tier for this project (and also because it's good UX), I created a clean way to collect changes that the user makes in the dashboard, and apply them once the user hits save.

Unsaved changes are indicated by the green color, which applies to value changes, sort order changes, and also when a user moves/resizes a tile or changes it's settings. Also, notice in the graphic below that the tiles showing account balances and category totals on the left are changing with the data as well.

Customizability

The main goal for this project is to create something that is as customizable as an Excel spreadsheet, but without all of the jankiness of Excel. That is quite an ambitious goal, and it takes a lot of hard thinking for me to come up with the features to accomplish that.

The dashboard is fully customizable, and the user can add tiles and configure them however they'd like. Right now, the only tile (besides the transaction manager) is one called the Simple Values tile, which shows current values for your categories or accounts. With these, you can exclude specific categories and accounts, as well as select the date period you would like the data to pull from.

For example, the configuration below will show me how much money I'm spending on each category since my last paycheck, excluding car payments:

The logic for this tile was a bit of a mental challenge, because there is a two-week limit on how far into the past transactions will be loaded on the client (unless the user intentionally loads more). Because of this, the tile fetches the values from the database, then subtracts the "default" values that the client has loaded, and adds the "current" values back. This way, the tile will always be accurate, and can reflect when the user's actions in the transaction manager changes those values.

The Client Directly Queries the Database

WHAAATT??

See, I really wanted to make this app very "modern". In my previous version of this idea, I built a fully functional backend myself, complete with a local SQL instance, type-checking middleware for API routes, and proper HTTP status codes. And while I recognize that a lot of companies like to keep reliable standards in place (which I don't mind), since this project is entirely new, I wanted to give bleeding-edge technology a try.

As for the backend, I decided to use a relatively new service called Supabase. Supabase uses PostgreSQL (also referred to as Postgres) as its database language, and provides its own OAuth integrations to make setting it up a breeze. Now here's the part that I think is crazy: Supabase and PostgreSQL are designed to be queried from the Front End. That sentence alone might send shivers down an InfoSec pro's spine.

See, PostgreSQL has a built in feature called Row-Level Security, which allows you to define policies on what actions a user can do in a database, and restrict the data that the user is returned. You can also implement triggers that check the type of data a table is receiving, and either accept or deny it based on some condition. You can define custom data types, check the structure of a JSON column input, you can even implement a system that allows users to share their data with eachother easily. If you set up your Postgres tables to strictly enforce access and schema validate all of your inputs, you take away the need for a server to exist between the client and the database.

Maybe this idea isn't that crazy or new, but I find it pretty exciting. Even if a bad actor digs around into the frontend code and wants to do some damage, they can't. Everything is enforced by the database, and since there's no middleman, submitting and fetching data is a lightning fast process.

Plans for this project going forward

What I have here is really cool, but there is still a lot of features that I'm working on implementing and refining.

For example, right now there is a custom history system in place that overrides the browser's default undo/redo process (Control+Z and Control+Alt+Z). This system keeps track of all of the changes you make within the transaction manager, meaning that you can undo/redo sort order changes, creating items, deleting items, as well as changing values. However, right now it is slightly janky. You can break it if you really try, by deleting/creating items and adjusting the values within them. I would like to fix that and expand this system to capture history for every interaction on the dashboard, including moving/resizing tiles.

I'm also going to add different types of tiles the users can customize, such as graphs/charts that show whatever data you'd like, budgeting tools, and even maybe a little AI tile that gives you tips on how to cut back spending.

And of course, I'd like to refactor some of the code. A lot of the stateful data and logic is abstracted into custom hooks, which is great, but those hooks are packed with a lot of somewhat confusing code that I'd like to organize.

I would also like to add formal JSDoc descriptions to all of the parts of each hook that can be interacted with from the components. That would provide helpful tooltips when hovering over objects and functions while working with my code, which helps other developers (and future me) understand what the code is doing.