Expense Tracker – Full Stack Demo Application

A full-stack Expense Tracker web application built as a demo assignment. The project demonstrates end-to-end CRUD operations, live data visualization, and third‑party API integration, with both backend and frontend live deployed and fully functional.

---

🚀 Tech Stack

Backend

• Python – Django
• Django REST Framework (DRF)
• PostgreSQL
• Third‑party API: Currency Exchange Rates API (View API Dashboard)
• Deployment: AWS EC2 + Gunicorn + Nginx
• Live Backend API URL: https://trackbuddy03.duckdns.org/api/expenses

Frontend

• Next.js (React + TypeScript)
• Tailwind CSS
• Recharts (data visualization)
• Deployment: Vercel
• Live Frontend URL: https://expense-tracker-pi-blond-14.vercel.app/

---

📌 Core Features

1️⃣ Full CRUD (UI + REST APIs)

Users can manage expenses completely from the UI:

• Create a new expense
• View all expenses
• Edit existing expenses
• Delete expenses

All operations are backed by REST APIs:

• GET /api/expenses/
• POST /api/expenses/
• PUT /api/expenses/:id/
• DELETE /api/expenses/:id/

CRUD works live on the deployed backend, not just locally.

---

2️⃣ Data Visualization / Reporting

A live dashboard summarizes expense data stored in the database.

Dashboard features:

• Total Expenses (USD) – auto‑converted from multiple currencies
• Category-wise expense distribution (Pie Chart)
• Reports update automatically when expenses are added, edited, or deleted

Dashboard route:

/

---

3️⃣ Third‑Party API Integration (Currency Conversion)

The application integrates a real-time currency exchange API.

How it works:

• Expenses can be added in USD, EUR, or INR

• For non‑USD currencies, the backend:

  • Fetches the live exchange rate from a third-party API (View API Dashboard) using the EXCHANGE_API_KEY
  • Converts the amount to USD
  • Stores the converted value in the database

• Converted values are used for reporting and dashboards

This integration is visible in:

• Expense list (converted amount column)
• Dashboard total

---

🖥️ UI Flow (How to Test)

1. Open the frontend live URL: https://expense-tracker-pi-blond-14.vercel.app/

2. On the dashboard:

   • View total expenses and category chart

3. Click Add Expense

4. Create an expense in a non‑USD currency

5. Return to the dashboard and observe:

   • Updated totals
   • Updated category chart

6. Edit or delete an expense and confirm live updates

---

⚙️ Local Setup

Backend Setup

cd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Create .env file:

DB_NAME=your-db-name
DB_USER=your-db-user
DB_PASSWORD=your-db-password
DB_HOST=your-db-host
EXCHANGE_API_KEY=your-exchange-api-key

Run migrations and server:

python manage.py migrate
python manage.py runserver

Frontend Setup

cd frontend
npm install

Create .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

Run frontend:

npm run dev

---

🧪 API Testing

All backend endpoints are live and publicly accessible:

• List expenses: GET https://trackbuddy03.duckdns.org/api/expenses/
• Create expense: POST https://trackbuddy03.duckdns.org/api/expenses/
• Expense summary: GET https://trackbuddy03.duckdns.org/api/reports/summary/

APIs can be tested using Postman, curl, or directly from the frontend.

---

🌍 Deployment Overview

Backend: AWS EC2 + Gunicorn + Nginx Frontend: Vercel Database: Supabase (PostgreSQL) Live Backend API: https://trackbuddy03.duckdns.org/api/expenses/ Live Frontend URL: https://expense-tracker-pi-blond-14.vercel.app/

---

🎥 Demo Video

A 3–5 minute screen recording is included showing:

1. Live application
2. CRUD operations
3. Dashboard updates
4. Third-party API integration
5. Backend API in action

---

✅ Assignment Requirements Coverage

✔ Full CRUD (UI + APIs) ✔ Live data visualization & reporting ✔ Third-party API integration ✔ Backend & frontend live deployment ✔ Clean project structure & documentation

---

👤 Author

Nidhi Patel Full Stack Developer