#1 المقدمة

Project design

#2 Update all dependencies in package.json to the latest version
npm i -g npm-check-updates
ncu -u
npm install

Download files

#3 Home Page

Download files

#4 Cart Page

Download files

#5 Task Solution

Download files

Creating a Node.js API

#6 What is API & MERN stack
#7 Creating a Node.js API
1npm i express
2npm i cors
3in index.js
  
const express = require("express");
const cors = require("cors");
const app = express();
const products = require("./products");
app.use(express.json());
app.use(cors());
app.get("/", (req, res) => {
  res.send("Welcome our to online shop API...");
});
app.get("/products", (req, res) => {
  res.send(products);
});
const port = process.env.PORT || 5000;
app.listen(port, console.log(`http://localhost:${port}`));

4in products.js
  
const products = [
 {
   id: 1,
   productName: "T-shirt",
   description:
     "Lorem ipsum, dolor sit amet consectetur adipisicing elite. Sequi, perferendis beatae asperiores.",
   price: 100,
   imageLink: "",
 },
 {
   id: 2,
   productName: "T-shirt",
   description:
     "Lorem ipsum, dolor sit amet consectetur adipisicing elite. Sequi, perferendis beatae asperiores.",
   price: 200,
   imageLink: "",
 },
 {
   id: 3,
   productName: "T-shirt",
   description:
     "Lorem ipsum, dolor sit amet consectetur adipisicing elite. Sequi, perferendis beatae asperiores.",
   price: 300,
   imageLink: "",
 },
 {
   id: 4,
   productName: "T-shirt",
   description:
     "Lorem ipsum, dolor sit amet consectetur adipisicing elite. Sequi, perferendis beatae asperiores.",
   price: 400,
   imageLink: "",
 },
];
module.exports = products;

5node --watch index.js

JSON Formatter

Download files

#8 Upload images to Cloudinary

Download images

Download files

Redux Toolkit (RTK Query)

#9 Fetching data using Redux Toolkit (RTK Query)

Redux Toolkit

Download files

#10 Task Solution

Download files

Redux (with Redux Toolkit)

#11 Redux VS Redux Toolkit VS RTK Query المقدمة

Redux

Redux Toolkit

⭐ #12 Learn Redux Toolkit (Crash Course)

Redux Toolkit

Important Task

Download files

#13 Using Redux Toolkit in our project

Download files

#14 هنعمل ايه ؟؟

Download files

#15 (Spread Operator) مراجعة جافاسكريبت

المصدر

#16 addToCartFUCNCTION

Redux DevTools

Download files

#17 ؟ Array كيفية الحصول على عنصر معين من الـ

Download files

#18 Task Solution

Download files

⭐ #19 ؟ Array كيفية حذف عنصر معين من الـ

👉 By using filter() with !==

Download files

#20 هنعمل ايه ؟؟

Download files

#21 Task Solution

Download files

#22 Task Solution ( Array حذف عنصر معين من الـ )

Download files

#23 Task Solution (get product quantity)

Download files

localStorage (JSON.stringify & JSON.parse)

#24 localStorage (JSON.stringify & JSON.parse) شرح

Download files

#25 Task Solution (send data to localStorage)

Download files

#26 Task Solution (update quantity in localStorage)

Download files

#27 Calculate the total price

Download files

Product details page

#28 react-router-dom (dynamic links)

Download files

#29 Task Solution (node.js & Express.js)

Download files

#30 Using RTK Query to get one product

Download files

#31 How to get the params from the URL

Task

Download files

#32 Upload images to Cloudinary

Download images

Download files

#33 Task Solution

Download files

#34 Task Solution(Add product to cart)

Download files

Deploy (React & node) Project

#35 Deploy the project for free
In package.json
  
{
 "scripts": {
   "dev": "node index.js",
   "build": "npm i"
 },
 "dependencies": {
   "cors": "^2.8.5",
   "express": "^4.18.2"
 }
}

render.comfor Backend

netlify.comfor Frontend

#36 رفع الموقع بعد التعديل عليه
#37 Add Custom Domain (c4a.store)
😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك