💰 Personal Expense Tracker

A full-stack financial management application designed to help users track their income and expenses efficiently. Built with the MERN Stack, it features visual analytics, secure authentication, and profile management with cloud image storage.

---

🚀 Live Demo

Click here to view the Live App

(Note: The backend is hosted on a free Render instance. Please allow up to 60 seconds for the server to wake up on the initial login.)

---

📸 Screenshots

Dashboard	Income Management

Dashboard	Expense Management

---

✨ Key Features

• 🔐 Secure Authentication: User registration and login using JWT (JSON Web Tokens).
• 📊 Interactive Dashboard: Visual charts (Pie & Bar charts) using Recharts to analyze financial health.
• 💸 Transaction Management: Add, view, and delete Income and Expense records.
• 👤 Profile Management: Users can update their name and upload profile pictures (stored on Cloudinary).
• 📱 Responsive Design: Fully responsive UI built with Tailwind CSS.
• 🔎 Smart Filters: Sort transactions by date and view recent activity.

---

🛠️ Tech Stack

Frontend

• React.js (Vite): Fast client-side rendering.
• Tailwind CSS: Modern utility-first styling.
• Recharts: Data visualization.
• Axios: API requests.
• React Hot Toast: User notifications.

Backend

• Node.js & Express.js: RESTful API architecture.
• MongoDB & Mongoose: NoSQL Database for storing users and transactions.
• JWT: Secure authentication middleware.
• Multer & Cloudinary: Handling file uploads and cloud storage.

---

⚙️ Installation & Setup

Follow these steps to run the project locally.

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/expense-tracker.git cd expense-tracker

2. Backend Setup

Navigate to the backend folder and install dependencies:

bash

cd backend
npm install

Create a .env file in the backend folder and add your credentials:

PORT=8000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_random_secret_string
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Start the Server:

npm start Server should run on http://localhost:8000

3. Frontend Setup

Open a new terminal, navigate to the frontend folder, and install dependencies: code

Bash
cd frontend
npm install

Configure Base URL: Go to frontend/src/utils/axiosInstance.js and ensure it points to localhost: code

JavaScript

const BASE_URL = 'http://localhost:8000/api/v1';

Start the React App:

code

Bash
npm run dev

🌐 API Endpoints

Method	Endpoint	Description
POST	/api/v1/auth/register	Register a new user
POST	/api/v1/auth/login	Login user & get Token
PUT	/api/v1/auth/profile	Update Name & Profile Image
GET	/api/v1/dashboard	Get summary stats & charts
POST	/api/v1/income/add-income	Add new income source
POST	/api/v1/expense/add-expense	Add new expense

🧠 What I Learned

Building this project helped me understand:

• Full Stack Integration: Connecting a React frontend with an Express backend.
• Authentication: Implementing secure Route Protection using a ProtectedRoute wrapper.
• State Management: Using useContext to manage global User state across the application.
• Cloud Services: Handling image file uploads using Multer and storing them on Cloudinary.
• Deployment: Solving real-world CORS issues and deploying the full stack to Vercel (Frontend) and Render (Backend).

📬 Contact

Created by Rishabh Dasgupta
LinkedIn Profile | GitHub Profile