Personal Finance Manager

A comprehensive full-stack application that helps users track income, expenses, and financial goals. Built with a modern tech stack featuring a Node.js/Express backend, MongoDB database, React frontend, and JWT authentication for secured access. The application also supports Docker and docker-compose for easy containerized deployment.

---

Table of Contents

1. Features
2. Tech Stack
3. Project Structure
4. Installation
5. Usage
6. Docker Deployment
7. License

Features

• User Authentication
  Register and log in with JWT-based authentication, providing secure access to personal finance data.

• Transaction Management
  Record income or expense transactions, including amount, category, date, and a brief description.

• Category Management
  Create custom categories (e.g., Rent, Groceries, Utilities, etc.) for better expense tracking.

• User Profile
  View basic account information and manage personal details.

• Responsive UI
  Built with React and Bootstrap for a seamless experience on both desktop and mobile devices.

• Protected Endpoints
  Express routes secured with JWT tokens to ensure each user can only access their own data.

• Protected Routes & AuthContext
  Frontend uses protected routes and global auth state; unauthenticated users are redirected to login.

• Input Validation
  Backend uses express-validator for request validation on signup, login, transactions, and categories.

• Dashboard Stats
  Dashboard shows total income, expenses, and balance with summary cards.

• Transaction Filters
  Filter transactions by type (income/expense) and category.

• Categories Page
  Manage categories (add, delete) from a dedicated Categories page.

• Error & Loading UX
  Loading spinners, success messages, and user-facing error messages throughout the app.

• Docker Support (Optional)
  Easily run the application (frontend, backend, MongoDB) in separate containers using docker-compose.

Tech Stack

• Backend

  • Node.js + Express.js
  • MongoDB (with Mongoose)
  • JWT (jsonwebtoken) for authentication
  • bcrypt for password hashing
  • express-validator for input validation

• Frontend

  • React + React Router
  • Bootstrap for responsive design
  • Axios for API requests

• Deployment

  • Optional Docker & docker-compose
  • Can also be deployed on cloud providers (e.g., Heroku, Railway, AWS, etc.)

Project Structure

Personal-Finance-Manager/
├── backend/
│   ├── src/
│   │   ├── app.js                       # Main Express server setup & MongoDB connection
│   │   ├── routes/
│   │   │   ├── users.js                 # Routes for user signup/login & profile
│   │   │   ├── transactions.js          # Routes for CRUD operations on transactions
│   │   │   └── categories.js            # Routes for CRUD operations on categories
│   │   ├── controllers/
│   │   │   ├── userController.js        # Business logic for user operations
│   │   │   ├── transactionController.js # Business logic for transaction operations
│   │   │   └── categoryController.js    # Business logic for category operations
│   │   ├── models/
│   │   │   ├── User.js                  # Mongoose model for User (name, email, password)
│   │   │   ├── Transaction.js           # Mongoose model for Transaction (type, amount, date, etc.)
│   │   │   └── Category.js              # Mongoose model for Category (name, user reference)
│   │   ├── middleware/
│   │   │   ├── auth.js                  # JWT auth middleware to protect routes
│   │   │   └── validate.js              # express-validator result handler
│   │   └── validators/
│   │       ├── userValidator.js         # Signup/login validation
│   │       ├── transactionValidator.js  # Transaction validation
│   │       └── categoryValidator.js     # Category validation
│   ├── package.json                     # Backend dependencies & npm scripts
│   └── Dockerfile (optional)            # Docker configuration for the backend
├── frontend/
│   ├── public/
│   │   └── index.html                   # Main HTML for the React app
│   ├── src/
│   │   ├── context/
│   │   │   └── AuthContext.jsx          # Global auth state & login/logout
│   │   ├── components/
│   │   │   ├── AuthForm.jsx             # Signup/Login form for user authentication
│   │   │   ├── ProtectedRoute.jsx       # Route guard for authenticated users
│   │   │   ├── Dashboard.jsx            # Overview with income/expense/balance stats
│   │   │   ├── TransactionList.jsx      # List with filters, edit, delete
│   │   │   ├── TransactionForm.jsx      # Form to create or edit a transaction
│   │   │   ├── CategoryList.jsx         # Manage categories (add, delete)
│   │   │   └── Profile.jsx              # Display and manage user profile info
│   │   ├── services/
│   │   │   └── api.js                   # Axios instance setup & request interceptors
│   │   ├── App.js                       # Main React component with routes
│   │   └── index.js                     # React DOM entry point
│   ├── package.json                     # Frontend dependencies & npm scripts
│   └── Dockerfile (optional)            # Docker configuration for the frontend
├── docker-compose.yml (optional)        # Multi-container setup for backend, frontend, and DB
├── LICENSE                              # License file (MIT or other)
└── README.md                            # Project documentation

Installation

1. Clone the Repository

git clone https://github.com/m-ah07/Personal-Finance-Manager.git

2. Install Backend Dependencies

cd Personal-Finance-Manager/backend
npm install

3. Install Frontend Dependencies

cd ../frontend
npm install

4. Configure Environment Variables

Backend – Create a .env file in the backend folder (copy from backend/.env.example):

DB_URI=mongodb://127.0.0.1:27017/personal_finance
JWT_SECRET=your_secure_secret_here
PORT=5000

Frontend (optional) – Create a .env file in the frontend folder (copy from frontend/.env.example) to override the API URL:

REACT_APP_API_URL=http://localhost:5000/api

If not set, the frontend uses http://localhost:5000/api by default.

Usage

1. Start the Backend

From the backend directory:

npm run dev

• By default, runs on http://localhost:5000

2. Start the Frontend

Open a new terminal in the frontend directory:

npm start

• By default, runs on http://localhost:3000

3. Access the Application

Open your browser at http://localhost:3000. You can sign up for a new account or log in if you already have one.

Docker Deployment (Optional)

If you want to run everything via Docker containers, you can use the included docker-compose.yml.

1. Build and run:

   docker-compose up --build

2. Services:
   • Backend: Exposed on http://localhost:5000
   • Frontend: Exposed on http://localhost:3000
   • MongoDB: Running in the mongo container on port 27017

License

This project is licensed under the MIT License.
Feel free to modify, distribute, and use it as needed.

---

Happy budgeting and financial tracking! For any issues or contributions, please open an issue or create a pull request on GitHub.