موقع فندق LEGEND مبرمج ب react vite

وصف مشروع Hotel Malaysia – موقع إلكتروني لحجز الفنادق (Full Stack PERN)

Hotel Malaysia هو تطبيق ويب متكامل يتيح للمستخدمين استعراض الغرف الفندقية، معرفة الأسعار، التحقق من التوافر، و إجراء الحجوزات بطريقة سلسة مع تصميم عصري وأداء عالٍ.

1. إعداد بيئة التطوير باستخدام Vite + React

تم استخدام Vite لإنشاء بيئة تطوير حديثة وفعالة مع React.

ساهم ذلك في تقليل أوقات البناء وتحسين تجربة التطوير.

️ 2. تطوير الواجهة الخلفية باستخدام Node.js و Express.js

تم بناء RESTful API باستخدام:

Node.js لتشغيل الخادم.

Express.js لمعالجة الطلبات وإنشاء نقاط نهاية ديناميكية.

توفر الواجهة الخلفية البيانات الخاصة بالغرف، الأسعار، التوافر، والتعليقات.

️ 3. إدارة قاعدة البيانات باستخدام PostgreSQL

تم تخزين البيانات (الغرف، الحجوزات، التعليقات...) في قاعدة بيانات PostgreSQL مستضافة على Neon.

4. الأمان وحماية التطبيق

تم تعزيز حماية الخادم باستخدام:

JWT (JSON Web Tokens) للمصادقة الآمنة.

@arcjet/node للحماية من الهجمات.

helmet لإعداد رؤوس HTTP الأمنية.

5. جلب البيانات من الواجهة الخلفية باستخدام React Query (TanStack Query)

تم استخدام React Query لجلب البيانات من Express API وإدارتها بكفاءة.

ساعدت useQuery في تحسين تجربة المستخدم من خلال التحديث الفوري للبيانات.

6. بناء واجهة المستخدم باستخدام HTML5 + CSS3 + Tailwind CSS

تم تصميم واجهة مستخدم حديثة ومتجاوبة باستخدام:

HTML5 و CSS3.

Tailwind CSS لتسريع عملية التصميم وتخصيص المظهر.

المكونات الأساسية:

Header: شعار وروابط الموقع.

Room Listing: قائمة عرض الغرف.

Room Details: تفاصيل كل غرفة.

Booking Form: نموذج حجز بسيط وسهل الاستخدام.

Footer: معلومات التواصل وروابط التواصل الاجتماعي.

️ 7. تحريك واجهة المستخدم باستخدام Framer Motion

تم دمج Framer Motion لإضافة:

تأثيرات حركية عند عرض مكونات الغرف.

انتقالات سلسة بين الصفحات.

تفاعل بصري جذاب للأزرار والقوائم.

? 8. اختبار المكونات باستخدام Vitest

تم استخدام Vitest لاختبار:

وظائف نموذج الحجز (Booking Form).

منطق جلب البيانات والواجهات.

الهدف هو ضمان استقرار الأداء وتجربة المستخدم.

9. نشر التطبيق والاستضافة

الواجهة الأمامية (React + Vite + Framer Motion): منشورة على Vercel.

الواجهة الخلفية (Node.js + Express + Prisma): منشورة على Render أو أي مزود سحابي.

قاعدة البيانات (PostgreSQL): مستضافة على Neon مع إدارة المخططات باستخدام Prisma.

تم تفعيل النشر المستمر (CI/CD) لضمان تحديث الموقع تلقائيًا مع كل تعديل.

رابط الموقع:

https://hotelmalaysia.ver...

ملاحظات إضافية:

يوفر Hotel Malaysia تجربة استخدام سهلة وسريعة مع تصميم عصري وجذاب.

تم التركيز على الأداء، الأمان، وسهولة التوسع بفضل اعتماد بنية Full Stack PERN.

الحركات التفاعلية وتحسين SEO تسهم في تقديم تجربة مستخدم مثالية.