Simple MERN Stack E-Commerce CRUD

Hey developers! In this article, we will cover all the things that are shown on the "Simple MERN Stack E-Commerce Product CRUD Project" that is uploaded to the "Code with Zihad" YouTube channel. So, following this article, you will be able to practice and make the project on your own through understanding all concepts. I will provide the context of why we are doing this or that and the code snippet also. So that anyone can understand and get the highest value from the article.

What are the prerequisites for starting to build the project?

Ans: Honestly, you have to learn JavaScript and the fundamentals of MERN stack so that you can understand all the things perfectly. Surely I will explain to you all the things from project setup to completing the project in a beginner-friendly way. But you have to learn JavaScript and MERN Stack basics first to get started with the project.

Note: Some people start with frontend and some with backend. My preference is to start with the backend that we can simply use the APIs in the frontend without using any static or demo data.

Now let's start and build the project "simple MERN Stack e-commerce product CRUD application where we can create, read, update, and delete the product with realtime functionality + search product filtering. so we will use Express to build the server instead of using plain Node.js because it's a little bit complex. and we will use ODM (Object Document Model) Mongoose to declare a schema as we want and using that schema we can easily run CRUD operation to MongoDB. Don't worry If you didn't used it, I will show how to do that.

Getting Started with Server

To create the server create a folder and open it with terminal and run npm init --y it will create a package.json file for our server and then we need to install packages for that run npm install express mongoose dotenv cors - with these we have installed all necessary packages we need to build our server. Run echo > server.js in your terminal to create server.js file you can create it anyway.

Now we have to make some changes in package.json following the code snippet below:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "mongoose": "^8.7.3"
  }
}

Simply we have to change the property "main": "index.js" to "server.js" and added another property "type": "module" that will enable the ES Module syntax. Inside scripts object we have to add a shortcut (you can say), that is "server": "node server.js"

We will follow structured folder pattern. Although we are building simple backend but we are gonna follow beginner friendly pattern.

Folder examples given below:

1. config - the config folder stores app configuration files, we will connect our database inside config folder in db.js file

2. models - where schemas are created using ODM / ORM, for our case we will use mongoose ODM and create a product schema

3. controllers - stores the controller file where the main function or business logic, incoming request and response are handled.

4. routes - for defining endpoints and point to controller that which endpoint is connected to which controller

There are many ways for structuring files, as long it is for beginners so this approach will helpful.

config/db.js

import mongoose from "mongoose";
const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI);
    console.log("MongoDB connected!");
  } catch (error) {
    console.error("Database connection error:", error);
    process.exit(1);
  }
};
export default connectDB;

Import mongoose and write a connectDB function and await mongoose.connect(your_mongodb_uri) will connect to you database. and write a console.log() that you can know your db is connected or occured any error. then export the function that you can access this file from another file.

server.js

import express from "express";
import dotenv from "dotenv";
import connectDB from "./config/db.js";
import cors from "cors";

dotenv.config();
connectDB();
const app = express();
app.use(express.json());
app.use(cors());

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

Here we have added dotenv.config() that we can use .env files variable in our app. Then we have called our connectDB function that we have written in config/db.js file. and express.json() is for supporting json from request body like body-parser and cors() is for allowing the server to use from react frontend. and also we have declared a port 5000.

models/product.model.js

import mongoose from "mongoose";
const productSchema = mongoose.Schema(
  {
    name: {type: String, required: true, unique: true},
    price: {type: Number, required: true},
    description: String,
    imageUrl: {type: String},
  },
  {timestamps: true}
);
export const Product = mongoose.model("Product", productSchema);

We are using Mongoose as ODM (Object Document Model) for create a desired schema. It will help us to prevent unnecessary data from inserting to our database. and It will work as a server side data validation, if you use required: true then it will be must required field, if someone don't input any data on that field it will throw validation error from mongoose. and we can easily do CRUD operations using the model.

controllers/product.controller.js

import {Product} from "../models/product.model.js";

export const getProducts = async (req, res) => {
  const products = await Product.find();
  res.json(products);
};

export const createProduct = async (req, res) => {
  try {
    const product = new Product(req.body);
    await product.save();
    res.status(201).json(product);
  } catch (error) {
    res.json({error: "Error creating product"});
  }
};

