Updated

💰 MERN Expense Tracker

A full-stack expense tracker built with MongoDB, Express, React, and Node.js.

Overview

This project includes:

• server/ — Express API with JWT authentication and MongoDB
• client/ — Vite React app with authentication, transaction management, charts, and dark mode

Key Features

• 🔐 Email/password signup and login
• ➕ Add income and expense transactions
• 🗑️ Delete transactions
• 🔍 Filter by transaction type (income/expense)
• 📊 Recharts-based pie and bar charts
• 🌙 Dark mode toggle persisted in localStorage
• 💾 Token-based auth stored in localStorage
• 📱 Responsive UI using Tailwind CSS

Project Structure

mern-expense-tracker/
├── server/                 # Backend API
│   ├── config/db.js
│   ├── controllers/
│   ├── middleware/auth.js
│   ├── models/
│   ├── routes/
│   ├── .env.example
│   ├── package.json
│   └── server.js
└── client/                 # Frontend React app
    ├── src/
    │   ├── api/axios.js
    │   ├── components/
    │   ├── context/AuthContext.jsx
    │   ├── pages/
    │   ├── App.jsx
    │   └── main.jsx
    ├── index.html
    ├── package.json
    ├── tailwind.config.js
    └── vite.config.js

Prerequisites

• Node.js 18+ installed
• npm installed
• MongoDB Atlas or MongoDB server URL

Local Setup

Backend

1. Open terminal and go to the backend folder:

   cd server

2. Copy environment example:

   cp .env.example .env

3. Update .env with your MongoDB connection and JWT secret.
4. Install dependencies:

   npm install

5. Start the backend server:

   npm run dev

The backend runs at http://localhost:5000 by default.

Frontend

1. Open a new terminal and go to the frontend folder:

   cd client

2. Install dependencies:

   npm install

3. Run the frontend:

   npm run dev

The frontend runs at http://localhost:5173 by default.

Environment Variables

Backend (server/.env)

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_ORIGIN=http://localhost:5173

Frontend (client/.env)

VITE_API_URL=http://localhost:5000

Note: client/.env is ignored by git via .gitignore, so set VITE_API_URL in your deployment environment.

Backend API Endpoints

Method	Endpoint	Auth	Description
POST	/api/auth/signup	❌	Create account
POST	/api/auth/login	❌	Login, returns JWT
GET	/api/transactions	✅	List user's transactions
POST	/api/transactions	✅	Add transaction
DELETE	/api/transactions/:id	✅	Delete transaction

Deployment

Recommended deployment flow

• Backend: Render, Railway, or Heroku
• Frontend: Vercel, Netlify, or Cloudflare Pages
• Database: MongoDB Atlas

Frontend deployment notes

• Deploy from client/
• Build command: npm run build
• Publish directory: dist
• Set env var: VITE_API_URL=https://your-backend-url
• If using a SPA host, ensure rewrites to index.html for client-side routing.

Backend deployment notes

• Deploy from server/
• Start command: npm start
• Set env vars:
  • MONGO_URI
  • JWT_SECRET
  • CLIENT_ORIGIN=https://your-frontend-url Updated V2

Common issues

• 401 Unauthorized on login: make sure the deployed backend has a user created and the correct credentials are used.
• 404 on refresh or direct route access: configure your frontend host to rewrite all routes to index.html.
• Wrong API base URL: verify VITE_API_URL is correctly set in deployment.

Notes

• The repository contains both frontend and backend in one monorepo.
• The frontend uses Vite and React Router.
• The backend uses Express, Mongoose, and JWT-based auth.