دراسة الحالةVercel - Production
PharmaFlow | تطبيق صيدلية ولوحات تحكم
تطبيق Progressive Web App ثنائي اللغة للصيدليات مع تدفقات تسوق للعملاء ولوحات للصيادلة. تركز الواجهة على تجربة PWA قابلة للتثبيت، وواجهات تجارة RTL/LTR، وتصفية الكتالوج، وواجهة مراجعة الوصفات، وتسليم mobile-first متجاوب.
مكدس الواجهة الأمامية
- Next.js
- React
- TypeScript
- Tailwind CSS
الأداء
- Server Components حيث تقلل JavaScript المرسل للعميل.
- Next/Image مدعوم بـ Cloudinary لأصول منتجات متجاوبة.
- تحميل مسبق لمسارات التسوق الشائعة.
- واجهة غير متزامنة مع Streaming وSuspense.
- تحميل كسول لودجات اللوحة غير الحرجة.
الجودة والموثوقية
- واجهة واعية بالأدوار بين العميل والصيدلي.
- حالات واجهة مصادَق عليها واضحة.
- تحقق على جانب العميل للنماذج ومدخلات الكتالوج.
- حالات متجاوبة متسقة عبر تدفقات التجارة.
الميزات الرئيسية
واجهة صيدلية ثنائية اللغة عربية/إنجليزية مع دعم RTL/LTR.
تجربة Progressive Web App قابلة للتثبيت لمستخدمي الموبايل.
تصفح كتالوج مع فلاتر السعر والشكل والتوفر.
واجهة بحث منتجات fuzzy لكتالوجات صيدلية كبيرة.
أسطح لوحة صيدلي لمتابعة الطلبات والمخزون.
واجهة مراجعة وصفات رقمية.
تدفقات استشارة وسلة للعملاء.
عرض صور منتجات مدعوم بـ Cloudinary.
بنية الواجهة الأمامية
مسارات تجارة العميل وتخطيطات موطَّنة أسطح واجهة لوحة الصيدلي مكونات مشتركة للمنتج والسلة والاستشارة طبقة عرض PWA وتجربة الإشعارات صور منتجات محسّنة للعرض
استراتيجيات هندسة الواجهة
- فصل واضح بين واجهات العميل والصيدلي.
- تجربة موبايل PWA أولاً لتدفقات الصيدلية.
- مكونات React قابلة لإعادة الاستخدام لأنماط الكتالوج واللوحة.
- Cloudinary مع Next/Image لوسائط منتجات متجاوبة.
- عرض metadata ومسارات ثنائية اللغة لقابلية الاكتشاف.
- تحقق عميل للنماذج وحالات الإدخال الرئيسية.
واجهة المستخدم
