كيفية بناء نسخة شبيهة بـ YouTube باستخدام React خطوة بخطوة

إذا كنت ترغب في بناء منصة فيديو حديثة بواجهة تفاعلية وتجربة استخدام قريبة من YouTube، فإن الجمع بين React في الواجهة الأمامية وNode.js في الخلفية يعد خياراً عملياً وقوياً. في هذا الدليل سنستعرض تصوراً متكاملاً لبناء نسخة شبيهة بـ YouTube عبر عشر خطوات منظمة، مع التركيز على البنية البرمجية، إدارة البيانات، المصادقة، رفع الفيديوهات، وتجهيز التطبيق للنشر.

الهدف هنا ليس مجرد تقليد الواجهة، بل فهم كيفية تصميم تطبيق فيديو متكامل قابل للتوسع، يضم المستخدمين، القنوات، التعليقات، الإعجابات، المشاهدات، وصفحات التصفح المختلفة.

1) تصميم البيانات وإنشاء قاعدة البيانات

أي تطبيق فيديو ناجح يبدأ من قاعدة بيانات مصممة بعناية. في هذا المشروع لدينا جزآن رئيسيان:

• خلفية التطبيق باستخدام Node.js.
• الواجهة الأمامية باستخدام React.

الواجهة الخلفية ستكون مسؤولة عن:

• تسجيل الدخول والتحقق من هوية المستخدم.
• إدارة صلاحيات الوصول إلى البيانات.
• توفير بيانات الفيديوهات والتعليقات والإعجابات والمشاهدات.
• إرجاع بيانات القنوات والملفات الشخصية.

أما قاعدة البيانات، فسنستخدم PostgreSQL مع أداة Prisma التي تعمل كـ ORM لتنظيم النماذج والعلاقات بين الجداول بطريقة واضحة وسهلة الصيانة.

يتكون المشروع من ستة نماذج بيانات أساسية:

• User
• Comment
• Subscription
• Video
• VideoLike
• View

فيما يلي ملف المخطط النهائي لقاعدة البيانات:

// prisma.schema
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id           String         @id @default(uuid())
  createdAt    DateTime       @default(now())
  username     String
  email        String         @unique
  avatar       String         @default("https://reedbarger.nyc3.digitaloceanspaces.com/default-avatar.png")
  cover        String         @default("https://reedbarger.nyc3.digitaloceanspaces.com/default-cover-banner.png")
  about        String         @default("")
  videos       Video[]
  videoLikes   VideoLike[]
  comments     Comment[]
  subscribers  Subscription[] @relation("subscriber")
  subscribedTo Subscription[] @relation("subscribedTo")
  views        View[]
}

model Comment {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now())
  text      String
  userId    String
  videoId   String
  user      User     @relation(fields: [userId], references: [id])
  video     Video    @relation(fields: [videoId], references: [id])
}

model Subscription {
  id             String   @id @default(uuid())
  createdAt      DateTime @default(now())
  subscriberId   String
  subscribedToId String
  subscriber     User     @relation("subscriber", fields: [subscriberId], references: [id])
  subscribedTo   User     @relation("subscribedTo", fields: [subscribedToId], references: [id])
}

model Video {
  id          String      @id @default(uuid())
  createdAt   DateTime    @default(now())
  title       String
  description String?
  url         String
  thumbnail   String
  userId      String
  user        User        @relation(fields: [userId], references: [id])
  videoLikes  VideoLike[]
  comments    Comment[]
  views       View[]
}

model VideoLike {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now())
  like      Int      @default(0)
  userId    String
  videoId   String
  user      User     @relation(fields: [userId], references: [id])
  video     Video    @relation(fields: [videoId], references: [id])
}

model View {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now())
  userId    String?
  videoId   String
  user      User?    @relation(fields: [userId], references: [id])
  video     Video    @relation(fields: [videoId], references: [id])
}

هذا المخطط يوضح طبيعة العلاقات داخل المنصة. على سبيل المثال، المستخدم الواحد منطقياً يمكنه رفع عدة فيديوهات، ولهذا نجد أن الحقل videos داخل نموذج User يحمل النوع Video[]. الفكرة نفسها تنطبق على التعليقات والمشاهدات والإعجابات والاشتراكات.

2) إنشاء مسارات المصادقة والفيديوهات والمستخدمين

