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