نحوه کار به عنوان یک فروشگاه یکپارچه در پشته Mern

mern-store/  
├── client/          # Frontend (React)  
├── server/          # Backend (Node.js + Express)  
├── models/          # MongoDB Models  
├── routes/          # API Routes  
└── .env             # Environment Variables  

mkdir mern-store && cd mern-store  
mkdir server && cd server  
npm init -y  
npm install express mongoose cors dotenv bcryptjs jsonwebtoken stripe  

cd ..  
npx create-react-app client  
cd client  
npm install axios react-router-dom redux react-redux @reduxjs/toolkit  

// server/models/Product.js
const mongoose = require("mongoose");

const ProductSchema = new mongoose.Schema({
  name: { type: String, required: true },
  price: { type: Number, required: true },
  description: { type: String },
  image: { type: String },
  category: { type: String },
});
module.exports = mongoose.model("Product", ProductSchema);

// server/routes/productRoutes.js
const express = require("express");
const router = express.Router();
const Product = require("../models/Product");

// جلب جميع المنتجات
router.get("/", async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// إنشاء منتج جديد (للمشرف)
router.post("/", async (req, res) => {
  const product = new Product({ ...req.body });
  try {
    const newProduct = await product.save();
    res.status(201).json(newProduct);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});
module.exports = router;

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

const app = express();
app.use(cors());
app.use(express.json());

// توصيل MongoDB
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// Routes
app.use("/api/products", require("./routes/productRoutes"));
app.use("/api/users", require("./routes/userRoutes")); // نظام المستخدمين
app.use("/api/orders", require("./routes/orderRoutes")); // نظام الطلبات

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

// client/src/components/ProductList.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts } from "../features/productsSlice";

const ProductList = () => {
  const dispatch = useDispatch();
  const products = useSelector((state) => state.products.items);

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

  return (
    <div className="product-grid">
      {products.map((product) => (
        <div key={product._id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>{product.price} $</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};
export default ProductList;

// client/src/features/cartSlice.js
import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    addToCart: (state, action) => {
      const existingItem = state.items.find(
        (item) => item._id === action.payload._id
      );
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
    },
  },
});

export const { addToCart } = cartSlice.actions;
export default cartSlice.reducer;

npm install stripe

// server/routes/paymentRoutes.js
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

router.post("/create-payment-intent", async (req, res) => {
  const { amount } = req.body;
  const paymentIntent = await stripe.paymentIntents.create({
    amount: amount * 100, // تحويل المبلغ إلى سنتات
    currency: "usd",
  });
  res.send({ clientSecret: paymentIntent.client_secret });
});