export const updateProduct = async (req, res) => {
  try {
    const product = await Product.findByIdAndUpdate(req.params.id, req.body, {
      new: true,
    });
    res.json(product);
  } catch (error) {
    res.json({error: "Error updating product"});
  }
};

export const deleteProduct = async (req, res) => {
  try {
    await Product.findByIdAndDelete(req.params.id);
    res.json({message: "Product deleted successfully"});
  } catch (error) {
    res.status(400).json({error: "Error deleting product"});
  }
};

All operation logics, request and response are handled here. so with that we have created our APIs. now will define endpoints for the APIs.

routes/product.route.js

import express from "express";
import {
  getProducts,
  createProduct,
  updateProduct,
  deleteProduct,
} from "../controllers/product.controller.js";
const router = express.Router();

router.get("/", getProducts);
router.post("/", createProduct);
router.put("/:id", updateProduct);
router.delete("/:id", deleteProduct);

export const ProductRoutes = router;

Now we have defined our end-points and exported router as ProductRoutes. lastly we have to change our server.js for handling our router in our application using app.use() middleware.

server.js

import express from "express";
import dotenv from "dotenv";
import connectDB from "./config/db.js";
import {ProductRoutes} from "./routes/product.route.js";
import cors from "cors";
// import router as you have exported
import { ProductRoutes } from "./routes/product.route.js";

dotenv.config();
connectDB();
const app = express();
app.use(express.json());
app.use(cors());

// all requests that start with /api/products
app.use("/api/products", ProductRoutes);

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

Great! Now open your server directory in your terminal and run the script that we have written at the first. npm run server to start the server.

Now you can test all the endpoints using Postman or Thunder Client. If all APIs working well then move forward to the client (fronted). If there is any issue then make sure you have done all the things correctly. you can also checkout the video on "Code with Zihad" YouTube channel.

Integrating the Server (APIs) with React.js

It's time to setup client meaning our JavaScript frontend framework React.js and Integrate the server (APIs) that we have previously build. To install react using vite run command npm create vite@latest client and select template react and variant javascript.

It will create client folder and initialized necessary packages inside it. Now change directory to client run cd client and run npm install axios to install all necessary packages and axios. we will use axios instead of fetch method to handle http requests.

For styling our web we will use CSS framework (Tailwind CSS). To Install it run following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

It will create tailwind.config.js that you have to modify following code snippet below:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and add following directives to index.css at the top

@tailwind base;
@tailwind components;
@tailwind utilities;

with these we have done our client setup. now we are good to dive into our main task. All we need is to create a components folder inside src directory. Now we have to create ProductForm.jsx and ProductList.jsx and add these components to App.jsx and modify itself also.

src/App.jsx

import {useEffect, useState} from "react";
import axios from "axios";
import ProductList from "./components/ProductList";
import ProductForm from "./components/ProductForm";

