Buccet

The problem

At the end of every month, I do a little introspection into my finances, I call it a "financial audit."🤓 The process involves adjusting spreadsheets and going through the previous month's transactions by printing out bank statements, which is not fun at all, mostly because of the manual labor, but also, most of us aren't proud of looking at our spending habits. I know changing one's financial behaviour takes more than just building an app to tell you where your money's going every month and how you could make changes, but when I thought of it, it sounded like a good idea in my head, and now we're here.

The approach

The approach I wanted to take (and eventually took) with this one was a structured step-by-step process, because it looked like getting to a solution would take a lot of work, so I broke it all down. That's the approach I think all developers generally take, but with personal projects, things usually spiral out of control, it's easy to just not think of the process and just rush to the result. Anyway, here's how I broke things down:

Think of these as stages of development, going from research, all the way to branding, which ultimately gets us to the final solution. In every stage listed above, there's an internal process that differs depending on the stage and what needs to be done in that specific stage. Keep in mind that this is a personal process that I had to outline for myself, and not a guideline for how products should be developed.

01 - Research and ideation

The concept is an app that tracks your spending and draws conclusions from your behavior to help you make changes where necessary. Most personal finance apps focus on tracking income and expenses and leave you to conclude based on the numbers you're presented, that's great, and it works, but I wondered if there's more that could be done. What if the app could make suggestions for improvements? What if it could help you spend less on the not-so-necessary expenses? What about future predictions? What if the app could predict the following month's financial situation based on the previous months? What if it could account for your situation and figure out a path to help you pay off debt?

02 - Structure

Structuring these ideas and considering the approach others have taken is easier said than done. I decided to wireframe user flows to figure out the structure of the app, it made more sense that way.

03 Database design

Designing the database before designing the ui makes sense to me. I wanna know exactly what kind of data I'll be working with, and especially how that data should flow across the app, and this stage helps me figure that out.

04 - User interface

User flow wireframes combined with the database structure tell me enough to start designing the user interface. The brief I gave myself here was simple. I wanted a clean and easy-to-use interface, that's it!🙃 nothing fancy, just keep it simple.

The focus of an app like this is all the numbers users have to be aware of, so a minimal, clean approach makes sense. I also chose to go with the Material Design look and feel, which features elements with a lot of padding and large border radius, making the ui soft and approachable. Also, most phones today have rounded screen corners, there aren't a lot of sharp-corner screens anymore, so this look works well.

05 - Dev - backend

I went with an external service for the Auth layer to ensure security and performance, but also, it would've taken me a long time to develop my own Auth system from scratch; this approach allowed me to focus on all the other parts of the system. It's a simple setup:

• Supabase Auth - for user authentication, authorization and management.
• TypeScript + Node - for rapid development of the API. It's worth noting that I primarily work with these technologies so I may have been a little biased in my choice🙃
• Prisma - for a safer way to interact with database(s).
• PostGreSQL - any SQL-based database would've been fine here to be honest, I picked PostGreSQL because it works really well with Prisma.

06 - Dev - frontend

At this point, I have the ui design, I have the data, and a way to interact with said data through an API, This stage puts it all together. Here's what the frontend setup looks like:

• TypeScript - for type safety, behaviour predictability and less headache-inducing testing methods. An overall better dev experience.
• React.js - component-driven approach for modularity and speed of development. There's that biased choice again🙃
• Tailwind - for the perfect balance between convenience and freedom of customization.
• Framer motion - for buttery-smooth animations and interaction customization, all optimized for accessibility and great performance.

07 - Branding and identity

Finally - it's time to make it pop! Make it come alive, give it a name, a logo, an identity.

Worth noting

I didn't include deployment as a step because it's continuous and, in a way, is part of every iteration, which makes it a step within some of the steps I've outlined.

There's constant back and forth between the ui design, frontend development, and branding stages because they all work hand in hand, making tweaks and adjustments from one stage may require making tweaks and adjustments in the other stage(s) as well.

Finally - The solution

Getting to the solution is almost never a straight-forward path. There's constant tweaking and back and forth between the stages outlined above, but getting to even 60% of the initial concept is a very rewarding feeling.