# 🔸 YASHSTORE
YASHSTORE هي **منصة تجارة إلكترونية حديثة ومتكاملة (Full-Stack)** مبنية باستخدام **Next.js App Router** و**Prisma** و**PostgreSQL** و**NextAuth** و**Stripe**.
توفر المنصة دورة شراء متكاملة تشمل تسجيل الدخول، استعراض المنتجات، سلة التسوق، الدفع، إنشاء الطلبات، بالإضافة إلى لوحة تحكم إدارية لإدارة المتجر.
## 🌐 النسخة التجريبية
* **الموقع:** YASHSTORE - E-Commerce
* **فيديو استعراضي:**
---
## 📁 هيكل المشروع
```text
YASHSTORE/
│
├── app/
│ ├── (auth)/ → صفحات تسجيل الدخول وإنشاء الحساب
│ ├── (pages)/ → صفحات المتجر مثل المنتجات والسلة والدفع والطلبات
│ ├── (admin)/dashboard/ → لوحة تحكم الإدارة للمنتجات والتصنيفات والمستخدمين والطلبات
│ ├── api/
│ │ ├── auth/[...nextauth]/ → معالجات NextAuth
│ │ ├── create-payment-intent/
│ │ └── webhook/ → معالجة أحداث Stripe Webhook
│ ├── payment-success/ → صفحة تأكيد نجاح الدفع
│ ├── layout.tsx → التخطيط العام + التحليلات + شريط التنقل
│ └── globals.css → التنسيقات العامة الخاصة بـ Tailwind
│
├── actions/ → Server Actions للمصادقة والمنتجات والسلة وحالات الطلب
├── components/ → مكونات واجهة قابلة لإعادة الاستخدام للمتجر ولوحة الإدارة
├── lib/
│ ├── db.ts → نسخة موحدة من Prisma Client
│ └── utils.ts → دوال مساعدة
├── prisma/
│ ├── schema.prisma → نماذج قاعدة البيانات
│ └── migrations/
├── auth.ts → إعداد NextAuth v5 باستخدام Credentials وGoogle
├── middleware.ts → ملف Middleware
├── next.config.mjs → إعدادات Next.js ونطاقات الصور
└── tailwind.config.ts → إعداد Tailwind والحركات المخصصة
```
---
## 🚀 التقنيات المستخدمة
### التقنيات الأساسية
* **Framework:** Next.js 14 باستخدام App Router
* **اللغة:** TypeScript
* **واجهة المستخدم:** React 18
* **التنسيق:** Tailwind CSS
### البيانات والمصادقة
* **ORM:** Prisma
* **قاعدة البيانات:** PostgreSQL
* **المصادقة:** NextAuth.js v5
* تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور
* تسجيل الدخول باستخدام Google OAuth
* صلاحيات مبنية على الأدوار `ADMIN` و`USER`
### الدفع
* **بوابة الدفع:** Stripe
* إنشاء Payment Intent من خلال API
* التحقق من Webhook وإنشاء الطلب بعد نجاح الدفع
### واجهة المستخدم والأدوات المساعدة
* `react-hot-toast` لعرض الإشعارات
* `Lucide React` للأيقونات
* `GSAP` للحركات والتأثيرات
* `Vercel Analytics` و`Speed Insights` لتحليل الأداء
---
## 🧩 المميزات الأساسية
### 👤 المصادقة والصلاحيات
* إنشاء حساب باستخدام الاسم والبريد الإلكتروني ورقم الهاتف وكلمة المرور
* تسجيل الدخول باستخدام بيانات الحساب
* دعم تسجيل الدخول عبر Google
* إدارة الجلسات باستخدام NextAuth
* التعامل مع الصلاحيات حسب دور المستخدم `ADMIN` أو `USER`
### 🛍️ واجهة المتجر
* صفحة رئيسية تتضمن قسمًا بارزًا وأحدث المنتجات
* صفحة لعرض المنتجات مع:
* البحث حسب اسم المنتج
* التصفية حسب التصنيف على الهاتف وسطح المكتب
* صفحة تفاصيل المنتج مع معرض صور
* إضافة المنتجات إلى سلة التسوق وإزالتها منها
### 💳 الدفع والطلبات
* نظام دفع باستخدام Stripe Payment Element
* إنشاء Payment Intent على الخادم
* معالجة Stripe Webhook عند نجاح عملية الدفع
* إنشاء الطلب تلقائيًا وتفريغ سلة التسوق بعد الدفع
* عرض سجل طلبات المستخدم
* صفحة خاصة لعرض تفاصيل كل طلب
### 🛠️ لوحة تحكم الإدارة
* نظرة عامة على المستخدمين والمنتجات والطلبات والتصنيفات
* إدارة المنتجات:
* إنشاء منتج
* تعديل منتج
* حذف منتج
* إدارة التصنيفات مع صفحة تفاصيل لكل تصنيف
* عرض المستخدمين والبحث بينهم
* عرض الطلبات والبحث فيها
* تحديث حالة كل طلب بشكل منفصل
---
## 🗃️ نماذج قاعدة البيانات باستخدام Prisma
الكيانات الأساسية:
* `User`
* `Product`
* `Category`
* `Cart`
* `Order`
* `Wishlist`
* `Review`
كما يحتوي المشروع على Enums مثل:
* `Role`: `ADMIN`, `USER`
* `Status`:
* `PENDING`
* `PROCESSING`
* `DELIVERING`
* `SHIPPED`
* `COMPLETED`
* `CANCELLED`
* `REFUNDED`
---
## 📦 واجهات API
### المصادقة
| الطريقة | المسار | الوصف |
| ------- | ------------------------- | -------------- |
| GET | `/api/auth/[...nextauth]` | معالج NextAuth |
| POST | `/api/auth/[...nextauth]` | معالج NextAuth |
### الدفع
| الطريقة | المسار | الوصف |
| ------- | ---------------------------- | ----------------------------------------------- |
| POST | `/api/create-payment-intent` | إنشاء Stripe PaymentIntent وإرجاع المفتاح السري |
| POST | `/api/webhook` | معالجة أحداث Stripe Webhook |
---
## ⚙️ متغيرات البيئة
قم بإنشاء ملف `.env` أو `.env.local` داخل مجلد المشروع الرئيسي.
```env
# Prisma / PostgreSQL
POSTGRES_PRISMA_URL="postgresql://..."
POSTGRES_URL_NON_POOLING="postgresql://..."
# NextAuth (Google)
clientId="your_google_client_id"
clientSecret="your_google_client_secret"
# Stripe
NEXT_PUBLIC_STRIPE_PUBLIC_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
```
ملاحظة: يتم استخدام أسماء المتغيرات `clientId` و`clientSecret` كما هي في الكود الحالي.
---
## 🛠️ تشغيل المشروع
### المتطلبات
* Node.js 18 أو أحدث
* npm
* قاعدة بيانات PostgreSQL
* حساب Stripe، ويمكن استخدام Test Mode
### التثبيت
1. **استنساخ المشروع**
```bash
git clone <your-repo-url>
cd YASHSTORE
```
2. **تثبيت الحزم**
```bash
npm install
```
3. **إعداد متغيرات البيئة**
* أنشئ ملف `.env` أو `.env.local`
* أضف جميع المتغيرات المطلوبة المذكورة سابقًا
4. **تشغيل Prisma Migration وإنشاء Prisma Client**
```bash
npx prisma migrate dev
npx prisma generate
```
5. **تشغيل خادم التطوير**
```bash
npm run dev
```
6. **فتح التطبيق**
```text
```
---
## 📜 أوامر المشروع
```bash
npm run dev # تشغيل خادم التطوير
npm run build # إنشاء نسخة الإنتاج
npm start # تشغيل نسخة الإنتاج
npm run lint # تشغيل فحص Next.js
```
---
## ☁️ النشر
البيئة المقترحة للنشر:
* **التطبيق:** Vercel
* **قاعدة البيانات:** Neon أو Supabase أو Railway PostgreSQL
* **الدفع:** Stripe
### خطوات النشر
1. إضافة جميع متغيرات البيئة إلى مزود الاستضافة
2. تشغيل Prisma Migrations على قاعدة بيانات الإنتاج
3. إعداد Stripe Webhook ليشير إلى:
```text
```
4. التأكد من إعداد Google OAuth Callback URL بشكل صحيح في Google Cloud Console
---
## 🔒 ملاحظات الأمان
* تشفير كلمات المرور باستخدام `bcryptjs`
* التحقق من توقيع Stripe Webhook قبل معالجة الطلب
* حماية صفحات الإدارة باستخدام التحقق من دور المستخدم
* تضمين دور المستخدم داخل Session Token لاتخاذ قرارات الصلاحيات
---
## 📈 تحسينات مستقبلية
* إضافة Unit Tests وIntegration Tests
* إكمال حماية المسارات باستخدام Middleware
* إضافة نظام لإدارة المخزون والكميات
* تحسين إدارة عنوان الشحن أثناء الدفع
* إضافة واجهات للمفضلة والتقييمات، حيث إن نماذج قاعدة البيانات موجودة بالفعل
---
## 🧑💻 المطور
تم تطوير المشروع بواسطة **YASHDEV42**.
---
**YASHSTORE — تجربة تجارة إلكترونية حديثة ومتكاملة. ✨**