A full-stack expense tracking app with AI-powered insights, animated glassmorphism UI, budget alerts, and real-time charts — no database required.
| Feature | Description |
|---|---|
| 🔐 JWT Authentication | Secure login & register with bcrypt password hashing |
| 📊 Interactive Charts | Doughnut + Bar charts with Chart.js, live updates |
| 🤖 AI Insights | GPT-4o-mini analyzes your spending and gives tips |
| 🎯 Budget Limits | Set per-category limits with color-coded progress bars |
| 🔍 Smart Filters | Filter by category, date range with instant results |
| 📧 Email Reports | Auto-generated PDF expense report sent to your email |
| 💾 No Database | In-memory storage — zero setup, deploy anywhere |
| 🎨 Animated UI | Glassmorphism, floating orbs, particle effects, smooth transitions |
| Login Page | Dashboard |
|---|---|
| Glassmorphism card with floating particles | Stats, charts, expense list, AI insights |
Frontend Backend
───────────────────── ─────────────────────
React 18 Node.js + Express
Tailwind CSS JWT (jsonwebtoken)
Chart.js + react-chartjs-2 bcryptjs
React Router v6 OpenAI API
Axios Nodemailer + jsPDF
React Hot Toast UUID (in-memory store)
expense-tracker/
├── client/ # React Frontend
│ └── src/
│ ├── api/axios.js # Auto JWT interceptor
│ ├── context/AuthContext # Global auth state
│ ├── pages/
│ │ ├── Login.jsx # Animated login
│ │ ├── Register.jsx # Password strength meter
│ │ └── Dashboard.jsx # Main app
│ └── components/
│ ├── Navbar.jsx # Sticky glass navbar
│ ├── ExpenseForm.jsx # Category pill selector
│ ├── ExpenseList.jsx # Animated expense cards
│ ├── PieChart.jsx # Doughnut with center total
│ ├── BarChart.jsx # Gradient bar chart
│ ├── InsightsPanel.jsx # OpenAI integration
│ ├── BudgetPanel.jsx # Progress bars + alerts
│ └── DateRangeFilter.jsx
│
└── server/ # Express Backend
├── store.js # In-memory users[] + expenses[]
├── middleware/auth.js # JWT verify
├── controllers/
│ ├── authController.js # Register + Login
│ └── expenseController.js # CRUD + AI + Email
└── routes/
├── auth.js
└── expenses.js
1. Clone the repo
git clone https://github.com/achalcipher/Expense-Tracker.git
cd Expense-Tracker2. Install dependencies
npm run install:all3. Configure environment
cp server/.env.example server/.envEdit server/.env:
JWT_SECRET=any_long_random_string
OPENAI_API_KEY=sk-... # optional
EMAIL_USER=you@gmail.com # optional
EMAIL_PASS=app_password # optional
PORT=40004. Start both servers
# Terminal 1 — Backend
npm run dev:server
# Terminal 2 — Frontend
npm run dev:client| Service | Platform | URL |
|---|---|---|
| Frontend | Vercel | expense-tracker-eight-rho-40.vercel.app |
| Backend | Render | expense-tracker-ctmm.onrender.com |
POST /api/auth/register Register new user
POST /api/auth/login Login, returns JWT
GET /api/expenses Get all expenses (filterable)
POST /api/expenses Create expense
DELETE /api/expenses/:id Delete expense
GET /api/expenses/summary Category totals for bar chart
POST /api/expenses/insights OpenAI spending analysis
PUT /api/expenses/budgets Update budget limits
POST /api/expenses/email Send PDF report via email
- Passwords hashed with bcrypt (salt rounds: 10)
- JWT tokens expire in 7 days
- All expense routes protected by auth middleware
.envfile excluded from git — never pushed
Original Project → This Project
──────────────────────────────────────────────
Plain text passwords → bcrypt hashing
No authentication → JWT middleware
MongoDB required → Zero-setup in-memory store
Basic pie chart → Doughnut + Bar + live summary
No AI features → OpenAI GPT-4o-mini insights
No budget tracking → Per-category limits + alerts
No filtering → Date range + category filters
Plain UI → Glassmorphism + animations
Made with ❤️ by achalcipher