React se eCommerce website kaise banaye (step by step)

React se eCommerce website kaise banaye (step by step)

Aaj kal sab online store bana rahe hain. Koi fashion products bech raha hai, koi electronics, koi handmade gifts. Lekin jab aap khud start karte ho, sabse pehla sawal hota hai: React eCommerce website kaise banaye without getting confused by too many files, tools, and tutorials.

Is guide me hum practical tareeke se ek basic eCommerce website banayenge jisme product listing, cart system, backend API, MongoDB connection, aur frontend-backend integration hoga. Language simple Hinglish rahegi aur focus implementation par hoga, theory overload par nahi.

What You Will Build

Final project ek simple eCommerce website hogi jisme user products dekh sakega, cart me items add kar sakega, aur backend se live product data fetch hoga.

• Homepage par product listing page
• Reusable product card component
• Add to cart button and basic cart counter
• Remove from cart option
• Products API from Node.js backend
• MongoDB database for storing products

Ye foundation same project me later checkout, login, and payment add karne ke kaam aayegi.

Tech Stack Explanation

React

React frontend ke liye use hoga. Ek baar `ProductCard` component ban gaya to aap usko 10 products ke liye bhi use kar sakte ho aur 100 ke liye bhi.

Node.js + Express

Backend me Express routes banayega jahan se products fetch honge. Later yehi backend login, orders, payment callbacks, and admin APIs bhi handle karega.

MongoDB

MongoDB me products store honge. Name, price, image, stock, category jaise fields ko document format me rakhna beginner ke liye easy hota hai.

Stripe (Optional)

Payment ke liye Stripe ya Razorpay baad me add kiya ja sakta hai. Pehle foundation build karo. Payment tabhi smooth lagegi jab listing aur cart pehle se sahi kaam kar rahe hon.

Project Setup (Step by Step)

1. Frontend Setup

npx create-react-app client
cd client
npm install axios react-router-dom

`axios` API calls ke liye aur `react-router-dom` future pages jaise cart, product details, login ke liye helpful rahega.

2. Backend Setup

mkdir server
cd server
npm init -y
npm install express mongoose cors dotenv
npm install -D nodemon

3. Basic Folder Structure

project/
  client/
    src/
      components/
        ProductCard.jsx
        Navbar.jsx
      pages/
        Home.jsx
        Cart.jsx
      App.jsx
      index.js
  server/
    models/
      Product.js
    routes/
      productRoutes.js
    server.js
    .env

Ye structure beginner-friendly hai aur future scaling ke liye bhi clean base deta hai.

Frontend Development

Product Listing Page

Shuruat me static data se kaam karo. Jab UI ready ho jaye tab API connect karna easy hota hai.

import ProductCard from "../components/ProductCard";

const products = [
  { id: 1, name: "T-Shirt", price: 499, image: "/images/tshirt.jpg" },
  { id: 2, name: "Shoes", price: 1499, image: "/images/shoes.jpg" },
  { id: 3, name: "Watch", price: 1999, image: "/images/watch.jpg" },
];

function Home() {
  return (
    <div className="product-grid">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

export default Home;

Product Card Component

function ProductCard({ product, addToCart }) {
  return (
    <div className="card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>Rs. {product.price}</p>
      <button onClick={() => addToCart(product)}>
        Add to Cart
      </button>
    </div>
  );
}

export default ProductCard;

Basic UI CSS

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  background: #ffffff;
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.card button {
  margin-top: 10px;
  background: #111827;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}

Beginner phase me simple and working UI best hoti hai. Fancy design baad me bhi add ki ja sakti hai.

Backend Development (Node.js)

Create Server

const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
require("dotenv").config();

const app = express();

app.use(cors());
app.use(express.json()); // request body ko parse karega

mongoose
  .connect(process.env.MONGO_URI)
  .then(() => console.log("MongoDB connected"))
  .catch((error) => console.log(error));

app.get("/", (req, res) => {
  res.send("API is running");
});

app.listen(5000, () => {
  console.log("Server running on port 5000");
});

Create Product Model

const mongoose = require("mongoose");

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  price: { type: Number, required: true },
  image: { type: String, required: true },
  category: { type: String, required: true },
  stock: { type: Number, default: 0 },
});

module.exports = mongoose.model("Product", productSchema);

Basic Products Route

const express = require("express");
const router = express.Router();
const Product = require("../models/Product");

// Sabhi products bhejne ke liye
router.get("/", async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (error) {
    res.status(500).json({ message: "Server error" });
  }
});

