CureWay
منصة توصيل أدوية متعددة الصيدليات تربط المرضى بالصيدليات لتصفح الأدوية ورفع الوصفات الطبية وتتبع الطلبات؛ كنتُ واحداً من خمسة مطورين عملوا على الـ Frontend الخاص بها في برنامج Code2Career في Gaza Sky Geeks، وأعددتُ بنية المسارات وبنيتُ تدفق المصادقة ولوحة تحكم الإدارة.
التقنيات المستخدمة :
1 / 4
نظرة عامة على المشروع
CureWay منصة توصيل أدوية متعددة الصيدليات تربط المرضى بالصيدليات. يتصفّح المرضى دليل أدوية عاماً، ويرفعون الوصفات الطبية، ويضعون الطلبات ويتتبعون التوصيل، بينما تدير الصيدليات مخزونها وتنفّذ الطلبات، ويشرف المسؤولون على المستخدمين والصيدليات والمنتجات عبر المنصة.
طُوِّر المشروع ضمن برنامج Code2Career التدريبي في Gaza Sky Geeks، وتولّى فريق Backend منفصل توفير REST API. كنتُ واحداً من خمسة مطورين عملوا على Frontend الويب: أعددتُ بنية المسارات، وبنيتُ تدفق المصادقة ولوحة تحكم الإدارة والصفحة الرئيسية للمرضى، ثم ربطتُ المصادقة وجداول الإدارة بـ REST API.
الميزات الرئيسية
- دليل أدوية عام: قابل للتصفح دون الحاجة إلى تسجيل الدخول
- حسابات المرضى: التسجيل والمصادقة وإدارة الملف الشخصي
- مسار الوصفات الطبية: رفع الوصفات للتحقق منها من قبل الصيدلية
- إدارة الطلبات: الإنشاء والتتبع وتحديثات الحالة
- دعم متعدد الصيدليات: عدة بائعين يعملون على منصة واحدة
- لوحات تحكم حسب الأدوار: واجهات مخصّصة للمرضى والصيدليات والإدارة
أبرز الجوانب التقنية
- بنية App Router: Next.js 16 مع مجموعات مسارات تفصل مناطق المصادقة والمرضى والصيدليات والإدارة والمحتوى العام
- تدفق مصادقة من جهة العميل: رمزا الوصول والتجديد في الذاكرة وفي localStorage، ويجدّدهما معترض Axios عند استجابة 401 بينما تنتظر الطلبات المتوازية في طابور
- مزوّد مصادقة بـ React Context: حالة جلسة مركزية مشتركة عبر التطبيق
- نماذج آمنة الأنواع: React Hook Form مع تحقق بمخططات Zod، إضافة إلى libphonenumber-js للتحقق من أرقام الهواتف
- نظام تصميم مخصّص: عائلات ألوان دلالية، ومقاييس للطباعة والمسافات، ومكوّنات قابلة لإعادة الاستخدام
- Turbopack: بناءات تطوير محلية سريعة
مساهماتي
- أعددتُ بنية App Router بمجموعات مسارات وإعادة توجيه حسب الدور للمرضى والصيدليات والإدارة (Next.js 16 وReact 19 وTypeScript صارم)
- بنيتُ تدفق المصادقة من جهة العميل: مزوّد جلسة بـ React Context، وتخزين الرموز، وتجديد تلقائي عبر معترض Axios
- طوّرتُ نماذج آمنة الأنواع بـ React Hook Form وZod، بما يشمل التحقق من أرقام الهواتف
- بنيتُ لوحة تحكم الإدارة وربطتُ جداولها بواجهة API الخاصة بالإدارة
- طوّرتُ الصفحة الرئيسية للمرضى والترويسة، وأعدتُ بناء تجربة البحث
- ساهمتُ بمكوّنات واجهة قابلة لإعادة الاستخدام مدفوعة بالرموز في نظام التصميم المشترك
- دمجتُ 24 Pull Request في الفرع الرئيسي، معظمها من الزملاء، وعالجتُ ما رافقها من تعارضات وأخطاء بناء
التحديات والحلول
التحدي: خمسة مطورين يبنون Frontend واحداً بالتوازي، اعتماداً على API يملكه فريق Backend منفصل.
الحل: العمل عبر فروع الميزات وPull Requests، مع معالجة التعارضات وأخطاء البناء عند الدمج في الفرع الرئيسي.
النتيجة: مناطق منفصلة حسب الدور للمرضى والصيدليات والإدارة في قاعدة كود واحدة.
التحدي: إبقاء المستخدمين مسجَّلي الدخول بعد إعادة التحميل دون إرسال طلب تجديد مع كل طلب فاشل.
الحل: حفظ الرمزين في الذاكرة وفي localStorage، مع معترض Axios يجدّد الرمز مرة واحدة عند استجابة 401 بينما تنتظر بقية الطلبات في طابور ثم يُعاد إرسالها.
النتيجة: تبقى الجلسة قائمة بعد إعادة التحميل، وتشترك الطلبات المتوازية في عملية تجديد واحدة.
التقنيات المستخدمة
Frontend: Next.js 16، React 19، TypeScript، Tailwind CSS 4، Framer Motion، Lucide React
النماذج والتحقق: React Hook Form، Zod، libphonenumber-js
الحالة والبيانات: React Context (المصادقة)، Zustand (السلة والطلبات)، TanStack Query (لوحة الصيدلية)، Axios (REST API)
الأدوات: pnpm، ESLint، Turbopack
تحتاج شيئاً مشابهاً؟أخبرني عن مشروعك