بعد الانتهاء من تصميم البيانات، ننتقل إلى منطق العمل في الواجهة الخلفية. هنا نستخدم Express مع Node.js لبناء واجهة برمجية API مرنة.

يمكن تقسيم المسارات الرئيسية إلى ثلاثة أقسام:

• مسارات المصادقة.
• مسارات الفيديوهات.
• مسارات المستخدمين.

مثال على بدايات هذه المسارات:

http://localhost:3001/api/v1/auth
http://localhost:3001/api/v1/videos
http://localhost:3001/api/v1/users

ولفهم طريقة العمل بشكل أوضح، إليك مثالاً على ملف مسارات الفيديو:

// server/src/routes/video.js
import { PrismaClient } from "@prisma/client";
import express from "express";

const prisma = new PrismaClient();

function getVideoRoutes() {
  const router = express.Router();
  router.get("/", getRecommendedVideos);
  router.get("/trending", getTrendingVideos);
  // ... many more routes omitted
  return router;
}

export async function getVideoViews(videos) {
  for (const video of videos) {
    const views = await prisma.view.count({
      where: {
        videoId: {
          equals: video.id,
        },
      },
    });
    video.views = views;
  }
  return videos;
}

async function getRecommendedVideos(req, res) {
  let videos = await prisma.video.findMany({
    include: {
      user: true,
    },
    orderBy: {
      createdAt: "desc",
    },
  });

  if (!videos.length) {
    return res.status(200).json({ videos });
  }

  videos = await getVideoViews(videos);
  res.status(200).json({ videos });
}

async function getTrendingVideos(req, res) {
  let videos = await prisma.video.findMany({
    include: {
      user: true,
    },
    orderBy: {
      createdAt: "desc",
    },
  });

  if (!videos.length) {
    return res.status(200).json({ videos });
  }

  videos = await getVideoViews(videos);
  videos.sort((a, b) => b.views - a.views);
  res.status(200).json({ videos });
}

يُستخدم express.Router لتجميع المسارات الفرعية تحت المسار الرئيسي /api/v1/videos. وكل مسار يتم تعريفه عبر أحد الأساليب مثل get أو post أو put أو delete.

الدوال المرتبطة بهذه المسارات تُسمى عادة controllers، وهي المسؤولة عن تنفيذ منطق الطلب. في المثال السابق:

• getRecommendedVideos تعيد الفيديوهات المقترحة.
• getTrendingVideos تعيد الفيديوهات الرائجة بناءً على عدد المشاهدات.

كما نلاحظ، يتم الاعتماد على PrismaClient للاستعلام من قاعدة البيانات باستخدام الدالة findMany()، مع تضمين بيانات صاحب الفيديو بواسطة include وترتيب النتائج حسب الحقل createdAt تنازلياً عبر القيمة desc.

3) حماية المسارات الحساسة باستخدام Middleware

ليست كل المسارات متاحة للجميع. بعض العمليات، مثل الوصول إلى الفيديوهات المعجب بها أو تعديل بيانات المستخدم، تتطلب التحقق من هوية المستخدم أولاً.

هنا يأتي دور middleware، وهي دوال تعمل قبل تنفيذ controller الأساسي. مثال على ذلك:

// server/src/routes/user.js
import { PrismaClient } from "@prisma/client";
import express from "express";
import { protect } from "../middleware/authorization";

const prisma = new PrismaClient();

function getUserRoutes() {
  const router = express.Router();
  router.get("/liked-videos", protect, getLikedVideos);
  return router;
}

في هذا المثال، سيتم تنفيذ protect أولاً قبل getLikedVideos.

أما كود الحماية نفسه فيبدو كالتالي:

// server/src/middleware/authorization.js
import { PrismaClient } from "@prisma/client";
import jwt from "jsonwebtoken";

const prisma = new PrismaClient();

export async function protect(req, res, next) {
  if (!req.cookies.token) {
    return next({
      message: "You need to be logged in to visit this route",
      statusCode: 401,
    });
  }

  try {
    const token = req.cookies.token;
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    const user = await prisma.user.findUnique({
      where: {
        id: decoded.id,
      },
      include: {
        videos: true,
      },
    });

    req.user = user;
    next();
  } catch (error) {
    next({
      message: "You need to be logged in to visit this route",
      statusCode: 401,
    });
  }
}

تعتمد هذه الطبقة على JWT للتحقق من صلاحية جلسة المستخدم. وإذا لم يكن التوكن موجوداً أو كان غير صالح، يتم إرجاع خطأ 401، وهو رمز يعني أن المستخدم غير مخول للوصول إلى المورد المطلوب.

