monalizadsg / my-budgetapp

personal expense and budget tracker built with react and material ui

HomeExpensify | Expense Tracker

A simple web application to track income and expenses. Our motivation to build this project is to create something that we can use in a day-to-day basis. We (I and my husband) decided to create this personal project as we want to manage our finances. He built the backend API, and I developed the frontend. It has the functionalities that we need like add, update and remove expenses/income, and set a budget by category with a set of period (weekly, monthly and yearly). Moreover, there are features currently in the pipeline that we plan to add.

Tech stack:

• Create-React-App for bootstrapping the project
• Material UI as component layout
• React-router-dom for routing
• Axios for HTTP requests

Features

• User authentication
• Transactions - Add transactions with description, amount, date, and category.
• Filter transactions - Track expenses/incomes on weekly, monthly and on a custom basis.
• Pagination - Display 10 transactions only per page.
• Categories
• Budgets - Set a budget for each categories by period (Weekly, Monthly, Yearly).
• Filter budgets - Track budget on weekly, monthly and yearly basis.

Future Enhancement

• Export report
• Graphical representation of the data
• Add receipt picture for future reference
• Manage currency
• Filter transactions by category
• Manage category

Run locally

Server

• Follow this repo

Client

• Clone the repo https://github.com/monalizadsg/my-budgetapp.git
• Open the project in VScode
• Run npm install to get the required packages
• Run npm start to start the client at http://localhost:8080
• Use username [e-mail] with the password userdemo to sign in