💰 SpendSense

A full-stack MERN expense tracking web application that helps users manage expenses, monitor budgets, and visualize spending analytics through interactive dashboards.

🌐 Live Demo · ⚙️ Backend API · 📁 GitHub Repo

---

✨ Features

• 🔐 JWT Authentication — Secure register, login & logout
• 👤 User-scoped data — Each user sees only their own expenses & budgets
• 💸 Full CRUD — Add, edit & delete transactions
• 📊 Dashboard Analytics — Interactive pie & bar charts via Recharts
• 📁 Categories & Filters — Filter by category, type, month
• 🔎 Search — Real-time transaction search
• 🎯 Budget Tracking — Set limits per category with progress bars
• ☁️ Cloud Database — MongoDB Atlas
• 🌐 Fully Deployed — Vercel (frontend) + Render (backend)
• 📱 Mobile Responsive — Works on all screen sizes

---

🛠️ Tech Stack

Layer	Technology
Frontend	React, Vite, CSS, Axios, Recharts
Backend	Node.js, Express.js
Auth	JWT, bcryptjs
Database	MongoDB Atlas, Mongoose
Deployment	Vercel, Render

---

📸 Screenshots

Dashboard	Transactions

Login	Budgets

---

📂 Project Structure

SpendSense/
├── backend/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   └── server.js
├── frontend/
│   └── src/
│       ├── api/
│       ├── components/
│       ├── pages/
│       └── App.jsx
└── README.md

⚙️ Installation & Setup

1. Clone the repository

git clone https://github.com/NishadRaval/SpendSense.git
cd SpendSense

2. Backend setup

cd backend
npm install

Create backend/.env:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
JWT_EXPIRES_IN=7d
PORT=5000

npm run dev

3. Frontend setup

cd frontend
npm install

Create frontend/.env:

VITE_API_URL=http://localhost:5000/api

npm run dev

Open http://localhost:5173

---

🔑 Environment Variables

Backend (backend/.env)

Variable	Description
MONGO_URI	MongoDB Atlas connection string
JWT_SECRET	Secret key for JWT signing
JWT_EXPIRES_IN	Token expiry duration (e.g. 7d)
PORT	Server port (default: 5000)

Frontend (frontend/.env)

Variable	Description
VITE_API_URL	Backend API base URL

---

📈 Future Improvements

• Recurring expenses
• Dark mode toggle
• Export reports to PDF/CSV
• Monthly trend line chart
• Email notifications
• AI spending insights
• Mobile app (React Native)

---

👨‍💻 Author

Nishad Raval

• 🌐 Portfolio: nishadraval.site
• 💻 GitHub: @NishadRaval

---

Built with ❤️ using the MERN Stack