Expense Tracker using React

The Expense Tracker project is a web application developed using React. Its main purpose is to assist users in keeping track of their expenses. With this app, users can easily add and delete expenses to view a summary of their spending habits as well as it will show the available balance the user has left. Building an Expense Tracker with React helps users learn. Also allows them to practice creating web applications.

Let's have a quick look at what the final application will look like:

Steps to Create Expense Tracker in React

Step 1: Create a new React JS project using the following command

npm create vite@latest expense

Step 2: Change to the project directory

cd expense

Step 3: Install the requires modules

npm i styled-components

Folder Structure:

👁 gfg

The updated dependencies in package.json will look like this:

"dependencies": {
 "react": "^19.1.0",
 "react-dom": "^19.1.0",
 "styled-components": "^6.1.19"
 },
 "devDependencies": {
 "@vitejs/plugin-react": "^4.6.0",
 "vite": "^7.0.4"
 }

Example: Write the following code in respective files

• App.js: This component is responsible, for rendering the layout of the application.
• AddTransaction.js: This component allows users to add transactions.
• OverviewComponent.js: This component displays the balance along with an "Add" button.
• Tracker.js: The component that brings together parts of the application such as overview transaction list and addition of transactions.
• TransactionItem.js: This component is responsible, for displaying transaction details including description, amount and a button to remove it from the list.
• TransactionsContainer.js: This component. Filters the list of transactions. It offers a search input field and displays only filtered transaction items.

Steps to run the project:

• Type the following command in terminal.

npm run dev

• Open web-browser and type the following URL

http://localhost:5173/

Output: