كار سوق
تفاصيل العمل
أهلاً بكم في مشروع جديد بشارككم فيه مشروعي الأخير "Car Marketplace" – وهو منصة Full Stack متكاملة لعرض وبيع السيارات، هحاول في الفيديو ده أشرح المشروع بالتفصيل من ناحية الفكرة والتصميم والتقنيات المستخدمة.
---
- الفكرة العامة
المشروع عبارة عن معرض سيارات أونلاين، مقسم لجزئين أساسيين:
- جزء المستخدم (User) – وهو الزائر اللي يدخل يتصفح السيارات.
- جزء الأدمن (Admin) – وهو المسؤول عن إضافة وإدارة كل البيانات.
كل البيانات اللي يضيفها الأدمن، هي اللي تتحكم في اللي يظهر للمستخدم بشكل ديناميكي بالكامل.
---
- جزء المستخدم (User)
أول ما المستخدم يدخل الموقع، بيعمل تسجيل دخول من خلال Clerk، وبعدها يدخل صفحة Home وفيها:
- Hero Section
في أول الصفحة فيه قسم بحث، يقدر المستخدم من خلاله يختار:
- نوع السيارة
- السعر
- الحالة (جديدة / مستعملة / نص نص)
وبناءً على البحث ده تظهر النتائج المطابقة من السيارات اللي الأدمن أضافها.
- Categories Section
مجموعة كاردات لأنواع السيارات (SUV - Sedan - Coupe - Sport - Electric...)، وكل كارد بيظهر بياناته فقط لو الأدمن أضاف سيارات من النوع ده. يعني لو دخلت على "Sport" هتشوف كل السيارات الرياضية اللي الأدمن أضافها.
- Services Section
قسم يعرض الخدمات اللي المعرض بيقدمها للسيارات.
- Footer
الفوتر بيحتوي على روابط ومعلومات عامة عن الموقع.
----
- صفحة Listing Details
لما المستخدم يضغط على أي سيارة، يدخل صفحة فيها كل التفاصيل:
- صور السيارة
- وصف السيارة (يكتبه الأدمن كـ Owner)
- كل المواصفات بالتفصيل: النوع، اللون، عدد الأميال، عدد الأبواب، السنة، نوع الوقود، سعة الخزان... إلخ
- كل الـ Features اللي الأدمن ضافها للسيارة دي
----
- صفحات إضافية
- News
صفحة فيها 20 كارد، كل كارد يعرض خبر يخص عالم السيارات.
- Auto Guide
صفحة فيها إرشادات ونصائح مفيدة للمستخدمين قبل شراء السيارة.
---
- جزء الأدمن (Admin)
الأدمن عنده لوحة تحكم خاصة بيه يقدر من خلالها:
- إضافة سيارة جديدة بكل التفاصيل:
- Listing Tag / العنوان
- Category (نوع السيارة)
- Condition (الحالة)
- Make & Model
- Year (سنة الصنع)
- Price (السعر)
- Drive Type (نوع الدفع)
- Mileage (عدد الأميال)
- Transmission (ناقل الحركة)
- Color (اللون)
- Fuel Type (نوع الوقود)
- Doors (عدد الأبواب)
- Cylinders (عدد السلندرات)
- Description (الوصف)
- Features (المميزات)
- رفع الصور عن طريق Cloudinary
- إدارة السيارات
يقدر يشوف كل السيارات المضافة ويحذف أي سيارة منها.
- الملف الشخصي
يقدر يشوف بياناته الخاصة بتسجيل الدخول.
---
- التقنيات المستخدمة (Tech Stack)
- Frontend: React.js - Tailwind CSS - Shadcn UI - Font Awesome
- Database: PostgreSQL - Drizzle ORM - Neon.tech
- Authentication: Clerk
- Media: Cloudinary
- Tools: Faker.js - Moment.js - SweetAlert
----
- الخلاصة
المشروع ده بالنسبالي كان تجربة حلوة جدًا في ربط الفرونت إند بالباك إند وقاعدة البيانات بشكل ديناميكي بالكامل، حيث كل بيانات المستخدم تعتمد بشكل مباشر على إدخالات الأدمن، وده بيحاكي تمامًا فكرة المشاريع الحقيقية في سوق العمل.