دراسة حالة
Caffeine — Coffee & Tea House
تجربة رقمية حديثة ومصممة بأسلوب Mobile-First لمقهى Caffeine، تجمع بين هوية بصرية مميزة، وقائمة منتجات ديناميكية، وحركات GSAP، وعناصر ثلاثية الأبعاد باستخدام Three.js، بالإضافة إلى لوحة تحكم متكاملة لإدارة محتوى الموقع.
دراسة حالة بقلم كلثوم ملوكي
المشروع
Caffeine هو موقع إلكتروني حديث تم تصميمه لنقل أجواء وهوية المقهى إلى تجربة رقمية تفاعلية ومميزة.
لم يكن الهدف إنشاء موقع تعريفي بسيط فقط، بل بناء منصة تسمح للزوار باكتشاف قائمة المنتجات والعروض والتقييمات والمواقع وساعات العمل، مع منح فريق Caffeine إمكانية إدارة المحتوى بشكل مستقل.
التحدي
كان التحدي الأساسي هو تحقيق التوازن بين التصميم الإبداعي وسهولة الاستخدام والأداء.
كان من المهم أن يتميز الموقع بصرياً دون التأثير على سرعة التصفح أو سهولة الوصول إلى المعلومات.
كما كان من الضروري تجنب وضع بيانات المنتجات والمحتوى بشكل ثابت داخل الكود، حتى يتمكن فريق Caffeine من تحديث الموقع دون الحاجة إلى تدخل مطور في كل مرة.
التصميم وتجربة المستخدم
تم تصميم التجربة بأسلوب Mobile-First.
تعتمد الهوية البصرية على ألوان مستوحاة من القهوة والفستق والكريمة، مع Typography واضحة وتخطيط حديث.
تم استخدام الحركة كجزء من تجربة الموقع من خلال:
- ظهور العناصر أثناء التمرير؛
- تحريك النصوص؛
- تأثيرات Parallax للصور؛
- تحريك المنتجات؛
- عناصر ثلاثية الأبعاد؛
- انتقالات سلسة بين أجزاء الصفحة.
قائمة المنتجات
القائمة مرتبطة مباشرة بلوحة التحكم.
يمكن للزائر تصفح المنتجات حسب الفئة أو البحث باستخدام اسم المنتج أو وصفه أو مكوناته.
كما يتم إبراز المنتجات المميزة التي تحتوي على صور في بداية القائمة.
على الهواتف، تبقى الفئات متاحة أثناء التمرير لتسهيل التنقل بين أقسام القائمة.
العروض
يمكن للإدارة إنشاء عدة أنواع من العروض:
- خصم بالنسبة المئوية؛
- خصم بقيمة محددة؛
- سعر خاص؛
- سعر خاص لمجموعة من المنتجات.
تظهر العروض النشطة تلقائياً على الموقع ويتم تحديث السعر المعروض للمنتجات المرتبطة بها.
كما يمنع النظام وجود عروض نشطة ومتداخلة لنفس المنتج.
التقييمات
يمكن للزوار كتابة تقييماتهم مباشرة من الموقع.
يتم إرسال التقييم أولاً إلى لوحة التحكم في حالة انتظار حتى تتم مراجعته.
بعد ذلك يمكن للمسؤول الموافقة عليه أو رفضه.
يدعم المشروع أيضاً بيانات Google Places لإظهار تقييم Google وعدد المراجعات بشكل منفصل عن التقييمات التي تتم إضافتها عبر الموقع.
لوحة التحكم
تم تطوير لوحة تحكم خاصة بالمشروع.
من خلال /admin يمكن للمستخدمين المخولين إدارة:
- المنتجات؛
- الفئات؛
- العروض؛
- المواقع؛
- ساعات العمل؛
- روابط شبكات التواصل؛
- معلومات الاتصال؛
- التقييمات؛
- أعضاء الفريق والصلاحيات.
كل هذه البيانات يتم استخدامها مباشرة في الموقع بدلاً من كتابتها بشكل ثابت داخل الكود.
الأمان والصلاحيات
الوصول إلى لوحة الإدارة متاح فقط للحسابات التي تحمل صلاحية admin.
يستخدم المشروع Supabase Authentication مع Row Level Security لحماية البيانات.
يتم التحقق من الصلاحيات على مستوى التطبيق وكذلك على مستوى قاعدة البيانات.
كما يتم تخزين الصور وإدارتها من خلال Supabase Storage.
الحركة والعناصر ثلاثية الأبعاد
يستخدم المشروع GSAP لتنفيذ عدة أنواع من الحركات، مثل:
- ظهور العناصر أثناء التمرير؛
- تحريك النصوص؛
- تأثيرات Parallax؛
- تحريك المنتجات.
ويتم استخدام Three.js لإنشاء عناصر ثلاثية الأبعاد على شكل حبوب قهوة تتحرك حول صور المنتجات.
تم تحسين مشهد WebGL حتى يتوقف عن استهلاك الموارد عندما لا يكون ظاهراً للمستخدم.
الأداء وإمكانية الوصول
تم تصميم الحركات بحيث لا تمنع المستخدم من الوصول إلى المحتوى.
يحترم الموقع إعداد prefers-reduced-motion الخاص بنظام المستخدم، كما يمكن إيقاف الحركات من الواجهة.
في حالة عدم توفر WebGL يتم استخدام صور ثابتة كبديل.
كما يبقى المحتوى الأساسي قابلاً للقراءة حتى عند تعطيل JavaScript.
تغطي الاختبارات عدة أحجام للشاشات، والتنقل عبر الهاتف، والتركيز باستخدام لوحة المفاتيح، وتحميل الصور، والحركات وبعض متطلبات WCAG لإمكانية الوصول.
التقنيات المستخدمة
- Next.js 16
- TypeScript
- Supabase
- PostgreSQL
- GSAP
- Three.js
- Playwright
- Supabase Authentication
- Supabase Storage
- Row Level Security
النتيجة
النتيجة هي تجربة رقمية تجمع بين الهوية البصرية القوية ونظام إدارة محتوى عملي.
يحصل الزائر على تجربة تفاعلية وسريعة لاكتشاف Caffeine، بينما يستطيع فريق المقهى إدارة المحتوى اليومي للموقع بشكل مستقل.
كما تسمح بنية المشروع بإضافة منتجات وعروض ومواقع وخصائص جديدة مستقبلاً بسهولة.
