How I build my Personal Expense Management App and what I learn from it

About the project

The idea of the project is so simple, I wanted to track my expenses, but I didn't found any applications that easy to use or fits my needs. So, I've realized that I want to build my own, super simple, and with functionality that I need.

Development process

The first question was "How I'm going to build this?". Because every time when I start a new project, I build this for 1-2 weeks and that's it. Well, with this project I've decided to do this a bit differently. I wanted to be involved in every process of building the software. From making designs, asking users for feedback, testing, and actually building the app. It takes more time to build the product, but it's so much fun, because I started to understand how my teammates work.

Project Management

I've always loved the ability to see a ticket, have some planned things that we're going to build without everyday update. The way I work on this project is "real-world" like. I use a Shortcut to add all my tickets, epics, and iterations. Whenever I have a question, or idea, I just open Shortcut and add this somewhere as a ticket to investigate.

Every Sunday I start planning my one week iteration, I just simply add new tickets to the iteration and set estimation for each. It's just a points of how hard the task is. In my case I have around 15-18 points in the week. It gives me the chance to work on this project just for a short time in the evening without overwhelming.

The problem I had before is that I wanted to build everything just right now and I always skip some small issues, because I was thinking "I'll fix it later", but I've never tracked these issues, so at the end I had some app that has a lot of issues.

Design and making decisions

I don't know how about you, but I've always had problems with creating design first and then building the application. Because for me it was so easy to build the app and see the result, rather than draw some UI in design tools. But with this project, I've tried to do this in a different way. I've implemented design first, and then started to build the app. I'm using Figma and it's so useful.

The cool thing about making design first is that you can try to play with components, to investigate what UI is better for you. You just simply drag elements, until you love the result. Here is the example of how I draw 3 versions of the input to add new expense. It took me just a few minutes, and no code at all. It saved me a lot of time and now I understand how design is matter.

What about the Back-end?

This part was really fun. The short version is I don't have Back-end. But the long version is that I'm using Supabase. It's the real PostgreSQL database, you can configure tables as you want and just use it. So, I added a database to my application for an hour and it works. I'm still going to write real back-end, but as I'm focusing on the Front-end at the moment, this thing is so useful and saves me a huge amount of work.

Do you write test for your application?

Yep! And it's another huge thing for me. The way I started to test application now is by using Qase. This helps me to write manual test cases for my features and when I finish the work, I can run all test cases step by steps and check everything manually. It's nice to have things like this, because when you test something, you can forget small details about the requirements, but with this thing, it's like documentation for QA.

Another thing that I'm going to do will be adding Cypress to test most of the test cases automatically because I'm an engineer and I don't want to spend so much time to do something that I can automate.

How to stay motivated?

Just ask questions about the project to the community. Seriously! For me it was something unusual when I've asked people to share their opinions about the idea of the project and there were a lot of them that shared some knowledge, experience, ideas, and wishing me to finish this project. It motivated me a lot, because I know that I'm building something that people want.

What are my next steps?

Currently, I have a Home page, that gives you an ability to add/remove/restore expenses. I don't have any component library and everything is built with just SCSS.

1. I want to improve some things, like change some UI for those who prefer a mouse, because I'm a huge fan of doing as much as possible with keyboard but for some people mouse it's still the tool for making some actions.
2. I'm going to add more tests, before I'm going to update some logic, to make sure I didn't break anything that works already
3. I really want to keep asking people for feedback, because they usually have more ideas than you might think, so I have plans to do this here and in Twitter. I've created a new account just to post everything about the app changes and let people decide what I build.
4. Learn Xstate, because I love the way it works and I want to try to use it in a real project and see how it goes.
5. I'm not sure, but I think it's a good idea to have some place like GitHub Discussions to store everything about the project there, to let Engineers discuss some features as well. At the moment I don't have somebody to discuss, so, we'll keep this as "nice to have".
6. Start building API. I'm still don't know what to use, I know I can do this with Node.js, but maybe it's a nice project to start to learn something new, like Ruby on Rails. Haven't decided yet 😂
7. Improve my knowledge of design