موقع تجارة إلكترونية للكتب المختارة والقطع الرقمية. تم بناؤه باستخدام Next.js 15 و Prisma 7 و Auth.js v5 و Stripe.

## نظرة عامة

Editorial هي منصة تجارة إلكترونية فاخرة مصممة للكتب المختارة والقطع الرقمية. يستعرض المشروع تطبيق ويب حديث متكامل (Full-stack) يتميز بتوثيق آمن، ومعالجة المدفوعات، وواجهة مستخدم متجاوبة. تم بناؤه باستخدام أحدث تقنيات الويب بما في ذلك Next.js 15 وTypeScript وPrisma ORM وStripe للمدفوعات.

## الحزمة التقنية

الواجهة الأمامية (Frontend):

* Next.js 15 مع App Router وTurbopack

* React 19 لمكونات واجهة المستخدم

* Tailwind CSS 4 مع PostCSS للتنسيق

* أيقونات Lucide React للعناصر المرئية

* TypeScript لتطوير آمن برمجياً (Type-safe)

الخلفية وقاعدة البيانات (Backend & Database):

* Prisma 7 ORM لتجريد قاعدة البيانات

* قاعدة بيانات PostgreSQL مستضافة على Supabase

* تجميع الاتصالات (Connection pooling) من Supabase لتحسين الأداء في البيئات السحابية (Serverless)

التوثيق والأمان:

* Auth.js v5 (NextAuth سابقاً) للتوثيق

* دمج Google OAuth لتسجيل الدخول الاجتماعي

* التوثيق بالبريد الإلكتروني وكلمة المرور مع bcryptjs لتشفير كلمات المرور

* نظام التحقق من البريد الإلكتروني باستخدام رموز التحقق (Tokens)

المدفوعات والتواصل:

* دمج Stripe لمعالجة المدفوعات

* Nodemailer لرسائل البريد الإلكتروني عبر Gmail SMTP

* تدفق آمن لرموز التحقق لتحديثات البريد الإلكتروني

## هيكل المشروع

Root Level Configuration:

* package.json: التبعيات وسكربتات البناء

* tsconfig.json: إعدادات TypeScript

* tailwind.config.ts: إعدادات Tailwind CSS

* postcss.config.mjs: إعدادات PostCSS

* prisma.config.ts: إعدادات Prisma

* auth.ts: إعداد وتكوين التوثيق

مسارات الواجهة البرمجية (app/api/):

* auth/[...nextauth]: نهايات التوثيق الخاصة بـ NextAuth

* register: نهاية تسجيل المستخدم

* verify: نهاية التحقق من البريد الإلكتروني

* resend: نهاية إعادة إرسال بريد التحقق

* profile: إدارة ملف المستخدم

* profile/verify-email: التحقق من تحديث البريد الإلكتروني

* orders/save: حفظ معلومات الطلب

* checkout: تدفق الدفع عبر Stripe

* refund: التعامل مع طلبات الاسترداد

الصفحات الأساسية (app/):

* layout.tsx: التخطيط الجذر مع المزودين (Providers)

* page.tsx: الصفحة الرئيسية

* about/page.tsx: صفحة "من نحن"

* login/page.tsx: صفحة تسجيل الدخول

* register/page.tsx: صفحة إنشاء حساب

* register/verify/page.tsx: صفحة التحقق من البريد الإلكتروني

* product/[slug]/page.tsx: صفحة تفاصيل المنتج الديناميكية

* orders/page.tsx: قائمة طلبات المستخدم

* profile/page.tsx: إدارة ملف المستخدم

* success/page.tsx: صفحة نجاح الطلب مع مكون حفظ الطلب

المكونات (app/components/):

* Header.tsx: رأس الصفحة مع نمط الزجاج الشفاف (Glassmorphism)

* Footer.tsx: تذييل الصفحة

* ProductCard.tsx: عرض بطاقة المنتج الفردي

* ProductGrid.tsx: تخطيط الشبكة لمنتجات متعددة

* SignOutButton.tsx: وظيفة تسجيل الخروج

* Providers.tsx: إعداد مزودي سياق React

مكتبات الأدوات (lib/):

* prisma.ts: نسخة عميل Prisma

* products.ts: عمليات بيانات المنتجات

* orders.ts: منطق إدارة الطلبات

* tokens.ts: توليد والتحقق من رموز التوثيق

* email.ts: وظيفة إرسال البريد الإلكتروني

مخطط قاعدة البيانات (prisma/schema.prisma):

* User: تخزين معلومات حساب المستخدم مع حالة التحقق

* Account: ربط حسابات OAuth للتوثيق الاجتماعي

* Order: تتبع طلبات العملاء مع تتبع جلسة Stripe

* VerificationToken: إدارة رموز التحقق المؤقتة

التنسيق:

* globals.css: التنسيقات العامة

* تأثيرات Glassmorphism لجمالية فاخرة

* تصميم متجاوب مع نهج "المحمول أولاً"

## الميزات الأساسية

1. توثيق المستخدم

* إنشاء حساب بالبريد أو Google OAuth

* تشفير آمن لكلمات المرور باستخدام bcryptjs

* تدفق التحقق من البريد الإلكتروني

* إدارة ملف تعريف المستخدم

2. نظام التحقق من البريد

* التحقق أثناء التسجيل أو عند تحديث البريد

* انتهاء صلاحية الرموز بعد وقت محدد

* وظيفة إعادة إرسال بريد التحقق

3. تصفح المنتجات

