Budgeter

2024

A modular ledger of transaction marks and cells meets a large balancing dial beside an ochre field.

Why I built it

Budgeter started with a modest goal: make it easy to see where a monthly budget is going without turning personal finance into a dashboard full of charts. A user can organize spending into categories, record transactions, and compare what has been spent with the budget that was set.

The small scope made the project a useful place to think about the boundaries of a full-stack application. A budget is not just a number on the screen. It is connected to a user, a month, a set of categories, and the transactions that change each category's balance.

How it works

The client is built in React and the API in FastAPI. The backend separates authentication, users, budgets, categories, and transactions into their own routes. SQLAlchemy maps those concepts to the database, while Alembic keeps changes to the schema reproducible.

That separation matters most when a simple action crosses several parts of the system. Adding a transaction, for example, changes the history a user sees and the amount remaining in a category. Keeping the calculation in the API rather than recreating it throughout the interface gives the application one source of truth.

What I learned

I originally used Flask for the backend and later replaced it with FastAPI. The rewrite was less about raw speed than about making the API easier to understand: request schemas, route contracts, and generated documentation made mistakes more visible while I was still building.

The project also taught me that a clean interface often depends on fairly unglamorous backend work. Database migrations, authentication, and predictable error responses do not appear in a screenshot, but they decide whether the interface remains simple as the application grows.

View the source on GitHub

Планер буџета

2024

Мрежа поља и ознака трансакција спаја се са великим бројчаником равнотеже поред окер поља.

Зашто сам га направио

Планер буџета настао је са скромним циљем: да покаже куда одлази месечни буџет без претварања личних финансија у претрпан преглед графикона. Корисник може да распореди трошкове по категоријама, бележи трансакције и упореди потрошени износ са планираним буџетом.

Ограничен обим пројекта био је добра прилика да размишљам о границама full-stack апликације. Буџет није само број на екрану. Повезан је са корисником, месецом, категоријама и трансакцијама које мењају преостали износ у свакој категорији.

Како ради

Клијент је написан у React-у, а API у FastAPI-ју. Backend раздваја аутентификацију, кориснике, буџете, категорије и трансакције у засебне руте. SQLAlchemy повезује те појмове са базом података, док Alembic чува измене њене структуре поновљивим.

То раздвајање постаје важно када једноставна радња обухвати више делова система. Додавање трансакције, на пример, мења и историју коју корисник види и преостали износ у категорији. Када се прорачун налази у API-ју, уместо да се понавља широм интерфејса, апликација има један извор истине.

Шта сам научио

Backend је првобитно био написан у Flask-у, а касније сам га заменио FastAPI-јем. Та промена није била само питање брзине. Шеме захтева, јасни уговори рута и аутоматски генерисана документација учинили су грешке видљивијим још током развоја.

Пројекат ме је подсетио и да једноставан интерфејс често зависи од прилично неприметног рада у позадини. Миграције базе, аутентификација и предвидљиви одговори на грешке не виде се на снимку екрана, али одлучују да ли ће интерфејс остати једноставан док апликација расте.

Погледајте изворни код на GitHub-у