Skip to content

Expense Tracker is a responsive and user-friendly web application built using React that helps users track their daily income and expenses efficiently. The application allows users to add income and expense transactions, automatically calculates the total balance, and visually separates income and expenses for better clarity

Notifications You must be signed in to change notification settings

avdhut400/Expense_tracker

Repository files navigation

💰 Expense Tracker (React)

A modern, full-screen Expense Tracker web application built using React. This app helps users manage their daily income and expenses, calculate balance automatically, and persist data using localStorage.


🚀 Live Features

  • ➕ Add income and expense transactions
  • ➖ Delete transactions
  • 📊 Automatic balance, income & expense calculation
  • 💾 Data persistence using localStorage
  • 🖥️ Full-screen responsive UI
  • 🎨 Clean and modern design

🛠 Tech Stack

  • React (Vite)
  • JavaScript (ES6)
  • CSS (Responsive & Full Screen UI)
  • localStorage

📁 Project Structure

expense-tracker/
│── src/
│   ├
│   │   
│   │   
│   │--App.css   
│   │--ExpenseTracker.css   
│   ├-- App.jsx
│   ├-- main.jsx
│   └-- index.css
│── index.html
│── package.json
│── README.md

⚙️ Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/your-username/expense-tracker.git

2️⃣ Navigate to project folder

cd expense-tracker

3️⃣ Install dependencies

npm install

4️⃣ Start development server

npm run dev

🧠 How It Works

  • Users enter a description and amount
  • Positive amount → Income
  • Negative amount → Expense
  • React state manages transactions
  • localStorage saves data permanently
  • Balance updates in real-time

📸 UI Highlights

Screenshot 2026-01-06 202651

🎯 Learning Outcomes

  • React functional components
  • State & props handling
  • Conditional rendering
  • Array operations (map, filter, reduce)
  • localStorage integration
  • Responsive UI design

⭐️ Support

If you like this project, don’t forget to star ⭐ the repository!

About

Expense Tracker is a responsive and user-friendly web application built using React that helps users track their daily income and expenses efficiently. The application allows users to add income and expense transactions, automatically calculates the total balance, and visually separates income and expenses for better clarity

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published