Expense Management System using MERN Stack

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const authRoutes = require('./routes/auth');
const budgetRoutes = require('./routes/budget');
const cors = require('cors')


const app = express();
const PORT = process.env.PORT || 4000;

app.use(cors())
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/my-app',
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    });

app.use('/auth', authRoutes);
app.use('/budget', budgetRoutes);

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

// routes/auth.js
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

router.post('/signup', async (req, res) => {
    const { name, email, password } = req.body;

    try {
        const existingUser = await User.findOne({ email });
        if (existingUser) {
            return res.status(400).json({
                message: 'User already exists'
            });
        }

        const hashedPassword = await bcrypt.hash(password, 10);

        const newUser = new User({
            name,
            email,
            password: hashedPassword
        });
        await newUser.save();

        res.status(201).json({
            message: 'User created successfully'
        });
    } catch (error) {
        res.status(500).json({
            message: 'Internal server error'
        });
    }
});

router.post('/login', async (req, res) => {
    const { email, password } = req.body;

    try {
        const user = await User.findOne({ email });
        if (!user) {
            return res.status(400).json({
                message: 'Invalid email or password'
            });
        }

        const passwordMatch = await bcrypt.compare(
            password, user.password);
        if (!passwordMatch) {
            return res.status(400).json({
                message: 'Invalid email or password'
            });
        }

        const token = jwt.sign({ userId: user._id },
            'your_secret_key');

        res.status(200).json({ token });
    } catch (error) {
        res.status(500).json({
            message: 'Internal server error'
        });
    }
});

module.exports = router;

// routes/budget.js
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const Budget = require('../models/Budget');
const mongoose = require('mongoose');

// Authentication middleware
const authMiddleware = async (req, res, next) => {
    const token = req.header('Authorization');
    if (!token) return res.status(401).json({
        message: 'Access denied'
    });

    try {
        const decoded = jwt.verify(token, 'your_secret_key');
        req.user = await User.findById(decoded.userId);
        next();
    } catch (error) {
        res.status(400).json({ message: 'Invalid token' });
    }
};

router.get('/:id/expenses', authMiddleware, async (req, res) => {
    const { id } = req.params;

    try {
        const budgets = await Budget.findOne({ _id: id });
        console.log(budgets)

        if (!budgets) {
            return res.status(200).json({ expenses: [] });
        }
        const { available, remaining, totalExpenses } =
                                                    calculateAmounts(budgets);


        const data = {
            available,
            remaining,
            used: totalExpenses,
            budgets,
            name: budgets.name,
            total: budgets.totalAmount
        }
        console.log(data)

        res.status(200).json({ data: data });
    } catch (error) {
        console.log(error)
        res.status(500).json({
            message: 'Internal server error'
        });
    }
});

// Create a new budget
router.post('/create', authMiddleware,
    async (req, res) => {
        const { name, totalAmount } = req.body;

        try {
            const newBudget = new Budget({
                name,
                totalAmount,
                user: req.user._id,
                expenses: [],
            });
            await newBudget.save();
            res.status(201).json(newBudget);
        } catch (error) {
            res.status(500).json({
                message: 'Internal server error'
            });
        }
    });

// Enter an expense for a budget
router.post('/:id/expenses', authMiddleware,
    async (req, res) => {
        const { id } = req.params;
        const { name, amount } = req.body;

        try {
            const budget = await Budget.findOne({
                _id: id, user: req.user._id
            });
            if (!budget) {
                return res.status(404).json({
                    message: 'Budget not found'
                });
            }

            budget.expenses.push({ name, amount });
            await budget.save();

            res.status(200).json(budget);
        } catch (error) {

            res.status(500).json({ message: 'Internal server error' });
        }
    });



// Calculate available and remaining amounts for a budget
function calculateAmounts(budget) {
    const totalExpenses = budget.expenses.reduce(
        (total, expense) => total + expense.amount, 0);
    const available = budget.totalAmount - totalExpenses;
    const remaining = budget.totalAmount - available;
    return { available, remaining, totalExpenses };
}
router.get('/', authMiddleware, async (req, res) => {
    try {
        const budgets = await Budget.find({ user: req.user._id });
        const budgetsWithAmounts = budgets.map(budget => {
            const { available, remaining } = calculateAmounts(budget);
            const used = budget.totalAmount - available;
            return {
                _id: budget._id,
                name: budget.name,
                totalAmount: budget.totalAmount,
                available,
                remaining,
                used,
                user: budget.user
            };
        });
        res.status(200).json(budgetsWithAmounts);
    } catch (error) {
        res.status(500).json({ message: 'Internal server error' });
    }
});

module.exports = router;

// models/Budget.js
const mongoose = require('mongoose');