تُعد طبقة middleware أساسية في مثل هذا النوع من التطبيقات، لأنها تساعد في:

• التحقق من هوية المستخدم الحالي.
• حماية المسارات الحساسة.
• منع الوصول غير المصرح به.
• التعامل مع الأخطاء بشكل مركزي ومنظم.

4) إنشاء صفحات واجهة React وتنسيقها

بعد تجهيز الواجهة الخلفية، ننتقل إلى تطبيق React. يمكن بدء المشروع بسهولة باستخدام Create React App عبر الأمر التالي:

npx create-react-app client

بعد التثبيت، سيكون لدينا مجلد client لتطبيق الواجهة، إلى جانب مجلد server الخاص بالخلفية.

أول خطوة مهمة داخل الواجهة الأمامية هي تعريف المسارات التي تمثل صفحات التطبيق:

// client/src/App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import MobileNavbar from "./components/MobileNavbar";
import Navbar from "./components/Navbar";
import Sidebar from "./components/Sidebar";
import { useLocationChange } from "./hooks/use-location-change";
import Channel from "./pages/Channel";
import History from "./pages/History";
import Home from "./pages/Home";
import Library from "./pages/Library";
import LikedVideos from "./pages/LikedVideos";
import NotFound from "./pages/NotFound";
import SearchResults from "./pages/SearchResults";
import Subscriptions from "./pages/Subscriptions";
import Trending from "./pages/Trending";
import WatchVideo from "./pages/WatchVideo";
import YourVideos from "./pages/YourVideos";
import Container from "./styles/Container";

function App() {
  const [isSidebarOpen, setSidebarOpen] = React.useState(false);
  const handleCloseSidebar = () => setSidebarOpen(false);
  const toggleSidebarOpen = () => setSidebarOpen(!isSidebarOpen);

  useLocationChange(handleCloseSidebar);

  return (
    <>
      <Navbar toggleSidebarOpen={toggleSidebarOpen} />
      <Sidebar isSidebarOpen={isSidebarOpen} />
      <MobileNavbar />
      <Container>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/watch/:videoId" component={WatchVideo} />
          <Route path="/channel/:channelId" component={Channel} />
          <Route path="/results/:searchQuery" component={SearchResults} />
          <Route path="/feed/trending" component={Trending} />
          <Route path="/feed/subscriptions" component={Subscriptions} />
          <Route path="/feed/library" component={Library} />
          <Route path="/feed/history" component={History} />
          <Route path="/feed/my_videos" component={YourVideos} />
          <Route path="/feed/liked_videos" component={LikedVideos} />
          <Route path="*" component={NotFound} />
        </Switch>
      </Container>
    </>
  );
}

هنا يتم استخدام مكتبة react-router-dom لإدارة التنقل بين الصفحات، إضافة إلى الاستفادة من أدوات مفيدة مثل useParams للوصول إلى معلمات الرابط وuseHistory للتنقل البرمجي.

تنسيق الواجهة باستخدام styled-components

بدلاً من استخدام ملفات CSS التقليدية فقط، يمكن الاعتماد على مكتبة styled-components، وهي مكتبة CSS-in-JS تسمح بكتابة الأنماط داخل ملفات JavaScript.

من مزاياها:

• كتابة الأنماط بجانب المكونات نفسها.
• تمرير props للتحكم بالشكل ديناميكياً.
• عزل الأنماط داخل كل مكوّن ومنع التضارب بينها.

مثال على زر مخصص:

// client/src/styles/Button.js
import styled, { css } from "styled-components";

const Button = styled.button`
  padding: 10px 16px;
  border-radius: 1px;
  font-weight: 400;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  text-transform: uppercase;
  letter-spacing: 0.02857em;

  ${(props) =>
    props.red &&
    css`
      background: ${(props) => props.theme.darkRed};
      border: 1px solid ${(props) => props.theme.darkRed};
      color: white;
    `}
`;

export default Button;

واستخدامه يكون بالشكل التالي:

// example usage:
import React from "react";
import Button from "../styles/Button";
import Wrapper from "../styles/EditProfile";

function EditProfile() {
  return (
    <Wrapper>
      <div>
        <Button red onClick={() => setShowModal(true)}>
          Edit Profile
        </Button>
      </div>
    </Wrapper>
  );
}

