Day 1 Guide: Launch Your MERN Stack Expense Tracker with Vite + React Frontend

Hey devs! 👋
Welcome to Day 1 of my journey building a fully functional Expense Tracker Website using the MERN stack — MongoDB, Express.js, React.js, and Node.js.

The goal? Build a modern, responsive, and intelligent app that allows users to track their income and expenses, view visual breakdowns, and manage personal finances effortlessly.

Today, I focused on laying a solid frontend foundation. This is where everything begins, and getting the architecture right from the start is crucial for building a scalable and maintainable application.

---

🌟 Why MERN Stack?

The MERN stack is a powerful and popular full-stack JavaScript solution used to build robust and modern web applications. Here's why it's the perfect choice for this project:

✅ Unified Language – JavaScript

Use JavaScript across the stack — from frontend (React) to backend (Node.js) to database queries (MongoDB). This simplifies development and accelerates productivity.

⚛️ React.js – Rich UI Components

React enables us to build dynamic, reusable, and performant user interfaces with powerful tools like Hooks and Context API.

🌐 Express.js – Lightweight Backend Framework

Express offers a minimal and flexible Node.js framework that handles routing, middleware, and server logic efficiently.

🍃 MongoDB – NoSQL Flexibility

MongoDB stores data in JSON-like documents, which makes it ideal for applications that handle varied and evolving data structures (like expenses, users, categories).

🚀 Fast Prototyping

MERN enables rapid development and iteration, perfect for MVPs, hackathons, and scalable product builds.

🔒 Scalable & Secure

Using tools like JWT, bcrypt, and Mongoose, MERN apps can scale easily with proper authentication, validation, and data modeling.

✅ Goals for Day 1

• Initialize the frontend using React + Vite

• Organize the folder structure for clean code separation

• Build basic routing with React Router

• Create the Auth pages: Login & Signup

• Add reusable components like Input and ProfilePic

• Implement an AuthLayout for consistent UI

• Plan Dashboard routes for Home, Income, and Expense pages

---

⚙️ Step 1: Setting Up the React App with Vite

Why Vite? It offers a faster development experience with optimized builds and lightning-fast HMR.

bashCopyEditnpm create vite@latest expense-tracker-frontend --template react
cd expense-tracker-frontend
npm install
npm run dev

Boom 💥 — We had a blazing fast React app running in seconds.

---

🧱 Step 2: Folder Structure for Scalable Development

To avoid future chaos and promote clean separation of concerns, I created the following directory structure:

bashCopyEditsrc/
├── assets/         # Images, SVGs, logos
├── components/     # Reusable UI components (Input, Button, Navbar, ProfilePic)
├── contexts/       # React Context (e.g., AuthContext, ExpenseContext)
├── hooks/          # Custom hooks (e.g., useAuth, useForm)
├── pages/
│   ├── Auth/       # Login and Signup pages
│   └── Dashboard/  # Home, Income, Expense pages
├── utils/          # Utility functions (validators, formatters)
├── App.jsx         # App routing setup
├── main.jsx        # App entry point

This structure keeps things modular, maintainable, and future-ready.

---

🛠️ Step 3: Routing with React Router

I configured routing for the key pages using react-router-dom. Here's the routing logic inside App.jsx:

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import Login from "./pages/Auth/Login";
import Signup from "./pages/Auth/Signup";
import Home from "./pages/Dashboard/Home";
import Income from "./pages/Dashboard/Income";
import Expense from "./pages/Dashboard/Expense";

const App = () => {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<Root />} />
          <Route path="/login" exact element={<Login />} />
          <Route path="/signup" exact element={<Signup />} />
          <Route path="/dashboard" exact element={<Home />} />
          <Route path="/income" exact element={<Income />} />
          <Route path="/expense" exact element={<Expense />} />
        </Routes>
      </Router>
    </div>
  );
};

This sets up the routing for both the authentication flow and the dashboard flow.

---

🧑‍💼 Step 4: Authentication Pages and Layout

I created an AuthLayout component to wrap both Login and Signup forms with consistent styling and layout logic. This will help us:

• Maintain consistent design

• Avoid repetition

• Improve UX structure

🔐 Login & Signup Forms

Built simple, clean, and responsive forms with reusable Input components.

👤 ProfilePic Component

The ProfilePic component allows users to upload or preview an avatar during signup — this will be integrated later with backend storage. Adding this early on sets the tone for a personalized user experience.

---

📂 Planned Dashboard Pages

We’ve scaffolded the routing for the Dashboard section, which includes:

• Home Page: Will show an overview of all transactions and a summary.

• Income Page: For viewing and adding income transactions.

• Expense Page: For tracking all expenses.

We haven’t built these pages yet — they’re placeholders for now — but having their routes in place will streamline development later.

---

📝 Summary of Day 1

---

🔮 What’s Next (Day 2 Goals)

On Day 2, the plan is to:

• Set up the Node.js + Express backend

• Initialize a MongoDB database

• Create User and Expense models

• Implement authentication APIs

• Create Multiple routes such as Authentication, Dashboard, Expense and Income

• Setup the folder structure for the backend - models, configs, controllers, middlewares , routes and uploads alongwith basic node configuration files

---

🚀 Final Thoughts

First impressions matter — even in code. By starting with a clean architecture, reusable components, and a structured layout, I’ve set the foundation for a robust and scalable app. Whether you're new to MERN or experienced, I hope you find this journey useful and inspiring.

Stay tuned for Day 2, where we bring this app to life with a powerful backend!

If you’d like to collaborate or want the GitHub repo link once it’s live, feel free to reach out! 💬

Here’s my social links -

Email - abhimanyug987@gmail.com

LinkedIn - https://www.linkedin.com/in/vishal-gupta-16018719a/

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