This project is an expense tracker application built with Angular version 18 for the frontend and for the backend, ASP.NET Web API is used.
The application allows users to track their expenses, and manage thier income and costs bahaviour, and visualize their spending patterns.
This application provides features such as:
-
Adding an expense with the appropriate type and amount
-
Adding an income with the appropriate type and amount
-
Editing and deleting existing expenses and incomes
-
Viewing a summary of expenses and incomes
-
Visualizing spending patterns with charts and graphs
-
User authentication and authorization to ensure data security in frontend and backend
-
Angular 18 for the frontend development
-
Bootstrap and SCSS for responsive design and styling
-
State management for sharing user secure token using RxJs(BehaviorSubject) inside a service.
-
-
ASP.NET Web API for the backend development
-
Entity Framework for database management
-
MySQL for data storage
-
JWT for user authentication and authorization
-
-
Clone the repository to your local machine.
-
Navigate to the project directory and install the dependencies for both frontend and backend.
-
For the backend, configure the database connection string in the
appsettings.jsonfile. -
Run the backend server using the command
dotnet runin the terminal. -
For the frontend, navigate to the Angular project directory and run
ng serveto start the development server after installing the dependencies usingnpm install.
The focous of this app was on connecting the frontend and backend, so the design is simple and basic, but it provides all the necessary features for tracking expenses and incomes effectively.
The app has a responsive design, allowing users to access it from various devices, including desktops, tablets, and smartphones. The user interface is intuitive and user-friendly, making it easy for users to navigate through the application and manage their expenses and incomes efficiently.