* صفحة رئيسية بشبكة منتجات

* صفحات ديناميكية للمنتجات تعتمد على الـ slug

* عرض معلومات المنتج والأسعار

4. عربة التسوق والدفع

* دمج Stripe للمدفوعات الآمنة

* تدفق دفع كامل مع إدارة الجلسات

* تتبع سجل الطلبات

5. إدارة الطلبات

* عرض الطلبات السابقة وحالاتها

* التعامل مع طلبات الاسترداد

* صفحة تأكيد نجاح الطلب

6. ملف المستخدم

* عرض وإدارة المعلومات الشخصية

* تحديث البريد الإلكتروني مع التحقق

* وظيفة تسجيل الخروج

7. تجربة مستخدم فاخرة

* جمالية تصميم Glassmorphism

* تخطيط متجاوب لجميع الأجهزة

* استخدام أيقونات Lucide لوضوح بصري

* تنقل وتفاعلات سلسة

## اعتبارات النشر

المشروع محسن للنشر على منصة Vercel:

1. إعداد متغيرات البيئة

* مفاتيح Stripe API

* نصوص اتصال قاعدة البيانات لـ Supabase

* أسرار Auth.js وبيانات OAuth

* بيانات Gmail لوظائف البريد

2. إدارة قاعدة البيانات

* مزامنة مخطط Prisma مع القاعدة

* التعامل مع شهادات SSL لاتصالات Supabase

* تجميع الاتصالات لبيئات Serverless

3. تحسين البناء

* سكربت PostInstall لتوليد عميل Prisma تلقائياً

* استخدام Next.js Turbopack لبناء أسرع

* فحص TypeScript لضمان سلامة الأكواد

4. إعدادات OAuth

* تسجيل بيانات Google OAuth

* ضبط روابط إعادة التوجيه للمجال الفعلي (Production)

## سير عمل التطوير

1. تثبيت التبعيات: npm install

2. إعداد متغيرات البيئة في ملف .env

3. مزامنة مخطط قاعدة البيانات: npx prisma db push

4. تشغيل خادم التطوير: npm run dev

5. بناء المشروع للإنتاج: npm run build

6. تشغيل خادم الإنتاج: npm start

7. تشغيل فحص الأكواد: npm run lint

## أنماط التصميم

يتبع المشروع عدة أنماط تطوير حديثة:

* هيكلية المكونات النمطية (Modular)

* تنظيم مسارات API حسب الميزة

* تجريد ORM عبر Prisma

* توثيق من جهة الخادم (Server-Side)

* التحقق الثنائي للبريد لضمان أمن الحسابات

* التوجيه الديناميكي لصفحات المنتجات

* إدارة الحالة المركزية عبر React Context

## نماذج قاعدة البيانات

نموذج المستخدم (User):

* يخزن الحساب، حالة التحقق، والصلاحيات، والطلبات المرتبطة.

نموذج الحساب (Account):

* معلومات OAuth وبيانات الاعتماد للربط الاجتماعي.

نموذج الطلب (Order):

* يتتبع المشتريات، الروابط بالمستخدمين، ومعلومات جلسة Stripe.

نموذج رمز التحقق (VerificationToken):

* رموز مؤقتة للتسجيل أو التحديث تنتهي تلقائياً.

## ميزات الأمان

1. أمن كلمات المرور: تشفير Bcryptjs.

2. التحقق من البريد: عملية تأكيد من خطوتين.

3. دمج OAuth: توثيق Google آمن.

4. قيود قاعدة البيانات: قيود فريدة على الحقول الحساسة.

5. التنظيف التلقائي: إدارة الرموز منتهية الصلاحية.

6. توليد رموز آمنة: رموز تحقق عشوائية.

7. الوصول القائم على الأدوار: إدارة الأذونات.

8. HTTPS/SSL: نشر آمن بشهادات تشفير.

## اعتبارات القابلية للتوسع

* قاعدة البيانات: PostgreSQL مع Supabase للبيانات الضخمة.

* تجميع الاتصالات: محسن للبيئات السحابية.

* التجريد: Prisma يسهل عمليات الهجرة (Migrations).

* النمطية: مكونات قابلة لإعادة الاستخدام لتقليل التكرار.

## الجودة والاختبار

* استخدام TypeScript للفحص أثناء الكتابة.

* ESLint لجودة واتساق الكود.

* التحقق من مخطط Prisma ومتغيرات البيئة.

## فرص التحسين المستقبلي

1. البحث والفلترة المتقدمة للمنتجات.

2. عربة تسوق مستمرة (تخزين دائم).

3. قائمة الرغبات (Wishlist).

4. تقييمات ومراجعات العملاء.

5. لوحة تحكم الإدارة (Admin Dashboard).

6. إدارة المخزون.

7. نظام تنبيهات بتحديثات الطلبات.

8. تحليلات سلوك المستخدم والمبيعات.

9. نشرة بريدية للعروض.

10. تصنيفات الكتب حسب النوع.

## ملخص

مشروع متجر الكتب هو حل تجارة إلكترونية شامل يستعرض ممارسات التطوير المهني المتكامل (Full-stack). يجمع بين تقنيات الواجهة الأمامية الحديثة وبنية تحتية خلفية آمنة، مع نظام توثيق ومعالجة مدفوعات متقن، وتركيز عالٍ على تجربة المستخدم. يعد المشروع أساساً قوياً لمنصة تجزئة كتب تجارية ويمكن توسيعه بسهولة مع تطور متطلبات العمل.