Medebok

وحدة واجهة حجز الأطباء

واجهة حجز أطباء متجاوبة ومتوافقة مع إمكانية الوصول، تم تطويرها باستخدام React وVite، لتلبية متطلبات مهمة الواجهة الأمامية لشركة InVitro Capital. يعرض هذا المشروع نظام حجز مواعيد لمنصة صحية حديثة مع التركيز على تجربة المستخدم، إمكانية الوصول، وجودة الكود، مستفيدًا من أدوات الذكاء الاصطناعي لتحسين الكفاءة.

تجربة مباشرة

اطلع على التجربة المباشرة: MedeBooking

الميزات

دليل الأطباء: قائمة قابلة للتصفية للأطباء حسب التخصص والتوافر، تعرض الاسم، الصورة، التخصص، الموقع، وزر "حجز موعد".

نافذة الحجز: نافذة تفاعلية لاختيار فترات زمنية وتأكيد المواعيد، تعرض تفاصيل الطبيب.

ملخص المواعيد: عرض للمواعيد المحجوزة مع اسم الطبيب، التاريخ، الوقت، التخصص، والموقع.

وضع الإضاءة/الظلام: تبديل السمة لتحسين تجربة المستخدم.

إمكانية الوصول: متوافقة مع معايير WCAG مع دعم التنقل عبر لوحة المفاتيح، تسميات ARIA، ودعم قارئ الشاشة.

تصميم متجاوب: محسّن للأجهزة المحمولة (<768 بكسل)، الأجهزة اللوحية (768-1024 بكسل)، وأجهزة سطح المكتب (>1024 بكسل).

التقنيات المستخدمة

الواجهة الأمامية: React 18، JavaScript (ES6+)، CSS3 (خصائص مخصصة للسمات)

أداة البناء: Vite

إدارة الحالة: Zustand (خفيف الوزن)

الأيقونات: react-icons

التدقيق اللغوي: ESLint مع إضافات React

أدوات الذكاء الاصطناعي:

Cursor IDE: هيكلة المكونات، إنشاء بيانات وهمية، تحسين إمكانية الوصول

إكمال وتوصيات الكود بمساعدة الذكاء الاصطناعي

فحوصات وتحسينات إمكانية الوصول

التبعيات:

react، react-dom

zustand (إدارة الحالة)

react-icons

vite، @vitejs/plugin-react

eslint، eslint-plugin-react-hooks، eslint-plugin-react-refresh

متطلبات المهمة

يحقق هذا المشروع متطلبات InVitro Capital (يوسف مجدي، 17 أبريل 2025):

عرض دليل الأطباء:

قائمة وهمية للأطباء مع الاسم، الصورة، التخصص، التوافر، والموقع.

تصفية حسب التخصص والتوافر.

زر "حجز موعد" على بطاقة كل طبيب.

نافذة الحجز:

تعرض اسم الطبيب وفترات زمنية وهمية.

تتيح اختيار الفترة الزمنية وتأكيد الحجز.

عرض ملخص المواعيد:

يسرد المواعيد المحجوزة مع اسم الطبيب، التاريخ، الوقت، التخصص، والموقع.

المتطلبات التقنية:

مبني باستخدام React، JavaScript، وCSS.

يستخدم Zustand لإدارة الحالة المحلية.

لا يوجد خلفية (Backend)؛ يعتمد على بيانات وهمية.

استخدام أدوات الذكاء الاصطناعي (Cursor) لهيكلة المكونات، البيانات الوهمية، إمكانية الوصول، والتحسين.

إمكانية الوصول:

عناصر قابلة للتنقل عبر لوحة المفاتيح.

تسميات وأدوار ARIA وأوصاف.

اجتياز فحوصات Lighthouse/axe DevTools.

تصميم متجاوب:

متجاوب بالكامل عبر الأجهزة المحمولة، الأجهزة اللوحية، وأجهزة سطح المكتب.