Expense Tracker — Smart Personal Finance Dashboard for Managing & Visualizing Expenses

Friendly, data‑driven expense tracking with analytics, budgets, recurring payments, and rich visualizations.

---

Table of Contents

• Overview
• Key Features
• Demo / Screenshots
• Tech Stack
• Architecture
• Installation
• Usage
• Configuration
• Roadmap
• License
• Contact

---

Overview

Expense Tracker is a full‑stack web application to record, categorize, and analyze personal spending. It helps you:

• Understand where your money goes
• Track recurring expenses and subscriptions
• Visualize spending trends over time
• Export/Import data for backups or migration

With a clean UI, fast search, and actionable charts, Expense Tracker makes daily budgeting effortless.

---

Key Features

• Authentication with JWT: Secure login and protected endpoints.
• Expense CRUD: Add, edit, delete, and search expenses.
• Categories & Tags: Organize spending by category and keyword.
• Recurring Payments: Automate periodic expenses (daily, weekly, monthly, yearly).
• Dashboards & Analytics: Summaries, trends, and category breakdowns.
• Interactive Charts: Visualize monthly and category spend.
• Reports: Overview and detailed history views.
• CSV Import/Export: Move data easily via CSV (powered by PapaParse).
• Responsive UI: Modern, mobile‑friendly layout with Tailwind CSS.
• API Fallback: If backend is unavailable, selected features gracefully fallback to local storage for demos.

---

Demo / Screenshots

Dashboard — at‑a‑glance overview of spending

Add Expenses — fast input with categories and notes

History — filterable, searchable list of all transactions

Recurring — manage subscriptions and periodic expenses

Reports — category and time‑based analytics

---

Tech Stack

• Frontend: React 18, TypeScript, Vite, React Router, Tailwind CSS, Recharts, React Hot Toast
• Backend: Django 4.2, Django REST Framework, Simple JWT, django‑cors‑headers, Pillow
• Database: SQLite (dev). Easily swappable to PostgreSQL/MySQL.
• Auth: JWT tokens via DRF SimpleJWT
• Utilities: Axios, date‑fns, PapaParse

---

Architecture

flowchart LR
  subgraph Frontend
    A[React + Vite]
    D[Recharts]
    E[Tailwind]
  end

  subgraph Backend
    B[Django REST API]
    F[JWT Auth]
  end

  C[(Database: SQLite / Postgres / MySQL)]

  A -->|Axios / JSON| B
  B -->|ORM| C
  A --> D
  A --> E
  B --> F

Loading

• Frontend handles UI, routing, and data fetching via Axios
• Backend exposes RESTful endpoints (JWT‑protected)
• Database persists users, expenses, categories, and recurring rules
• Visualization uses Recharts for interactive insights

---

Installation

Prerequisites: Node.js 18+ (preferably 20+), Python 3.10+, Git

1. Clone the repository

git clone <your-repo-url>
cd Expense_Tracker

2. Backend setup (Django)

# (Windows PowerShell)
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r backend/requirements.txt

# Migrate DB and create a superuser
cd backend
python manage.py migrate
python manage.py createsuperuser

3. Frontend setup (React + Vite)

cd ..  # back to project root
npm install

---

Usage

1. Start the backend (Django runs on http://localhost:8000)

cd backend
python manage.py runserver

2. Start the frontend (Vite runs on http://localhost:5173 by default)

cd ..
npm run dev

3. Build frontend for production

npm run build

Login with your superuser or register via the app. Protected API calls require a valid JWT; the frontend automatically attaches stored tokens.

---

Configuration

• API Base URL: The frontend targets the Django API at http://localhost:8000/api.
  • Update src/services/api.ts constant API_BASE_URL if your backend host/port differs.
• CORS: Ensure your backend allows the frontend origin (configured via django-cors-headers).
• Database: Default is SQLite (see backend/settings.py). For Postgres/MySQL, update DATABASES settings and install the appropriate driver.

---

Roadmap

• Budgets and alerts (monthly/weekly limits)
• Multi‑currency support and FX conversions
• Advanced filtering and saved views
• Export to XLSX and Google Sheets
• PWA support and offline mode
• Dark mode and theme presets

---

License

This project is licensed under the Apache License 2.0. See the LICENSE file for details.

---

Contact

• Author: Buildwith.18
• GitHub: github.com/Buildwith18
• Email: buildwith.18@gmail.com

If you find this useful, consider starring the repo. Thanks!