Like Expense
Link to open source: https://github.com/abhideveloper9753/Expense-Tracker
Link to Live Project: https://front-end-expence-tracker.vercel.app/
β Project Overview
This is a full-stack Expense Tracker app with:
- Backend (API): Node.js + Express + MongoDB (Mongoose)
- Frontend: React (Vite) SPA
- Core Functionality: user auth, income/expense CRUD, dashboard analytics, and Excel export
Itβs structured as two separate apps under TrackExpense:
backend/β API server (auth + expense/income management + analytics)frontend/β React UI (login/signup, dashboard, add/edit transactions, profile)
π§± What the App Does (Features)
β Authentication
- Register + Login (email + password)
- JWT token-based auth (stored in localStorage or sessionStorage)
- Protected routes require auth token
πΈ Expense / Income Tracking
- Add / update / delete expenses
- Add / update / delete income
- Each record includes: description, amount, category, date
- Records are linked to a specific user (via userId)
π Dashboard & Analytics
- Monthly income/expense summary
-
- Savings calculation
- Recent transactions list
- Expense category breakdown (for charts)
- Timeframe filtering (monthly/weekly/etc.)
π Export
- Export income or expense data to Excel (.xlsx) from the server
-
ποΈ Backend (API) Structure
Main API routes
All API routes are mounted under
/api/*:- /api/user β user auth & profile
- /api/income β income CRUD + overview + Excel export
- /api/expense β expense CRUD + overview + Excel export
/api/dashboardβ dashboard summary
Key Backend Tech
- Express for routing
- MongoDB + Mongoose for persistence
- JWT for auth (
middleware/auth.js) - bcryptjs for password hashing
- xlsx to generate Excel spreadsheets
-
π§© Frontend (React) Structure
The UI is under
frontend/src/with pages like:- Dashboard.jsx β main analytics page (charts + summary)
- Income.jsx / Expense.jsx β transaction management
- Profile.jsx β update profile, change password
- Login.jsx / Signup.jsx β authentication
- Layout.jsx β common layout / nav + sidebar
It stores auth tokens in local/session storage and keeps transaction state in local storage for faster UI updates.