const expenseSchema = new mongoose.Schema({
    name: String,
    amount: Number,
});

const budgetSchema = new mongoose.Schema({
    user: String,
    name: String,
    totalAmount: Number,
    expenses: [expenseSchema],
});

module.exports = mongoose.model('Budget', budgetSchema);

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String
});

module.exports = mongoose.model('User', userSchema);

// src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import LoginForm from "./component/LoginForm.jsx";
import RegistrationForm from "./component/RegistrationForm.jsx";
import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";
import Home from "./component/Home.jsx";
import Expense from "./component/Expense.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<LoginForm />} />
            <Route path="/register" element={<RegistrationForm />} />
            <Route path="/Expense/:id" element={<Expense />} />
        </Routes>
    </BrowserRouter>
);

// src/component/Expense.jsx

import React, {
    useEffect,
    useState
} from "react";

import { MdDeleteForever } from "react-icons/md";
import {
    useNavigate,
    useParams
} from "react-router-dom";

function Expense(props) {
    const navigate = useNavigate();

    useEffect(() => {
        if (!localStorage.getItem('token')) {
            navigate("/login");
        }
    }, [])

    let { id } = useParams();

    const [expenses, setExpenses] = useState({});
    const [expAdd, setExpAdd] = useState(true);
    const [name, setName] = useState('');
    const [amount, setAmount] = useState('');

    async function fetchExpenses() {
        try {
            const response = await
                fetch(`http://localhost:4000/budget/${id}/expenses`, {
                    headers: {
                        Authorization: localStorage.getItem('token'),
                    },// Assuming token is stored in local storage
                });
            if (!response.ok) {
                throw new Error('Failed to fetch expenses');
            }
            const data = await response.json();
            console.log(data.data)
            if (data.data) {
                setExpenses(data.data);
            }


        } catch (error) {
            console.log(error.message)
            console.error('Error fetching expenses:', error);
        }
    };

    useEffect(() => {

        fetchExpenses();
    }, [id]); // Runs whenever budgetId changes

    useEffect(() => {
        fetchExpenses();
    }, [expAdd]); // Runs whenever budgetId changes


    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await
                fetch(`http://localhost:3000/budget/${id}/expenses`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: localStorage.getItem('token'),
                    },// Assuming token is stored in local storage
                    body: JSON.stringify({ name, amount }),
                });

            if (!response.ok) {
                throw new Error('Failed to add expense');
            }

            const data = await response.json();
            console.log('Expense added:', data);
            alert("added")
            setExpAdd(!expAdd)
            /*
             Handle success: e.g., 
            show a success message or update the UI 
            */
        } catch (error) {
            console.error('Error adding expense:', error);
            // Handle error: e.g., show an error message to the user
        }
    };

    return (
        <>
            <div><h1 className="logo">
                <u>GFG Budget Tracker</u>
            </h1>
            </div>
            <h3 style={{
                marginTop: '40px', marginBottom: '40px',
                textAlign: 'center'
            }}>
                Budget Name :{expenses.name}</h3>
            <div className="float-container">
                <div className="first-child">
                    <form className="form_exp"
                        onSubmit={handleSubmit}>
                        <input
                            type="text"
                            placeholder="Expense Name..."
                            className="input_exp"
                            value={name} onChange={
                                (e) => setName(e.target.value)}
                        />
                        <input type="text" placeholder="Amount"
                            value={amount} onChange={
                                (e) => setAmount(e.target.value)}
                            className="input_exp" />
                        <input type="submit" value="Add"
                            className="btn_exp" />
                    </form>
                </div>

                <div className="second-child">
                    <h1 className="text_exp">List of Expenses</h1>
                    <ul className="newul">
                        {expenses?.budgets?.expenses?.map((item) => {
                            return (
                                <li className="li_exp">
                                    <span className="name_exp">
                                        {item.name}
                                    </span>
                                    <span className="a_exp">
                                        {item.amount}
                                    </span>

                                </li>

                            )
                        })}
                    </ul>
                </div>
            </div>
            <div className="outer_div">
                <div className="outer_btn">
                    Budget:{expenses.total}
                </div>
                <div className="outer_btn" style={{
                    backgroundColor: "red"
                }}>
                    Used:{expenses.used}
                </div>
                <div className="outer_btn" style={{
                    backgroundColor: "green"
                }}>
                    Left:{expenses.available}
                </div>
            </div>
        </>
    );
}

export default Expense;

// src/component/Home.jsx

