Premium Expense Tracker

A modern frontend-only Expense Tracker built with React + Vite + Tailwind + Recharts. Data is stored locally (localStorage), so no backend is required.

Features

• Responsive premium UI (desktop + mobile)
• Summary cards: Total Income, Total Expense, Balance
• Search + filters:
  • Category filter
  • Date range filter
  • Text search
• Full transaction management:
  • Add transaction
  • Edit transaction
  • Delete transaction (with confirmation)
• Sorting by:
  • Date
  • Amount
  • Category
  • Type
• Charts:
  • Month view (bar chart: income vs expense)
  • Category view (pie chart: expense breakdown)
• Export:
  • CSV export (Excel-friendly)
  • JSON export
• Import:
  • JSON import with validation
• Theme:
  • Dark/Light toggle with persistence
• Optional PWA support:
  • manifest.webmanifest
  • sw.js service worker

Tech Stack

• React + Vite
• Tailwind CSS
• Recharts
• Lucide icons
• LocalStorage

Run Locally

npm install
npm run dev

Build

npm run build
npm run preview

Project Structure

src/
  components/
    ChartOverview.jsx
    DashboardCard.jsx
    ExpenseForm.jsx
    Navbar.jsx
    ThemeToggle.jsx
    TransactionList.jsx
  styles/
    theme.css
  utils/
    helpers.js
  App.jsx
  index.css
  main.jsx
public/
  manifest.webmanifest
  sw.js
  assets/
    icons/
    graphics/

How It Works (Beginner Notes)

• src/App.jsx is the main orchestrator:
  • Holds transactions state
  • Applies filtering + sorting
  • Computes summary totals
  • Opens/closes modal for add/edit
• src/utils/helpers.js contains reusable logic:
  • LocalStorage load/save
  • Filtering/sorting helpers
  • CSV/JSON export + JSON import validation
• src/components/ExpenseForm.jsx handles validation and submits add/edit payloads.
• src/components/TransactionList.jsx renders sortable table/list and edit/delete actions.
• src/components/ChartOverview.jsx renders month/category chart views.

Notes

• This project is frontend-only by design.
• If you want multi-device sync later, you can add a backend API without changing core UI patterns.