MyMoney - Personal Finance App

A full-stack personal finance application built with Node.js, React, and MySQL to track daily expenses and generate comprehensive weekly and monthly reports.

https://www.loom.com/share/050ac7013ac9433ea6e16686620fa1e9

Features

• 🔐 User Authentication - Secure JWT-based authentication with bcrypt password hashing
• 💰 Expense Tracking - Add, edit, delete, and categorize expenses
• 📊 Reports & Analytics - Weekly and monthly reports with interactive charts
• 📈 Data Visualization - Pie charts for category breakdown, bar charts for daily trends
• 🎨 Modern UI - Dark theme with vibrant gradients and smooth animations
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🔍 Advanced Filtering - Filter expenses by date range and category
• 👥 Multi-User Support - Each user has isolated expense data

Tech Stack

Backend

• Node.js & Express - Server framework
• MySQL - Database
• JWT - Authentication
• bcrypt - Password hashing
• express-validator - Input validation

Frontend

• React (Vite) - UI framework
• React Router - Navigation
• Chart.js & react-chartjs-2 - Data visualization
• Axios - HTTP client
• date-fns - Date utilities

Prerequisites

• Node.js (v14 or higher)
• MySQL (v5.7 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd mymoney

2. Backend Setup

# Install backend dependencies
npm install

# Create .env file (copy from .env.example)
cp .env.example .env

# Edit .env and configure your MySQL credentials
# DB_HOST=localhost
# DB_USER=root
# DB_PASSWORD=your_password
# DB_NAME=mymoney_db
# JWT_SECRET=your_secret_key

3. Database Setup

# Run the database setup script
npm run setup-db

This will:

• Create the mymoney_db database
• Create tables: users, expenses, categories
• Insert default expense categories

4. Frontend Setup

# Navigate to client directory
cd client

# Install frontend dependencies
npm install

Running the Application

Start Backend Server

# From the root directory
npm start

# Or for development with auto-reload
npm run dev

Backend will run on http://localhost:5000

Start Frontend Development Server

# From the client directory
cd client
npm run dev

Frontend will run on http://localhost:5173

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/profile - Get user profile (protected)

Expenses

• GET /api/expenses - Get all expenses (with optional filters)
• GET /api/expenses/:id - Get single expense
• POST /api/expenses - Create new expense
• PUT /api/expenses/:id - Update expense
• DELETE /api/expenses/:id - Delete expense

Reports

• GET /api/reports/weekly - Get weekly report
• GET /api/reports/monthly - Get monthly report (with month/year params)
• GET /api/reports/summary - Get overall summary

Categories

• GET /api/categories - Get all categories
• POST /api/categories - Create new category

Default Categories

The app comes with 10 pre-configured categories:

• 🍔 Food & Dining
• 🚗 Transportation
• 🛍️ Shopping
• 🎬 Entertainment
• 💡 Bills & Utilities
• 🏥 Healthcare
• 📚 Education
• ✈️ Travel
• 🛒 Groceries
• 📌 Other

Usage

1. Register/Login - Create an account or login with existing credentials
2. Add Expenses - Click "Add Expense" to record your transactions
3. View Dashboard - See your spending summary and recent expenses
4. Manage Expenses - Edit or delete expenses from the Expenses page
5. Generate Reports - View weekly and monthly reports with charts
6. Filter Data - Use date range and category filters to analyze specific periods

Project Structure

mymoney/
├── config/
│   ├── database.js       # MySQL connection
│   ├── schema.sql        # Database schema
│   └── setup-db.js       # Database setup script
├── middleware/
│   └── auth.js           # JWT authentication middleware
├── routes/
│   ├── auth.js           # Authentication routes
│   ├── expenses.js       # Expense CRUD routes
│   ├── reports.js        # Report generation routes
│   └── categories.js     # Category routes
├── client/
│   ├── src/
│   │   ├── components/   # Reusable components
│   │   ├── context/      # React context (Auth)
│   │   ├── pages/        # Page components
│   │   ├── services/     # API services
│   │   └── index.css     # Global styles
│   └── package.json
├── server.js             # Express server
├── package.json
└── .env                  # Environment variables

Security Features

• Passwords hashed with bcrypt (10 salt rounds)
• JWT tokens for stateless authentication
• Protected API routes with middleware
• User-scoped data access (users can only see their own expenses)
• Input validation on all forms
• SQL injection prevention with parameterized queries

Contributing

Feel free to submit issues and enhancement requests!

License

ISC

Author

Built with ❤️ for better personal finance management