5) إضافة تسجيل الدخول عبر Google OAuth

في منصات الفيديو، تبسيط التسجيل والدخول يرفع من معدل التفاعل. لذلك يمكن دمج Google OAuth بسهولة عبر مكتبة react-google-login.

المكوّن التالي يوضح زر تسجيل الدخول باستخدام حساب Google:

// client/src/components/GoogleAuth.js
import React from "react";
import Button from "../styles/Auth";
import { SignInIcon } from "./Icons";
import { GoogleLogin } from "react-google-login";
import { authenticate } from "../utils/api-client";

function GoogleAuth() {
  return (
    <GoogleLogin
      clientId="your-client-id-from-google-oauth"
      cookiePolicy="single_host_origin"
      onSuccess={authenticate}
      onFailure={authenticate}
      render={(renderProps) => (
        <Button
          tabIndex={0}
          type="button"
          onClick={renderProps.onClick}
          disabled={renderProps.disabled}
        >
          <span className="outer">
            <span className="inner">
              <SignInIcon />
            </span>
            sign in
          </span>
        </Button>
      )}
    />
  );
}

export default GoogleAuth;

هذه الخطوة تختصر تجربة الدخول وتسمح بربط الحسابات بسرعة، مع تحسين الثقة وتقليل عدد الحقول المطلوبة من المستخدم.

6) جلب البيانات بكفاءة عبر React Query

بعد تفعيل المصادقة، تأتي مرحلة جلب البيانات من الواجهة الخلفية. غالباً سنستخدم مكتبة axios لإرسال الطلبات، لكن لإدارة الطلبات بشكل احترافي داخل React من الأفضل استخدام react-query.

أهم ما يميز React Query:

• التخزين المؤقت cache للنتائج.
• إعادة استخدام البيانات بين المكونات.
• إدارة حالات التحميل والخطأ والنجاح بسهولة.
• تقليل الطلبات المتكررة غير الضرورية.

مثال على جلب الفيديوهات المقترحة في الصفحة الرئيسية:

// client/src/pages/Home.js
import axios from "axios";
import React from "react";
import { useQuery } from "react-query";
import ErrorMessage from "../components/ErrorMessage";
import VideoCard from "../components/VideoCard";
import HomeSkeleton from "../skeletons/HomeSkeleton";
import Wrapper from "../styles/Home";
import VideoGrid from "../styles/VideoGrid";

function Home() {
  const {
    data: videos,
    isSuccess,
    isLoading,
    isError,
    error,
  } = useQuery("Home", () =>
    axios.get("/videos").then((res) => res.data.videos)
  );

  if (isLoading) return <HomeSkeleton />;
  if (isError) return <ErrorMessage error={error} />;

  return (
    <Wrapper>
      <VideoGrid>
        {isSuccess
          ? videos.map((video) => <VideoCard key={video.id} video={video} />)
          : null}
      </VideoGrid>
    </Wrapper>
  );
}

export default Home;

بهذه الطريقة، يحصل المستخدم على تجربة أكثر سلاسة، إذ تظهر عناصر Skeleton أثناء التحميل، وتُعرض رسائل الخطأ بشكل واضح عند الحاجة.

7) رفع الفيديوهات وتشغيلها داخل المنصة

من أهم مكونات أي تطبيق شبيه بـ YouTube القدرة على رفع الفيديوهات وتشغيلها بسلاسة.

رفع الفيديوهات باستخدام Cloudinary

يمكن استخدام خدمة Cloudinary لرفع ملفات الفيديو من الواجهة الأمامية. سير العمل يكون غالباً كالتالي:

1. يختار المستخدم ملف الفيديو من جهازه.
2. يتم إرسال الملف إلى واجهة Cloudinary API.
3. تعيد الخدمة رابط URL للفيديو بعد اكتمال الرفع.
4. يُحفظ هذا الرابط مع بيانات الفيديو داخل قاعدة البيانات.

تشغيل الفيديو باستخدام video.js

لعرض الفيديو داخل التطبيق بطريقة احترافية، يمكن الاعتماد على مكتبة video.js. مثال على مكوّن المشغّل:

// client/src/components/VideoPlayer.js
import React from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { addVideoView } from "../utils/api-client";

