Spend Smart

A modern and responsive personal finance tracking application built with React and Bootstrap. This application helps users manage their expenses with an intuitive dashboard, visual charts, and comprehensive expense management features.

🌐 Live Demo: spend-smart-expense.netlify.app

🌟 Features

💰 Expense Management

• Add, view, and delete expenses
• Categorize expenses (Food, Transportation, Utilities, etc.)
• Track expense dates and amounts
• Search and filter expenses by title, category, and date

📊 Visual Analytics

• Real-time expense distribution pie chart
• Monthly trends bar chart
• Category breakdown with progress bars
• Summary cards showing key metrics:
  • Total Expenses
  • Monthly Budget
  • Remaining Budget
  • Top Spending Category

💼 Budget Management

• Set and edit monthly budget
• Visual indicators for budget status
• Over-budget warnings
• Real-time remaining budget calculation

🔍 Search and Filtering

• Search expenses by title
• Filter by category
• Time-based filtering options:
  • Today
  • This Week
  • This Month
  • This Year

🚀 Technologies Used

• React: Frontend library for building user interfaces
• Bootstrap: CSS framework for responsive design
• Chart.js: For creating interactive charts
• React Bootstrap: React components for Bootstrap
• Context API: For state management
• Local Storage: For data persistence

🛠️ Installation and Setup

1. Clone the repository:

   git clone https://github.com/mohicody/expense-tracker.git

2. Navigate to the project directory:

   cd expense-tracker

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit:

   http://localhost:5173
   

💻 Usage

Adding Expenses

1. Fill out the "Add New Expense" form with:
   • Expense title
   • Amount
   • Category
   • Date
2. Click "Add Expense" to save

Managing Budget

1. Click "Edit Budget" on the Monthly Budget card
2. Enter new budget amount
3. Save changes

Filtering Expenses

1. Use the search bar to find specific expenses
2. Select category from dropdown
3. Choose time period filter

📱 Responsive Design

The application is fully responsive and works seamlessly on:

• Desktop computers
• Tablets
• Mobile phones

🔒 Data Privacy

All data is stored locally in your browser using localStorage. No data is sent to any external servers.

👤 Author

Mohaddeseh Safari

• GitHub: @mohicody

🙏 Acknowledgments

• React.js Documentation
• Bootstrap Documentation
• Chart.js Community