Nana Hashem Exhibition

تم تصميم وتطوير موقع ويب متكامل بالكامل لمعرض فني (Nana Hashem Art Gallery)، يهدف إلى عرض وبيع اللوحات الفنية الأصلية. يدمج الموقع بين واجهة مستخدم فنية فاخرة (Frontend) و لوحة تحكم إدارية قوية (Backend Dashboard)، مما يتيح للفنانة إدارة أعمالها وطلباتها بكل سهولة.

تم اعتماد أحدث التقنيات لضمان سرعة الأداء، توافق كامل مع محركات البحث (SEO)، وتجربة مستخدم سلسة تدعم اللغتين العربية والإنجليزية (RTL/LTR).

🛠️ التقنيات والمكتبات المستخدمة:

Frontend: Next.js 16 (App Router), React, TypeScript, Tailwind CSS.

Backend & Database: Supabase (PostgreSQL, Authentication, Real-time, Storage).

State Management: React Context API (للسلة والترجمة).

Libraries: Lucide-react (أيقونات), Next/Image (تحسين الصور).

✨ المميزات الرئيسية للعميل (واجهة المتجر):

تصميم أنيق وجذاب: استخدمنا لوحة ألوان دافئة (بني وبيج) تعكس طابع الفنون التشكيلية، مع خطوط Classic مثل Cormorant_Garamond.

دعم كامل للغتين: اللغة العربية والإنجليزية مع اتجاه صفحات ديناميكي (RTL/LTR) وتبديل فوري.

صفحة رئيسية (Hero): خلفية جذابة مع طبقات شفافة بنية ونصوص ترحيبية مترجمة.

المتجر (Shop): عرض اللوحات مع نظام بحث (Search) متقدم، تصفية (Filter) حسب السعر، الفئات، والتوفر، بالإضافة إلى Pagination (تصفح الصفحات) لسهولة التصفح.

صفحات تفصيلية: صفحة مخصصة لكل لوحة (Product Detail) تحتوي على الصورة، السعر، الوصف، وحالة البيع (متوفر/مباع).

سلة التسوق (Cart): نظام سلة متكامل (Context) مع إمكانية إزالة المنتجات وعرض ملخص الطلب.

عملية الدفع (Checkout): نموذج طلب احترافي لإدخال بيانات المشتري (الاسم بالعربي والإنجليزي، البريد، الهاتف) مع حفظ البيانات في قاعدة البيانات.

🛡️ لوحة التحكم الإدارية (Admin Dashboard):

نظام مصادقة آمن: صفحة تسجيل دخول خاصة للأدمن مع نظام استعادة كلمة المرور (Forgot Password) عبر البريد الإلكتروني.

لوحة إحصائيات: عرض عدد الطلبات، عدد اللوحات، والمتاح منها.

إدارة الطلبات: عرض طلبات الشراء المعلقة، وإمكانية تأكيد الطلب بنقرة واحدة (Complete Order).

إدارة اللوحات (CRUD): نظام كامل لإضافة، تعديل، وحذف اللوحات، مع نظام رفع الصور إلى السحابة (Supabase Storage) بشكل آمن وسريع. (كما تم دعم الترجمة للحقول مثل Title/Title_AR).

إعدادات الأدمن: صفحة خاصة لتحديث البريد الإلكتروني وكلمة المرور بطرق آمنة.

✅ الإنجازات التقنية المميزة:

معالجة الأخطاء: تم حل مشكلة تداخل الوسوم <a> (Nested Anchor) التي كانت تسبب أخطاء في الـ Hydration.

تحسين الأداء: استخدام next/image لتحميل الصور بشكل متقدم (Lazy loading و Priority loading).

تصميم متكامل: تم تنفيذ نظام ألوان (Design System) موحد في جميع صفحات المتجر ولوحة التحكم.