function VideoPlayer({ video }) {
  const videoRef = React.useRef();
  const { id, url, thumbnail } = video;

  React.useEffect(() => {
    const vjsPlayer = videojs(videoRef.current);
    vjsPlayer.poster(thumbnail);
    vjsPlayer.src(url);
    vjsPlayer.on("ended", () => {
      addVideoView(id);
    });
  }, [id, thumbnail, url]);

  return (
    <div data-vjs-player>
      <video
        controls
        ref={videoRef}
        className="video-js vjs-fluid vjs-big-play-centered"
      >
      </video>
    </div>
  );
}

export default VideoPlayer;

بعد تشغيل الفيديو، يمكن إضافة مزايا أخرى أسفل المشغل مثل:

• التعليقات.
• الإعجاب وعدم الإعجاب.
• الاشتراك في القناة.
• تسجيل المشاهدات.

وكل هذه الوظائف تتم عبر طلبات موجهة إلى نقاط API المناسبة.

8) حماية الإجراءات الحساسة في الواجهة عبر Custom Hook

حتى لو كانت بعض المسارات محمية في الخادم، من الأفضل أيضاً تحسين تجربة الواجهة عبر منع المستخدم غير المسجّل من تنفيذ إجراءات تتطلب مصادقة، مثل التعليق أو الإعجاب أو الاشتراك.

لهذا يمكن إنشاء custom hook مخصص باسم useAuthAction:

// client/src/hooks/use-auth-action.js
import { useGoogleLogin } from "react-google-login";
import { useAuth } from "../context/auth-context";
import { authenticate } from "../utils/api-client";

export default function useAuthAction() {
  const user = useAuth();
  const { signIn } = useGoogleLogin({
    onSuccess: authenticate,
    clientId: "your-client-id",
  });

  function handleAuthAction(authAction, data) {
    if (user) {
      authAction(data);
    } else {
      signIn();
    }
  }

  return handleAuthAction;
}

ويمكن استخدامه داخل صفحة مشاهدة الفيديو على النحو التالي:

// client/src/pages/WatchVideo.js
function WatchVideo() {
  const handleAuthAction = useAuthAction();

  function handleLikeVideo() {
    handleAuthAction(likeVideo, video.id);
  }

  function handleDislikeVideo() {
    handleAuthAction(dislikeVideo, video.id);
  }

  function handleToggleSubscribe() {
    handleAuthAction(toggleSubscribeUser, video.user.id);
  }

  // rest of component
}

الميزة هنا أن منطق الحماية يصبح قابلاً لإعادة الاستخدام في أكثر من مكوّن، بدلاً من تكرار الشروط في كل مكان.

9) تعديل بيانات القناة وصور المستخدم

التطبيق الشبيه بـ YouTube لا يكتمل من دون صفحة قناة تسمح للمستخدم بإدارة بياناته الشخصية، مثل:

• اسم القناة.
• الوصف التعريفي.
• الصورة الشخصية.
• صورة الغلاف.

يمكن رفع الصور أيضاً عبر Cloudinary، ثم حفظ الروابط الجديدة في قاعدة البيانات. ولعرض نموذج التعديل بطريقة أنيقة وسهلة الوصول، يمكن استخدام مكتبة @reach/dialog.

مثال على مكوّن تعديل القناة:

// client/src/components/EditChannelModal.js
import React from "react";
import { useSnackbar } from "react-simple-snackbar";
import Button from "../styles/Button";
import Wrapper from "../styles/EditChannelModal";
import { updateUser } from "../utils/api-client";
import { uploadMedia } from "../utils/upload-media";
import { CloseIcon } from "./Icons";

