In this web app you can create budget to define your expenses and incomes as unique events or recurrent events as you usually create events for a calendar, in order to plan your budget through slice of time that you can define.

The Budget view has show you one card per moth with three sections. The first section is Category summary, it show the total amount of money for each category that you have defined.

The second section is Timeline, that show the following information:

  • Timeline: show all the events for that month (expenses and incomes) and the estimated balance for that month. Also if you clic on the event you can mark it as paid (for expenses) or received (for incomes). This will update the balance.

  • Balance: section you will see all the money available without expenses for that month and the monthly balance, it mean the difference between the incomes and the expenses for that specific month.

Finally the third section is the Timeline plot, that show the evolution of the incomes, expenses and balance for the the defined range of time on the budget creation.

You can create a account for free using a email and password or Google account, then you can create your budget and start to add your incomes and expenses. Visit the web app to see more details.

Tech used

  • Firebase (Auth, Firestore).

  • React, React router, react context.

  • React-Query

  • Hightchart

  • Mantien-UI

  • Custom Hooks

  • Zod (form schema and data validation

  • Repository-Datasource architecture