منصة حجز فنادق (Frontend and Backend)

قمت بتطوير منصة حجز فنادق متكاملة من جهة الواجهة الأمامية (Frontend) تحاكي تجربة المستخدم في مواقع الحجز العالمية، مع التركيز على إدارة الحالة (State Management) وتجربة المستخدم (UX) والتحقق من صحة البيانات (Validation).

المشروع يتيح للمستخدم تصفح الفنادق، عرض التفاصيل، إدخال بيانات الحجز، إتمام عملية الحجز، واستعراض الحجوزات الخاصة به.

المميزات الرئيسية:

عرض تفاصيل العقار (Property Details):

عرض معلومات الفندق بالكامل

اختيار تاريخ الوصول والمغادرة

تحديد عدد البالغين والأطفال

التحقق من صحة المدخلات قبل المتابعة

صفحة Checkout

تمرير بيانات الحجز بشكل آمن

منع الوصول للصفحة بدون بيانات صحيحة

صفحة نجاح الحجز (Booking Success):

عرض رسالة تأكيد للمستخدم

إضافة الحجز إلى قائمة الحجوزات الخاصة به

صفحة My Bookings:

عرض جميع الحجوزات المحفوظة

التعامل مع حالات عدم وجود حجوزات

تصميم يحاكي أنظمة الحجز الحقيقية

صفحة Contact:

نموذج تواصل متكامل

تحقق فوري من صحة المدخلات

رسائل خطأ ديناميكية

رسالة شكر بعد الإرسال

منع الإرسال في حال وجود أخطاء

تصميم متجاوب بالكامل (Responsive)

مفاهيم تم تطبيقها:

State Management باستخدام LocalStorage

Client-side Validation

Dynamic Rendering

URL Parameters Handling

User Flow Protection

Responsive Design

Clean UI/UX Practices

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

HTML

CSS

JavaScript (Vanilla JS)

NodeJS + ExpressJS

Backend API (لعرض العقارات وإنشاء حجوزات بشكل احترافي)

خصائص الـBackend API:

* مبرمج باستخدام Node.js وExpress.js.

* يحتوي على Error Handler لمعالجة الطلبات غير المرغوب فيها أو الخاطئة.

* يوجد صفحة Documentation تشرح طريقة استخدام الـBackend API مع شرح مفصل للنقاط النهائية (Endpoints) وكيفية التعامل معها.

* يمكن الوصول إلى صفحة الـDocumentation عبر الرابط: https://my-api-d5al.onren...

الهدف من المشروع:

تطبيق المفاهيم الأساسية والمتقدمة في تطوير واجهات المستخدم، ومحاكاة سيناريو حقيقي لنظام حجز إلكتروني مع التركيز على تجربة المستخدم ومنع الأخطاء المنطقية أثناء التنقل بين الصفحات.

رابط الـgithub repository للمشروع لمن يريد الاطلاع على الأكواد: https://github.com/Ali-Al...

رابط الـgithub repository للـbackend API لمن يريد الاطلاع على الأكواد: https://github.com/Ali-Al...