module.exports = router;

Is route ko `server.js` me import karke use karo:app.use("/api/products", productRoutes);

Connecting Frontend + Backend

Ab hum static data hata kar backend se products fetch karenge. Ye step bohot important hai kyunki isi ke baad aapka frontend real database-driven app ban jata hai.

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

function Home({ addToCart }) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:5000/api/products")
      .then((response) => setProducts(response.data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div className="product-grid">
      {products.map((product) => (
        <ProductCard
          key={product._id}
          product={product}
          addToCart={addToCart}
        />
      ))}
    </div>
  );
}

export default Home;

Yaha full stack flow clear ho jata hai: frontend data ko dikhata hai, backend data ko serve karta hai, aur database data ko store karta hai.

Cart System

Cart functionality core feature hai. Agar refresh ke baad cart empty ho jaye, to site incomplete lagti hai. Isliye state ke saath `localStorage` bhi use karenge.

Add to Cart

import { useEffect, useState } from "react";

function App() {
  const [cart, setCart] = useState(() => {
    const savedCart = localStorage.getItem("cart");
    return savedCart ? JSON.parse(savedCart) : [];
  });

  const addToCart = (product) => {
    const updatedCart = [...cart, product];
    setCart(updatedCart);
    localStorage.setItem("cart", JSON.stringify(updatedCart));
  };

  return <Home addToCart={addToCart} />;
}

Remove from Cart

const removeFromCart = (id) => {
  const updatedCart = cart.filter((item) => item._id !== id);
  setCart(updatedCart);
  localStorage.setItem("cart", JSON.stringify(updatedCart));
};

Beginner level ke liye ye enough hai. Agar aap quantity, subtotal, coupon, ya per-user cart chahte ho, to later Context API ya Redux add kar sakte ho.

Bonus (Optional)

Authentication Basic Idea

Login and signup add karne ke liye aap JWT-based authentication use kar sakte ho. Isse user account, order history, aur saved address manage kar payega.

Payment Integration Overview

Payment gateway integrate karte waqt general flow hota hai: cart items lo, backend me total calculate karo, payment session create karo, success callback ke baad order save karo. India audience ke liye Stripe ke saath Razorpay bhi kaafi popular choice hai.

Common Errors + Fix

CORS Error Fix

Agar browser me error aaye ki frontend backend se baat nahi kar paa raha, to backend me `cors()` middleware enable karo. React app usually `localhost:3000` par hoti hai aur server `localhost:5000` par, isliye ye issue common hai.

Module Not Found Fix

Ye error tab aata hai jab package install nahi hota ya import path galat hota hai. Quick checklist:

• `npm install` dobara run karo
• Import spelling aur file extension check karo
• Folder structure match karwao
• Server ya React app restart karo

MongoDB Connection Error

`.env` file me `MONGO_URI` sahi hai ya nahi check karo. Atlas use kar rahe ho to network access aur username-password bhi verify karo.

Conclusion

Ab aapke paas ek clear roadmap hai ki React eCommerce website kaise banaye step by step. Humne frontend setup, reusable components, backend server, MongoDB model, API routes, aur cart storage tak ka full flow cover kiya.

Sabse important lesson ye hai ki project ko small milestones me build karo: pehle listing, phir API, phir cart, phir auth, phir payment.

Next step ke liye aap single product page, search bar, category filter, order summary, and checkout page add kar sakte ho. Agar React roadmap aur full stack direction aur strong karni hai, to React learning article aur frontend vs backend guide bhi padho. Chhota start karo, but complete build karo. Wahi real progress hoti hai.

FAQs

Kya React se full eCommerce website ban sakti hai?

Haan. React frontend ke liye strong hai, aur Node.js, Express, MongoDB ke saath milkar full eCommerce app easily ban sakta hai.

Kya React eCommerce project me Redux zaroori hai?

Nahi. Small projects me `useState` ya Context API enough hota hai. Redux tab use karo jab app ka state bohot complex ho jaye.

Kya backend ke bina shopping website bana sakte hain?

Demo ya portfolio project ke liye haan, but real eCommerce website ke liye backend almost mandatory hai.

Cart data kaha store karna chahiye?

Beginner project ke liye React state plus localStorage best hai. Logged-in users ke liye backend sync aur bhi better hota hai.

Is project ko deploy kaha kar sakte hain?

Frontend ko Vercel ya Netlify par, backend ko Render, Railway, ya VPS par, aur database ko MongoDB Atlas par deploy kar sakte ho.