Expense Tracker

Overview

The Expense Tracker application allows users to manage their financial transactions efficiently. Users can record both income and expenses, view transaction summaries, and update their balance in real time. This application provides an intuitive interface for tracking financial activities.

Features

1. Transaction Management

• Users can fill out the "Expense Tracker" form and submit transactions.
• Transactions are categorized as either Expense or Income.
• The active tab will be highlighted for the selected transaction type.

2. Dynamic Category Updates

• The category list updates based on the selected transaction type:
  • Income: Salary, Outsourcing, Bond, Dividend.
  • Expense: Education, Food, Health, Bill, Insurance, Tax, Transport, Telephone.

3. Real-time Balance Summary

• The balance, total income, and total expense values are updated automatically whenever a new transaction is created.
• The balance is calculated by subtracting total expenses from total income.
• If the balance goes negative, it is displayed in red.

4. Sorting and Filtering

• Users can sort both income and expense lists based on the transaction amount.
• Filtering options are available for categories:
  • The filter for expenses will only show expense categories.
  • The filter for income will only show income categories.
  • If no category is selected, all transactions will be displayed.

5. Edit and Delete Transactions

• Users can edit a transaction by hovering over the transaction amount to reveal the edit menu.
• Clicking "Edit" will populate the "Expense Tracker" form with the transaction's data for modification.
• Users can delete a transaction by hovering over the amount to reveal the delete menu.
• Upon editing or deleting a transaction, the balance summary will update accordingly.

Installation

To set up the Expense Tracker application locally:

1. Clone this repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd expense-tracker

3. Install the required dependencies:

   npm install

4. Start the development server:

   npm start

Usage

Once the application is running, you can:

• Fill in the transaction form and select either "Income" or "Expense."
• Choose categories based on the transaction type.
• View the updated balance and transaction summaries immediately after submission.
• Sort and filter your transaction lists for better management.
• Edit or delete transactions as needed.