📅 Day 2 Guide: Setting Up the Backend for Our MERN Stack Expense Tracker

Welcome back to Day 2 of building our Expense Tracker Web App from scratch using the MERN Stack! Yesterday, we laid the foundation for the frontend using React and Vite, with a clean folder structure and routing system.

Today, we shift gears to the backend setup — bringing in Node.js, Express.js, and MongoDB to power our server, APIs, and database integration. Let's dive right in! 🚀

---

🔧 Backend Architecture Overview

To maintain scalability and clean separation of concerns, we’ve structured our backend thoughtfully:

📁 Folder Structure (Backend)

bashCopyEditbackend/
├── configs/           # Database connection and environment configs
│   └── db.js
├── controllers/       # Logic for handling routes
│   ├── auth.js
│   ├── dashboard.js
│   ├── expense.js
│   └── income.js
├── models/            # MongoDB schemas/models
│   ├── User.js
│   ├── Expense.js
│   └── Income.js
├── routes/            # API route definitions
│   ├── authRoutes.js
│   ├── dashboardRoutes.js
│   ├── expenseRoutes.js
│   └── incomeRoutes.js
├── middlewares/       # Custom middleware
│   ├── authMiddleware.js
│   └── uploadMiddleware.js
├── uploads/           # Stores profile images for users
└── server.js          # Entry point for the Node.js server

---

⚙️ Backend Technologies Used

• Node.js – JavaScript runtime for the backend.

• Express.js – Fast, minimalist web framework.

• MongoDB – NoSQL database to store expenses, income, and user profiles.

• Mongoose – ODM to interact with MongoDB using schemas and models.

• dotenv – Manages environment variables securely.

• CORS – Cross-Origin Resource Sharing configuration.

• Multer (coming soon) – For handling profile image uploads.

---

📂 Key Server File: server.js

Here’s a breakdown of the main entry file:

jsCopyEditrequire("dotenv").config();
const express = require("express");
const cors = require("cors");
const path = require("path");
const connectDB = require("./configs/db");

// Import Routes
const authRoutes = require("./routes/authRoutes");
const dashboardRoutes = require("./routes/dashboardRoutes");
const expenseRoutes = require("./routes/expenseRoutes");
const incomeRoutes = require("./routes/incomeRoutes");

const app = express();

// CORS Setup
app.use(
  cors({
    origin: process.env.CLIENT_URL || "*",
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

// Parse incoming requests
app.use(express.json());

// Connect to MongoDB
connectDB();

// API Routes
app.use("/api/v1/auth", authRoutes);
app.use("/api/v1/dashboard", dashboardRoutes);
app.use("/api/v1/expense", expenseRoutes);
app.use("/api/v1/income", incomeRoutes);

// Serve user-uploaded profile pictures
app.use("/uploads", express.static(path.join(__dirname, "uploads")));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running at port ${PORT}`);
});

---

🔐 Today’s Steps

Now that we have the backend structure and server up and running, here’s what’s I have done in today’s time:

• Implementing authentication using JWT.

• Building and connecting MongoDB models for users, income, and expense.

• Creating secure APIs for user registration, login, adding/removing expenses and incomes.

• Setting up profile image uploads.

• Integrating frontend and backend with protected routes.

---

👨‍💻 Developer’s Note

Organizing your codebase from day one makes scaling and debugging significantly easier. By separating routes, controllers, and middleware, we’re keeping things modular, maintainable, and clean — which every developer will appreciate in the long run.

---

📌 Recap

✅ Set up the frontend with React + Vite
✅ Established a tidy folder structure for both the frontend and backend
✅ Installed essential backend tools: Node, Express, MongoDB
✅ Connected the server to the database
✅ Built a modular backend architecture for API endpoints and future features

---

Source Code - Day02

• The source code for Day 2 of this project will be available on GitHub, where you can explore the detailed implementation of the features we discussed. You will find all the code necessary to understand how we set up the backend structure, implemented authentication, and connected our MongoDB models.

  GitHub - https://github.com/vishalgupta-02

• Additionally, I am maintaining comprehensive documentation for this project to ensure better access and management of all the components involved. This documentation will provide step-by-step guidance and insights into the development process, making it easier for you to follow along and replicate the setup if needed.

  Documentation Link - https://expense-tracker-web.hashnode.space/

💬 Follow along tomorrow (Day 3) as we dive into building more stuffs required to run the expense tracker app!