BudgetMate

BudgetMate is a MERN (MongoDB, Express, React, Node) application that I’m using to manage personal expenses, with authentication and a few visual reports to understand spending patterns.

The project is split into:

• Backend – Node/Express REST API on top of MongoDB (via Mongoose)
• Frontend – React + React Router + Material‑UI
• Reports – Charts powered by victory to visualize expenses

---

Features

• User accounts
  • Register, log in, log out
  • Edit and delete your own profile
• Authentication & security
  • JWT‑based auth (express-jwt, jsonwebtoken)
  • Protected backend endpoints and React PrivateRoute on the client
  • Extra middleware like helmet, compression, and cors
• Expense management
  • Add new expenses
  • Browse all saved expenses
  • Quick overview on the home page for signed‑in users
• Reports
  • Monthly scatter chart
  • Yearly bar chart
  • Category‑wise pie chart
  • Available under /expenses/reports
• Server‑side rendering
  • Server renders the initial React markup
  • Material‑UI styles are generated on the server and attached to the HTML

---

Project Structure

Main folders and what they contain:

• server/ – Express app, routes, controllers, and data models
  • server/server.js – Connects to MongoDB and starts the HTTP server
  • server/express.js – Express configuration, middleware, SSR setup, and route wiring
  • server/models/ – Mongoose models (user.model.js, expense.model.js)
  • server/controllers/ – Logic for auth, user, and expense APIs
  • server/routes/ – Route definitions for the REST API
• client/ – The React frontend
  • client/main.js – Bootstraps the client bundle
  • client/App.js – Root React component with routing and theming
  • client/MainRouter.js – Main route configuration, including PrivateRoute
  • client/core/ – Home page and navigation
  • client/auth/ – Sign in page, auth helpers, and private route logic
  • client/user/ – User list, profile, edit profile, delete user
  • client/expense/ – Create, view, and delete expenses, plus overview
  • client/report/ – Reporting views: CategoryPie, MonthlyScatter, YearlyBar, Reports
  • client/theme.js – Shared Material‑UI theme
• config/config.js – Central configuration (port, DB URI, JWT secret)
• template.js – Base HTML markup for server‑side rendering
• Webpack configs – Build pipeline for both client and server bundles

---

Prerequisites

• Node.js: v13+ (any modern LTS should be fine)
• npm or yarn
• MongoDB: running either locally or in the cloud (e.g. Atlas)

---

Installation

1. Install dependencies

npm install

This pulls in everything needed for both the backend and frontend.

2. Configure environment (recommended)

Create a .env file or set environment variables in your shell to override the defaults in config/config.js:

• NODE_ENV – development (default) or production
• PORT – HTTP port (default: 3000)
• JWT_SECRET – Secret string used to sign JWTs (default: "YOUR_secret_key", which you should change)
• MONGODB_URI – Full MongoDB connection string (takes precedence)
• MONGO_HOST / MONGO_PORT – Host and port for MongoDB (defaults: localhost:27017)

If you don’t set MONGODB_URI, the app falls back to something like:

mongodb://<MONGO_HOST or localhost>:<MONGO_PORT or 27017>/budgetmate

Make sure MongoDB is running and reachable from the server.

---

Running the App (Development)

Runs the Express server together with webpack dev middleware and hot reloading:

npm run development

Then open http://localhost:3000 in your browser.

In development, devBundle.compile(app) is enabled in server/express.js to plug webpack into Express.

---

Main URLs (Frontend)

• / – Home page
  • When signed out: landing page with hero image and links to sign up / sign in
  • When signed in: shows ExpenseOverview
• /signup – User registration
• /signin – User login
• /users – List of registered users
• /user/:userId – User profile
• /user/edit/:userId – Edit profile (protected)
• /expenses/new – Add a new expense (protected)
• /expenses/all – View all expenses (protected)
• /expenses/reports – View charts/reports (protected)

Routes marked as protected require authentication and are wrapped with PrivateRoute.

---

API Overview (Backend)

This is a simplified overview; the actual endpoints live in server/routes/ and server/controllers/.

• Auth
  • POST /auth/signin – Sign in, returns JWT
  • GET /auth/signout – Sign out (client mostly handles local state)
• Users
  • POST /api/users – Create user
  • GET /api/users – List users
  • GET /api/users/:userId – Get a single user
  • PUT /api/users/:userId – Update user
  • DELETE /api/users/:userId – Delete user
• Expenses
  • Endpoints to create, read, and delete expenses; some are scoped to the current user and require a valid JWT.

Protected routes use express-jwt middleware and return 401 on invalid or expired tokens.

---

Technology Stack

• Frontend

  • React (react, react-dom)
  • Routing via react-router / react-router-dom
  • UI components and theming from @material-ui/core, @material-ui/icons, @material-ui/styles, @material-ui/pickers
  • Data visualization with victory
  • Hot reloading with react-hot-loader (development)

• Backend

  • Express (express)
  • MongoDB with Mongoose (mongoose)
  • Authentication: jsonwebtoken, express-jwt
  • Middleware: body-parser, cookie-parser, compression, cors, helmet

• Build & Tooling

  • Webpack (client + server bundles)
  • Babel with @babel/preset-env and @babel/preset-react
  • Nodemon for development server reloads

---

Development Notes

• Server‑side rendering (SSR)
  • Done in server/express.js with ReactDOMServer.renderToString
  • Uses StaticRouter and a shared Material‑UI ThemeProvider
  • Injects the collected CSS into the HTML template from template.js
• Client hydration
  • client/App.js removes the server‑side JSS styles after the first render to avoid duplicate styles
• Auth helper
  • client/auth/auth-helper.js stores JWTs in localStorage and attaches auth headers to API requests

---

Customization & Extension

• Tweak the theme in client/theme.js to adjust colors, typography, and overall styling.
• Extend the expense model and controllers if you want extra fields like tags, notes, or recurring flags.
• Add more visualizations under client/report/ (different time ranges, comparisons, exports, etc.).

---