function EditChannelModal({ channel, closeModal }) {
  const [openSnackbar] = useSnackbar();
  const [cover, setCover] = React.useState(channel.cover);
  const [avatar, setAvatar] = React.useState(channel.avatar);

  async function handleCoverUpload(event) {
    const file = event.target.files[0];
    if (file) {
      const cover = await uploadMedia({
        type: "image",
        file,
        preset: "your-cover-preset",
      });
      setCover(cover);
    }
  }

  async function handleAvatarUpload(event) {
    const file = event.target.files[0];
    if (file) {
      const avatar = await uploadMedia({
        type: "image",
        file,
        preset: "your-avatar-preset",
      });
      setAvatar(avatar);
    }
  }

  async function handleEditChannel(event) {
    event.preventDefault();
    const username = event.target.elements.username.value;
    const about = event.target.elements.about.value;

    if (!username.trim()) {
      return openSnackbar("Username cannot be empty");
    }

    const user = {
      username,
      about,
      avatar,
      cover,
    };

    await updateUser(user);
    openSnackbar("Channel updated");
    closeModal();
  }

  return (
    <Wrapper>
      <div className="edit-channel">
        <form onSubmit={handleEditChannel}>
          <div className="modal-header">
            <h3>
              <CloseIcon onClick={closeModal} />
              <span>Edit Channel</span>
            </h3>
            <Button type="submit">Save</Button>
          </div>

          <div className="cover-upload-container">
            <label htmlFor="cover-upload">
              <img className="pointer" width="100%" height="200px" src={cover} alt="cover" />
            </label>
            <input
              id="cover-upload"
              type="file"
              accept="image/*"
              style={{ display: "none" }}
              onChange={handleCoverUpload}
            />
          </div>

          <div className="avatar-upload-icon">
            <label htmlFor="avatar-upload">
              <img src={avatar} className="pointer avatar lg" alt="avatar" />
            </label>
            <input
              id="avatar-upload"
              type="file"
              accept="image/*"
              style={{ display: "none" }}
              onChange={handleAvatarUpload}
            />
          </div>

          <input
            type="text"
            placeholder="Insert username"
            id="username"
            defaultValue={channel.username}
            required
          />
          <textarea
            id="about"
            placeholder="Tell viewers about your channel"
            defaultValue={channel.about}
          />
        </form>
      </div>
    </Wrapper>
  );
}

export default EditChannelModal;

هذا النوع من النوافذ المنبثقة يوفر تجربة استخدام حديثة، ويمنح المستخدم تحكماً مباشراً في هوية قناته دون الحاجة إلى مغادرة الصفحة.

10) نشر التطبيق على الويب

بعد اكتمال الميزات الأساسية، تأتي مرحلة النشر. يمكن استخدام Heroku لنشر الواجهة الخلفية وتطبيق React معاً.

أولاً نضيف سكربت postinstall داخل ملف package.json في الخادم:

{
  "name": "server",
  "version": "0.1.0",
  "scripts": {
    "start": "node server",
    "postinstall": "cd client && npm install && npm run build"
  }
}

ثم نضيف في ملف تشغيل Express الكود التالي لخدمة ملفات الواجهة المبنية في بيئة الإنتاج:

// server/src/start.js
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.resolve(__dirname, "../client/build")));
  app.get("*", function (req, res) {
    res.sendFile(path.resolve(__dirname, "../client/build", "index.html"));
  });
}

المغزى من هذا الجزء أنه إذا وصل طلب GET لا يخص واجهة API، فسيتم إرسال نسخة البناء النهائية من تطبيق React إلى المتصفح.

أفضل ممارسات SEO وتهيئة المحتوى لمشروع تقني مشابه

إذا كنت تنوي نشر شرح مشروعك كمقال تقني أو توثيق تعليمي، فهناك نقاط مهمة تساعد على تحسين الظهور في محركات البحث ورفع فرص القبول في Google AdSense:

• قدّم شرحاً أصلياً يتضمن تجربتك الخاصة، لا مجرد ترجمة حرفية.
• قسّم المقال إلى عناوين فرعية واضحة تسهّل الفهم والأرشفة.
• استخدم أمثلة عملية حقيقية بدل الوصف النظري فقط.
• اشرح لماذا اخترت كل أداة، مثل Prisma أو React Query أو Cloudinary.
• أضف صوراً توضيحية ولقطات للشاشات إن توفرت.
• احرص على سرعة الصفحة وسهولة القراءة على الهاتف.

المحتوى التقني عالي الجودة لا يكتفي بعرض الكود، بل يشرح القرارات الهندسية ويقدم حلولاً للمشكلات المتوقعة.

الخلاصة التقنية

بناء نسخة شبيهة بـ YouTube باستخدام React ليس مجرد تمرين على الواجهة، بل مشروع متكامل يختبر فهمك لبنية التطبيقات الحديثة من الطرفين: العميل والخادم. الجمع بين React وNode.js وPostgreSQL وPrisma يمنحك أساساً متيناً، بينما تضيف أدوات مثل React Query وCloudinary وvideo.js طبقة عملية مهمة لتجربة الاستخدام. من الناحية التقنية، أهم ما يميز هذا النوع من المشاريع هو حسن تصميم العلاقات بين البيانات، وتقسيم المسؤوليات بين الواجهة والخلفية، وتأمين العمليات الحساسة بطريقة قابلة للتوسع والصيانة.