Problem
I wanted a personal finance tool that shows where money actually goes: add transactions, group them, set budgets, and see the picture as charts instead of a spreadsheet. It was also a deliberate exercise in running a React frontend against a C# API, the split I expect to work in professionally.
Process
The frontend is React on Vite, with Recharts rendering spending breakdowns and budget progress. The backend is a .NET Web API exposing transaction and budget endpoints, keeping all data logic server-side. The two talk over a small, explicit REST surface, so either side can be swapped or extended without touching the other.
Key Decisions
- A real API boundary instead of local state only: the frontend consumes the same kind of REST contract I would work with on a team.
- Recharts for visualization: declarative chart components that stay readable in code review, rather than a custom canvas layer.
- Vite for the dev loop: instant reloads made the iteration on chart layouts painless.
Outcome
The app handles day-to-day transaction entry and budget monitoring with clear visual feedback, and the repo stands as a working reference of a React client cleanly separated from a .NET backend.