import React, {
    useEffect,
    useState
} from 'react'
import {
    Link,
    useNavigate
} from 'react-router-dom';
function Home() {
    const [budget, setBudgets] = useState([]);
    const [name, setName] = useState('')
    const [amount, setAmount] = useState(0)
    const [budAdd, setAddBud] = useState(true);
    const navigate = useNavigate();
    const token = localStorage.getItem('token');

    async function fetchBudgets() {
        try {
            const response = await
                fetch('http://localhost:4000/budget', {
                    headers: {
                        Authorization: token,
                    },
                });
            if (!response.ok) {
                throw new Error('Failed to fetch budgets');
            }
            const data = await response.json();
            console.log(data)
            setBudgets(data);
        } catch (error) {
            console.error('Error fetching budgets:', error);

        }
    };



    useEffect(() => {
        if (!localStorage.getItem('token')) {
            navigate("/login")
        }
        fetchBudgets();
    }, []); // Runs only once on component mount


    useEffect(() => {
        fetchBudgets();
    }, [budAdd]); // Runs only once on component mount


    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const token = localStorage.getItem('token');
            console.log(token)
            const response = await
                fetch('http://localhost:4000/budget/create', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: token,
                    },
                    body: JSON.stringify({ name, totalAmount: amount }),
                });
            const data = await response.json();
            console.log('Budget created:', data);
            alert("Budget created")
            setAddBud(!budAdd)

        } catch (error) {
            console.error('Error creating budget:', error);
            alert("Error creating budget")

        }
    };
    return (
        <>
            <div><h1 className="logoHome"
                style={{
                    padding: '20px',
                    marginLeft: '19%', color: 'green'
                }}>
                <u>GFG Budget Tracker</u>
            </h1>
            </div>
            <div className='main1'>

                <form className='f1'
                    onSubmit={handleSubmit} method='POST'>
                    <input type="text"
                        min="1"
                        className='input1'
                        placeholder='Enter Expense Name'
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                    <input type="number"
                        min="1"
                        className='input1'
                        placeholder='Input Amount'
                        value={amount}
                        onChange={(e) => setAmount(e.target.value)}
                    />
                    <br />
                    <input type="submit"
                        value="Add"
                        className='btn1'
                    />
                </form>
            </div>

            <div className='grid'>

                {budget?.map((bud, index) => (

                    <div className='inner1'>
                        <div className='in1' >
                            Expense Name : {bud.name}
                        </div>
                        <div className='in2'>
                            Amount :  {bud.totalAmount}
                        </div>
                        <Link to={`expense/${bud._id}`}>
                            <button className='btn_exp'>
                                Open Budget
                            </button>
                        </Link>
                    </div>
                ))}

            </div>

        </>

    )
}

export default Home

// src/component/LoginForm.jsx

import React, { useState } from 'react';
import {
    Link,
    useNavigate
} from "react-router-dom";

const LoginForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await
                fetch('http://localhost:4000/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: username,
                        password
                    })
                });
            const data = await response.json();
            alert("Login Success")

            localStorage.setItem('token', data.token);
            navigate("/")

        } catch (error) {
            console.error('Error:', error);
            alert('Error:', error)
        }
    };


    return (
        <>
            <div className="login-container">

                <form onSubmit={handleSubmit}
                    className="login-form">

                    <input
                        type="text"
                        placeholder="Username"
                        value={username}
                        onChange={
                            (e) => setUsername(e.target.value)}
                    />
                    <input
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={
                            (e) => setPassword(e.target.value)}
                    />
                    <button type="submit">Login</button>
                    <p className='p1'>
                        Don't Have an Account
                        <Link to="/register">
                            Sign Up
                        </Link>
                    </p>
                </form>
            </div>
        </>
    );
};

export default LoginForm;

// src/component/RegistrationForm.jsx

import React, { useState } from 'react';
import { Link, useNavigate } from "react-router-dom";

const RegistrationForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');
    const navigate = useNavigate();
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await
                fetch('http://localhost:4000/auth/signup', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        name,
                        email,
                        password
                    })
                });
            const data = await response.json();

            if (response.ok) {
                localStorage.setItem('token', data.token);
                alert('Success:', data.message)
                navigate("/login");

            } else {
                console.error(data.message);
                alert('Error:', data.message)

            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error:', error)

        }
    };

    return (
        <div className="registration-container">
            <form onSubmit={handleSubmit}
                className="registration-form">
                <input
                    type="text"
                    placeholder="Name"
                    value={name}
                    className='i1'
                    onChange={
                        (e) => setName(e.target.value)}
                    required
                />
                <input
                    type="email"
                    placeholder="Email"
                    value={email}
                    onChange={
                        (e) => setEmail(e.target.value)}
                    required
                />
                <input
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={
                        (e) => setPassword(e.target.value)}
                    required
                />
                <button type="submit">Register</button>
                <p className='p1'>
                    Alreay Account
                    <Link to="/login">
                        Sign In
                    </Link>
                </p>
            </form>
        </div>
    );
};

export default RegistrationForm;