01/06/2026
🚀 Build a MERN Stack E-commerce Project (Beginner Friendly)
📘 Step 1: Project Setup from Zero
Many beginners think:
“MERN projects are too advanced for me.”
That’s not true.
A MERN project is just small steps connected together.
Today we start with the most important step:
🔹 Step 1 — Setup the Project Properly
We will use:
MongoDB → Database
Express.js → Backend API
React + Vite → Frontend
Node.js → Runtime
Tailwind CSS → Styling
Axios → API requests
🛠 Before You Start
Install these tools on your computer:
✅ Required Software
Node.js (LTS version)
VS Code
MongoDB Atlas account (free)
Git (optional but recommended)
📁 Create Project Folder
Open terminal and run:
mkdir mern-ecommerce
cd mern-ecommerce
Now your main project folder is ready.
⚛️ Create Frontend (React + Vite)
Run:
npm create vite@latest frontend
Choose:
Framework: React
Variant: JavaScript
Then install packages:
cd frontend
npm install
npm install axios react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
🎨 Configure Tailwind CSS
Update tailwind.config.js
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
extend: {},
},
plugins: [],
Replace src/index.css with:
base;
components;
utilities;
🔙 Create Backend
Go back to main folder:
cd ..
mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv nodemon
📄 Create Basic Server
Create file: server.js
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
app.get("/", (req, res) => {
res.send("API Running...");
});
app.listen(5000, () => {
console.log("Server running on port 5000");
});
▶️ Run the Project
Start frontend:
cd frontend
npm run dev
Start backend:
cd backend
node server.js
✅ What You Completed Today
You now have:
✔ React frontend
✔ Tailwind styling setup
✔ Express backend
✔ Ready folder structure
✔ Working local development environment
That means you already started your first real MERN project 🎉
🔥 Next Step (Step 2)
In the next article we will build:
📦 Product Model + MongoDB Connection + API Routes
That’s where the project becomes exciting.
💙 Dan’s Tech Code Lab
Daily Coding Lessons | Memes | Motivation
Follow to learn coding the smart way 🚀
