The Expense Tracker Application is a web-based tool designed to help users keep track of their expenses, manage transactions, and analyze spending patterns. The application is built using Node.js and MongoDB at the backend, with TypeScript used instead of JavaScript for improved type safety and developer experience. Below is an overview of the main pages included in the project:
The homepage serves as the main interface of the Expense Tracker Application. It provides users with an overview of their financial data and various tools for expense management and analysis. Key features of the homepage include:
- General information section displaying statistics such as the number of transactions, total income/expenses, and upcoming payment details.
- Graphs section presenting visual representations of expense categories and monthly summaries.
- Transaction history section showing recent transactions and past 30-day records.
- Navigation menu for easy access to other pages within the application.
The transaction form page allows users to input new expenses or income data into the system. It provides a user-friendly interface with input fields for specifying transaction details such as name, type, amount, category, description, and date. Key features of the transaction form include:
- Options to specify transaction type (income or expense) and payment method.
- Automatic calculation of transaction intervals for periodic transactions.
- Validation checks to ensure all required fields are filled out correctly before submission.
The dashboard page offers users a comprehensive view of their financial data through interactive charts and graphs. It provides insights into spending patterns, category summaries, and monthly trends. Key features of the dashboard include:
- Pie chart and bar chart visualizations for category summaries and monthly expense trends.
- Line chart displaying monthly income and expense rates over time.
- Dropdown menu for selecting specific months and years for data analysis.
The login page allows users to securely access their accounts by entering their credentials. It provides a simple form for users to input their username and password, with options for account registration and password recovery. Key features of the login page include:
- Input fields for username and password authentication.
- Links for registering a new account or resetting the password if forgotten.
- Error messages for invalid login attempts or missing credentials.
The project follows a modular structure with separate HTML, CSS, and TypeScript files for each page. Additionally, it includes a static directory containing bundled TypeScript files and external dependencies. The style directory contains global and page-specific CSS files for styling the application.
To use the Expense Tracker Application, simply open the homepage.html file in a web browser. From there, you can navigate to different pages using the provided links in the navigation menu. To add new transactions, access the transaction form page (form.html) and fill out the required fields. For a more detailed analysis of your financial data, explore the dashboard (dashboard.html) for interactive charts and graphs.
To run the Expense Tracker Application locally, follow these steps:
- Node.js installed on your machine. You can download it from nodejs.org.
Read the README.md file in the backend folder for the backend setup.
Read the README.md file in the frontend folder for the frontend setup.