Expense Tracker

A full-stack expense tracking application built with React, Node.js, and MongoDB. Track your daily and monthly expenses with detailed visualizations and category-wise analysis.

Features

• 🔐 User Authentication with JWT
• 📊 Interactive Charts & Visualizations
  • Pie charts showing expense distribution by category
  • Horizontal bar charts for category comparison
  • Percentage-based expense analysis
• 💰 Expense Management
  • Add, edit, and delete expenses
  • Categorize expenses
  • Add notes and payment methods
• 📅 Time-based Analysis
  • Daily expense tracking
  • Monthly summaries
  • Historical data view
• 📱 Responsive Design
  • Works on desktop and mobile devices
  • Clean, modern interface

Tech Stack

Frontend

• React with Vite
• TailwindCSS for styling
• Recharts for data visualization
• Axios for API requests
• React Router for navigation

Backend

• Node.js & Express
• MongoDB for database
• JWT for authentication
• Cors for cross-origin requests

Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB installed and running
• Git

Installation

1. Clone the repository:

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

2. Install frontend dependencies:

# Make sure you're in the expense-tracker root folder
npm install

3. Install backend dependencies:

# From the expense-tracker root folder
cd backend
npm install

4. Environment Variables Setup:
   • In the backend folder, you'll find .env.example
   • Create a new file named .env in the same backend folder
   • Copy the content from .env.example and add your credentials
   • You'll need:
     • MongoDB URI (database connection string)
     • JWT secret (for authentication)
   • If you need help with credentials:
     • DM me on GitHub (@Deepak06-v) for the actual credentials
     • Or set up your own MongoDB cluster at MongoDB Atlas

Running the Application

1. Start the backend server:

# Make sure you're in the expense-tracker/backend folder
cd backend  # if you're in the root folder
npm run dev

2. In a new terminal, start the frontend:

# Make sure you're in the expense-tracker root folder
# If you're in backend folder, first do:
cd ..
npm run dev

3. Visit http://localhost:5173 in your browser

Important Directory Notes

• Frontend commands (npm run dev) must be run from the expense-tracker root folder
• Backend commands (npm run dev) must be run from the expense-tracker/backend folder
• Always check your terminal path before running commands!
• The .env file must be in the backend folder

Troubleshooting

• If you get MongoDB connection errors, make sure your .env file has the correct MONGODB_URI
• For credential issues or demo access, feel free to reach out to me on GitHub (@Deepak06-v)
• Make sure both backend (port 3000) and frontend (port 5173) servers are running

API Routes

Auth Routes

• POST /user/signup - Register new user
• POST /user/login - User login

Expense Routes

• GET /expense - Get all expenses
• GET /expense/current-month - Get current month expenses
• GET /expense/daily - Get daily expenses
• POST /expense/add - Add new expense
• PUT /expense/:id - Edit expense
• DELETE /expense/:id - Delete expense

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.