💸 KHARCHA — Smart Expense Tracker

A voice-powered expense tracker built with React — manage income, expenses, and budgets with real-time charts and voice commands.

Track your daily finances effortlessly. Add transactions by typing or speaking naturally. All data stays in your browser — zero backend, complete privacy.

---

📋 Table of Contents

• Features
• Architecture
• Tech Stack
• Getting Started
• Usage
• Project Structure
• Voice Commands
• Contributing

---

🚀 Features

Feature	Description
Voice-Powered Input	Add transactions by speaking naturally using Speechly AI voice recognition
Income & Expense Tracking	Categorize transactions as income or expense with custom categories
Real-Time Charts	Visual breakdown of spending patterns using Chart.js doughnut charts
Material Design UI	Clean, responsive interface built with Material-UI components
Category System	Pre-built categories for both income (Salary, Investments, Business…) and expenses (Shopping, Food, Travel…)
Transaction History	Searchable list with date, amount, category, and type
Balance Calculator	Real-time income, expense, and net balance computation
Local Storage	All data persists in browser — no account or backend required
UUID Tracking	Each transaction assigned a unique ID for reliable management

---

🏗️ Architecture

┌─────────────────────────────────────────────────┐
│                   App.js                         │
│              (Root Component)                    │
├────────────────┬────────────────────────────────┤
│                │                                │
│    Details/    │            Main/                │
│  ┌──────────┐  │  ┌────────────┬──────────────┐ │
│  │ Income   │  │  │  Form.jsx  │  List.jsx    │ │
│  │ Card     │  │  │  (Add new  │  (Transaction│ │
│  │          │  │  │  entries)  │   history)   │ │
│  │ Expense  │  │  │            │              │ │
│  │ Card     │  │  │  Speechly  │  Delete /    │ │
│  │          │  │  │  Voice AI  │  Filter      │ │
│  │ Chart.js │  │  │            │              │ │
│  │ Doughnut │  │  └────────────┴──────────────┘ │
│  └──────────┘  │                                │
├────────────────┴────────────────────────────────┤
│              Context API + useReducer             │
│         (Global State Management)                │
├─────────────────────────────────────────────────┤
│              localStorage (Persistence)           │
└─────────────────────────────────────────────────┘

---

🛠️ Tech Stack

Component	Technology	Version	Role
UI Framework	React	16.12	Component-based frontend framework
Component Library	Material-UI (Core + Icons + Lab)	4.12.4	Pre-built UI components, icons, theming
Charting	Chart.js + react-chartjs-2	3.8.0 / 4.2.0	Doughnut charts for income/expense visualization
Voice AI	Speechly (react-client + react-ui)	2.1.2 / 2.7.0	Natural language voice input for transactions
State Management	React Context API + useReducer	—	Global state without external libraries
ID Generation	uuid	8.3.2	Unique transaction identifiers
Build Tool	Create React App (react-scripts)	5.0.1	Development server, bundling, testing
Language	JavaScript (ES6+)	—	Core language with modern syntax

---

📦 Getting Started

Prerequisites

• Node.js 14+ and npm 6+
• A modern browser (Chrome, Firefox, Edge)

Installation

# Clone the repository
git clone https://github.com/cazy8/KHARCHA--expense-tracker.git
cd KHARCHA--expense-tracker

# Install dependencies
npm install

# Start the development server
npm start

The app will open at http://localhost:3000

Build for Production

npm run build

---

⚙️ Usage

Adding a Transaction

1. Select Income or Expense type
2. Choose a category (e.g., Salary, Shopping, Food)
3. Enter the amount
4. Add an optional date
5. Click Create or use voice input

Reading the Dashboard

• Left Panel — Income total, expense total, and Chart.js doughnut charts showing category-wise breakdown
• Right Panel — Form to add new transactions + scrollable transaction history

---

🎤 Voice Commands

KHARCHA integrates Speechly AI for hands-free transaction entry. Speak naturally:

Example Voice Command	Action
"Add income of 5000 in Salary"	Creates ₹5,000 income under Salary
"Add expense of 200 for Food"	Creates ₹200 expense under Food
"Add expense of 1500 in Shopping"	Creates ₹1,500 expense under Shopping

Voice recognition powered by Speechly — works directly in the browser.

---

📁 Project Structure

KHARCHA--expense-tracker/
├── public/
│   └── index.html               # HTML entry point
├── src/
│   ├── App.js                   # Root component — layout orchestration
│   ├── index.js                 # React DOM entry — Speechly provider wrapping
│   ├── index.css                # Global styles
│   ├── styles.js                # Material-UI theme / makeStyles
│   │
│   ├── components/
│   │   ├── Details/
│   │   │   ├── Details.jsx      # Income/Expense cards with Chart.js doughnut
│   │   │   └── styles.js        # Details component styling
│   │   └── Main/
│   │       ├── Main.jsx         # Main panel layout
│   │       ├── styles.js        # Main component styling
│   │       ├── Form/
│   │       │   ├── Form.jsx     # Transaction input form + Speechly voice
│   │       │   └── styles.js    # Form styling
│   │       └── List/
│   │           ├── List.jsx     # Transaction history list
│   │           └── styles.js    # List styling
│   │
│   ├── context/
│   │   ├── context.js           # React Context provider
│   │   └── contextReducer.js    # useReducer — ADD, DELETE transaction actions
│   │
│   ├── constants/
│   │   └── categories.js        # Income & expense category definitions
│   │
│   ├── utils/
│   │   └── formatDate.js        # Date formatting utility
│   │
│   ├── useTransactions.js       # Custom hook — transaction filtering & totals
│   │
│   └── assets/
│       ├── background.jpg       # App background images
│       ├── background1.png
│       └── background2.jpg
│
├── package.json                 # Dependencies and scripts
└── README.md                    # Documentation

---

🔧 Key Implementation Details

State Management

Uses React Context API with useReducer for global state — no Redux or external state libraries needed:

// contextReducer.js
const contextReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TRANSACTION':
      return [...state, action.payload];
    case 'DELETE_TRANSACTION':
      return state.filter((t) => t.id !== action.payload);
    default:
      return state;
  }
};

Custom Hook Pattern

useTransactions.js provides a clean interface to filter and compute totals:

// Filter by type, compute category-wise breakdown
const { total, chartData } = useTransactions('Income');

---

🤝 Contributing

Contributions are welcome! Ideas for improvement:

• 🌙 Dark Mode — Material-UI theme toggling
• 📊 Monthly Reports — Time-series expense charts
• 💱 Multi-Currency — Currency conversion support
• 📱 PWA Support — Installable Progressive Web App
• 📤 CSV Export — Download transaction history

git checkout -b feature/your-feature

---

👤 Author

Harsh Gupta — @cazy8 · LinkedIn

---

If you found this useful, consider giving it a ⭐