Expense-Management-System using Angular and NgRx

This is an Expense Management System front-end developed using Angular and Typescript, NgRx provides state management, isolation of side effects, entity collection management, router bindings, code generation, and developer tools. It uses Local Storage to store data.

The following page shows the expense trend dashboard

The expense management system dashboard is showing home page containing Bootstrap ui components, ng2-charts for pie charts, ngx-datatable for expense datatable.

Features in Expense Management System

• Get total budget when application startup
• Dispatch Update Budget Action when total budget value changed
• Dispatch add expense category action while user creates new expense category
• Dispatch remove expense category action while user deletes expense category
• Load all expense categories using get all expenses categories not deleted selector
• Load expense categories of users by get expense category by Id selector
• Dispatch add expense action while user add expense item
• Dispatch update expense action while user updates expense item
• Dispatch remove expense action while user toggle expense(Tries to delete or undo the deleted expense)
• Get all expenses by Id using selector

Setup

Clone this repo to your desktop and run npm install to install all the dependencies.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Third party libraies

• ng2-charts
• ngx-bootstrap
• ngx-datatable

Module structure

The image below shows module structure of the project