💰 Expense Tracker

A simple and intuitive expense tracking application built with React.js to help you monitor your spending and stay in control of your finances.

✨ Features

• 💵 Add Expenses - Quickly record new expenses with title and amount
• ✏️ Edit Expenses - Update existing expenses inline
• 🗑️ Delete Expenses - Remove expenses you no longer need
• 💾 LocalStorage Persistence - Your data is saved automatically and persists across sessions
• 📊 Total Calculation - Real-time calculation of total expenses
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Clean UI - Modern and intuitive interface with Bootstrap styling

🛠️ Tech Stack

• React.js - UI library with hooks
• React Router - Client-side routing
• Bootstrap 5 - CSS framework for styling
• Bootstrap Icons - Icon library
• LocalStorage API - Data persistence
• Vite - Build tool and dev server

📦 Installation

1. Clone the repository:

git clone https://github.com/MuhammadSohaib-pro/expense-tracker-app.git
cd expense-tracker-app

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open your browser and visit:

http://localhost:5173

🚀 Usage

1. Add an expense: Enter a description and amount, then click "Add"
2. Edit an expense: Click the pencil icon, modify the details, and click the checkmark to save
3. Delete an expense: Click the trash icon to remove an expense
4. View total: Your total expenses are automatically calculated and displayed at the top

📁 Project Structure

src/
├── views/
│   ├── ExpenseTracker.jsx    # Main expense tracker view
│   └── NotFound.jsx           # 404 page
├── components/
│   ├── ExpenseForm.jsx        # Form for adding expenses
│   ├── ExpenseItem.jsx        # Individual expense item
│   └── EmptyExpense.jsx       # Empty state component
├── App.jsx                    # Root component with routing
└── main.jsx                   # Application entry point

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

This project is open source and available under the MIT License.

👨‍💻 Author

Muhammad Sohaib

• GitHub: @MuhammadSohaib-pro

---

⭐ If you found this project helpful, please consider giving it a star!

Built with ❤️ while learning React.js