The Expense Tracker App is a React-based application that allows users to track their expenses, manage transactions, and view their financial balance. It provides a user-friendly interface to add new expenses, categorize them as income or expenses, and view a summary of their financial activities.
https://expense-tracker-saif.netlify.app/
- Add new expenses with a name and amount.
- Categorize expenses as income or expenses.
- View the total balance, income, and expenses.
- Edit or delete existing transactions.
- Mobile-responsive layout for easy access on all devices.
The app is built using React, taking advantage of the useState
hook to manage the state of expenses. It consists of several components, each serving a specific purpose:
-
App Component: The main component of the application that manages the state of expenses. It includes functions to add and delete expenses, which are passed down to child components.
-
ExpenseForm Component: Allows users to add new expenses. It captures user input for expense name and amount and triggers the
addExpense
function in the App component when a new expense is submitted. -
ExpenseInfo Component: Displays the total balance, income, and expenses based on the data in the
expenses
array. It calculates the grand total and separates transactions into profits (income) and losses (expenses) using thereduce
method. -
ExpenseList Component: Renders a list of all expenses. It iterates over the
expenses
array and renders aTransaction
component for each transaction, providing options to edit or delete the transactions. -
Transaction Component: Represents a single transaction in the list. It displays the name, amount, and options (edit and delete) for each transaction. Additional options appear when the user hovers over a transaction.
- Clone the repository and navigate to the project directory.
- Run
npm install
to install the required dependencies. - Run
npm start
to start the development server. - Open your web browser and visit
http://localhost:3000
to access the Expense Tracker App.
- React.js
- CSS (with CSS modules for component-specific styles)