Expense Tracker
An expense tracker for effortless finance control
Main Tech Stack: React, Java SpringBoot and MongoDB
Visit the app at https://nidazaki.github.io/expense-tracker-fe/
Architecture Diagram
FRONT-END
App.js
Parent component that controls NewExpense, Expense, ExpenseChart and ExpensePieChart components
Communicates with RESTful APIs to retrieve data depending on user handled events
Handles OAuth Implementation with Google's Sign-In Library
NewExpense.js
Child component enabling users to add new expenses which does a POST call to backend
Expense.js
Manages state and holds data for passing and filtering data between ExpenseFilter and ExpenseList
ExpenseItem.js
Represents a single expense item in the expense list row, handles editing, deleting and creating custom categories.
BACK-END
ExpenseController
Return JSON Response of expenses conditionally filtered by year, month and category as per front-end needs via ExpenseService
POST call to create a new expense, or edit existing one for logged in user.
DELETE call to delete an expense
CategoriesController
Return Array Response of categories created
POST call to add an item to the list of existing category for the logged in user