function App() {
  const [products, setProducts] = useState([]);
  const [selectedProduct, setSelectedProduct] = useState(null);

  const fetchProducts = async () => {
    try {
      const response = await axios.get("http://localhost:5000/api/products");
      setProducts(response.data);
    } catch (error) {
      console.error("Error fetching products!", error);
    }
  };

  const refreshProducts = () => {
    fetchProducts();
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  return (
    <div className="mx-5">
      <h1 className="text-3xl my-4 text-center">
        Simple E-commerce Product List
      </h1>
      <div className="md:flex max-w-screen-lg mx-auto gap-5  space-y-5 md:space-y-0 my-10">
        <ProductForm
          refreshProducts={refreshProducts}
          selectedProduct={selectedProduct}
          clearSelection={() => setSelectedProduct(null)}
        />
        <ProductList
          products={products}
          selectProduct={setSelectedProduct}
          refreshProducts={refreshProducts}
        />
      </div>
    </div>
  );
}

export default App;

src/components/ProductForm.jsx

import {useEffect, useState} from "react";
import axios from "axios";

const ProductForm = ({refreshProducts, selectedProduct, clearSelection}) => {
  const [formData, setFormData] = useState({
    name: "",
    price: "",
    description: "",
    imageUrl: "",
  });
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    if (selectedProduct) {
      setFormData({
        name: selectedProduct.name,
        price: selectedProduct.price,
        description: selectedProduct.description,
        imageUrl: selectedProduct.imageUrl,
      });
      setIsEditing(true);
    } else {
      setFormData({name: "", price: "", description: "", imageUrl: ""});
      setIsEditing(false);
    }
  }, [selectedProduct]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (isEditing) {
        const res = await axios.put(
          `http://localhost:5000/api/products/${selectedProduct._id}`,
          formData
        );
        if (res?.data?.error) {
          alert(res.data.error);
        }
        clearSelection();
      } else {
        const res = await axios.post(
          "http://localhost:5000/api/products",
          formData
        );
        if (res?.data?.error) {
          alert(res.data.error);
        }
      }
      refreshProducts();
      setFormData({name: "", price: "", description: "", imageUrl: ""});
    } catch (error) {
      console.error("Error saving product!", error);
    }
  };

  const handleChange = (e) => {
    const {name, value} = e.target;
    setFormData({...formData, [name]: value});
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="border border-gray-600  bg-slate-700 bg-opacity-50 rounded-lg py-6 p-4 min-w-[300px] h-fit">
      <div className="mb-4">
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          placeholder="Product Name"
          required
          className="w-full rounded p-2"
        />
      </div>
      <div className="mb-4">
        <input
          type="number"
          name="price"
          value={formData.price}
          onChange={handleChange}
          placeholder="Price"
          required
          className="w-full rounded p-2"
        />
      </div>
      <div className="mb-4">
        <textarea
          name="description"
          value={formData.description}
          onChange={handleChange}
          placeholder="Description"
          className="w-full rounded p-2"
        />
      </div>
      <div className="mb-4">
        <input
          name="imageUrl"
          value={formData.imageUrl}
          onChange={handleChange}
          placeholder="imageUrl"
          className="w-full rounded p-2"
        />
      </div>
      <div className="flex gap-2">
        <button
          type="submit"
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
          {isEditing ? "Update Product" : "Add Product"}
        </button>
        {isEditing && (
          <button
            type="button"
            onClick={() => {
              clearSelection();
              setFormData({name: "", price: "", description: ""});
            }}
            className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Cancel
          </button>
        )}
      </div>
    </form>
  );
};

export default ProductForm;

src/components/ProductList.jsx

import {useState} from "react";
import axios from "axios";

const ProductList = ({products, selectProduct, refreshProducts}) => {
  const [search, setSearch] = useState("");

  const handleDelete = async (id) => {
    try {
      await axios.delete(`http://localhost:5000/api/products/${id}`);
      refreshProducts();
    } catch (error) {
      console.error("Error deleting product!", error);
    }
  };

  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="w-full">
      <input
        type="text"
        placeholder="Search products..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="border border-gray-600 rounded w-full p-2 mb-4"
      />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-2">
        {filteredProducts.map((product) => (
          <div
            key={product._id}
            className="mb-4 p-2 border bg-gray-100 bg-opacity-10 border-gray-500 rounded shadow flex flex-col justify-between">
            <div>
              {" "}
              <img
                width={300}
                className="rounded w-full"
                src={
                  product.imageUrl ||
                  "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png"
                }
                alt=""
              />
              <h3 className="font-bold mt-2">{product.name}</h3>
              <p>{product.description}</p>
              <p>Price: ${product.price}</p>
            </div>
            <div className="flex justify-between mt-2">
              <button
                onClick={() => selectProduct(product)}
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold p-1 px-4 rounded mr-2 flex-1">
                Edit
              </button>
              <button
                onClick={() => handleDelete(product._id)}
                className="bg-red-500 hover:bg-red-700 text-white font-bold p-1 px-4 rounded flex-1">
                Delete
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

✅Great! npm run dev It's live locally. If you have done all the things correctly It will work. If there is any errors or issue please checkout the video form of this project on "Code with Zihad" YouTube channel.

You can add more functionality to this project like authentication, authorization & many more. Give your own touch to the project and unlock your creativity. Make sure to deploy the project to share it publicly.

Posted On November 3, 2024Simple MERN Stack E-Commerce CRUD

Getting Started with Server

Integrating the Server (APIs) with React.js