يبدأ من $15.00

Car Marketplace

omar_rehan

0 طلبات قيد العمل

مدة التنفيذ 3 ايام

التقييم

( 0 تقييمات )

التواصل مع البائع

الوثائق

1782546717372_522.pdf

تحميل

الخيارات

تبليغ

# 🚗 Car Marketplace – مشروع Full Stack لمعرض سيارات

مشروع **معرض سيارات (Car Marketplace)** متكامل (Full Stack) مبني باستخدام **React.js** وقاعدة بيانات **PostgreSQL** عبر **Drizzle ORM** و **Neon.tech**، ويتكون من جزئين أساسيين: واجهة **المستخدم (User)** ولوحة تحكم **الأدمن (Admin)**.

---

## 🛠️ التقنيات المستخدمة

- **الواجهة الأمامية (Frontend):** React.js, Tailwind CSS, Shadcn UI, Font Awesome

- **قاعدة البيانات / الباك إند:** PostgreSQL, Drizzle ORM, Neon.tech

- **تسجيل الدخول والمصادقة:** Clerk

- **تخزين الصور:** Cloudinary

- **أدوات مساعدة:** Moment.js (لتنسيق التاريخ والوقت), Faker.js (لإنشاء بيانات تجريبية), SweetAlert (للتنبيهات وتأكيد العمليات)

---

## 📌 نظرة عامة على المشروع

المشروع مقسم لجزئين أساسيين:

### 1️⃣ جزء المستخدم (User)

- المستخدم يدخل على الموقع ويقوم بتسجيل الدخول عن طريق **Clerk**.

- بعد تسجيل الدخول يدخل المستخدم على **صفحة Home**.

#### مكونات صفحة Home

1. **Hero Section**

- يحتوي على خانة بحث (Search) تتيح للمستخدم تحديد:

- نوع السيارة

- السعر

- الحالة (جديدة / مستعملة / نص نص)

- نتائج البحث تظهر بناءً على البيانات التي يكون الأدمن قد أضافها مسبقًا.

2. **Categories (الكاردات)**

- مجموعة من الكاردات تمثل أنواع السيارات: SUV, Sedan, Coupe, Sport, Electric... إلخ.

- كل كارد يظهر له بيانات فقط إذا كان الأدمن قد أضاف سيارات من هذا النوع.

- عند الضغط على أي نوع (مثلاً Sport) تظهر كل السيارات التابعة لهذا النوع والتي أضافها الأدمن.

3. **Services Section**

- يعرض الخدمات التي يقدمها المعرض للسيارات.

4. **Footer**

- الفوتر الخاص بالموقع يحتوي على روابط ومعلومات عامة.

#### صفحة Listing Details (تفاصيل السيارة)

عند الضغط على أي سيارة، يتم نقل المستخدم لصفحة تفاصيل تحتوي على:

- صورة السيارة

- وصف السيارة (يكتبه الأدمن/المالك)

- جميع **المواصفات** بالتفصيل: النوع، اللون، عدد الأميال (Mileage)، عدد الأبواب، السنة، سعة الوقود (لتر)... إلخ

- جميع **الفيتشرز (Features)** التي أضافها الأدمن لهذه السيارة

#### صفحات إضافية

- **صفحة News:** تحتوي على 20 كارد، كل كارد يعرض خبر يخص السيارات.

- **صفحة Auto Guide:** تحتوي على نصائح وإرشادات تخص السيارات.

---

### 2️⃣ جزء الأدمن (Admin)

الأدمن له لوحة تحكم خاصة يستطيع من خلالها:

- **إضافة سيارة جديدة** بالمواصفات التالية:

- Listing Tag / العنوان

- Category (النوع: SUV, Sedan, Coupe, Sport, Electric... إلخ)

- Condition (الحالة: جديدة / مستعملة / نص نص)

- Make (الماركة)

- Model (الموديل)

- Year (سنة الصنع)

- Price (السعر)

- Drive Type (نوع الدفع)

- Mileage (عدد الأميال)

- Transmission (ناقل الحركة)

- Color (اللون)

- Fuel Type (نوع الوقود)

- Doors (عدد الأبواب)

- Cylinders (عدد السلندرات)

- Description (الوصف)

- Features (الفيتشرز / المميزات)

- رفع الصور (Upload Images عن طريق Cloudinary)

- **استعراض كل السيارات** التي تم إضافتها

- **حذف** السيارات

- **استعراض بيانات الحساب** الخاص به (بيانات تسجيل الدخول... إلخ)

كل البيانات التي يضيفها الأدمن هي ما يظهر للمستخدم في صفحة Home، الكاردات، وصفحة تفاصيل السيارة.

---

## 🔄 طريقة عمل البيانات (Data Flow)

1. الأدمن يسجل دخوله عن طريق Clerk → يضيف سيارة بكل المواصفات والفيتشرز والصور.

2. البيانات تُخزن في قاعدة بيانات PostgreSQL (عبر Drizzle ORM على Neon.tech).

3. الصور تُرفع وتُخزن عبر Cloudinary.

4. في جزء المستخدم، نتائج البحث والكاردات في صفحة Home تظهر **بشكل ديناميكي** حسب ما أضافه الأدمن — لو مش موجود نوع معين، الكارد بتاعه ما يظهرله نتائج.

5. المستخدم يقدر يضغط على أي سيارة ليشاهد كل التفاصيل في صفحة **Listing Details**.

6. المستخدم كمان يقدر يتصفح صفحة **News** (20 خبر) وصفحة **Auto Guide**.

---

## 📋 حقول إضافة السيارة (فورم الأدمن)

| الحقل | الوصف |

|---|---|

| Listing Tag / Title | عنوان مختصر للسيارة |

| Category | النوع: SUV, Sedan, Coupe, Sport, Electric... |

| Condition | الحالة: جديدة / مستعملة / نص نص |

| Make | الماركة |

| Model | الموديل |

| Year | سنة الصنع |