الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

VacationVibe : تطبيق حجز تأجير العطلات

VacationVibe هو تطبيق Full Stack Booking الذي يمكّن المستخدمين من حجز إيجارات العطلات، مما يوفر تجربة سلسة لحجز أماكن الإقامة. يتيح التطبيق للمستخدمين إنشاء قوائم لممتلكاتهم الخاصة، مما يتيح لأصحاب العقارات الفرصة لعرض إيجاراتهم للضيوف المحتملين. مع VacationVibe ، يمكن للمستخدمين البحث بسهولة عن العقارات المتاحة، وعرض تفاصيل الملكية، وإجراء الحجوزات، وإدارة حجوزاتهم.

لتجربة VacationVibe بشكل مباشر، يرجى زيارة موقعنا الإلكتروني للحصول على عرض توضيحي مباشر:

قم بزيارة موقع الويب للحصول على العرض التجريبي المباشر

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

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

كومة التكنولوجيا

تم تطوير التطبيق باستخدام التقنيات التالية:

  • MongoDB: قاعدة بيانات NoSQL تستخدم لتخزين بيانات الملكية والمستخدم.
  • Express.js: إطار عمل من جانب الخادم لإنشاء واجهات برمجة التطبيقات RESTful والتعامل مع المنطق من جانب الخادم.
  • رد: مكتبة جافا سكريبت لبناء واجهات المستخدم.
  • Tailwind CSS: إطار عمل CSS أولي يستخدم لتصميم الواجهة الأمامية.
  • Node.js: بيئة تشغيل JavaScript تُستخدم لتشغيل التعليمات البرمجية من جانب الخادم.
  • Vercel: منصة سحابية لاستضافة ونشر المواقع الثابتة، تُستخدم لنشر الواجهة الأمامية للتطبيق.
  • AWS S3: Amazon Simple Storage Service (S3) لتخزين الملفات، مما يسمح للمستخدمين بتحميل واسترجاع صور الملكية. فهو يتيح تخزين الملفات بشكل آمن وقابل للتطوير، مما يضمن نظامًا موثوقًا وفعالًا للتعامل مع صور الملكية.

ابدء

لتشغيل تطبيق VacationVibe محليًا، اتبع الخطوات التالية:

  1. استنساخ المستودع: git clone https://github.com/junaidsaleem10144/VacationVibe.git
  2. انتقل إلى دليل المشروع: cd VacationVibe
  3. تثبيت التبعيات:
    • الواجهة الخلفية: انتقل إلى مجلد api وقم بتشغيل npm install
    • الواجهة الأمامية: انتقل إلى مجلد client وقم بتشغيل npm install
  4. قم بإنشاء ملف .env في مجلد api وقم بتوفير متغيرات البيئة الضرورية. يمكنك الرجوع إلى ملف .env.example للمتغيرات المطلوبة.
  5. ابدأ خوادم التطوير:
    • الواجهة الخلفية: في مجلد api ، قم بتشغيل npm run dev
    • الواجهة الأمامية: في مجلد client ، قم بتشغيل npm run start

يمكنك الآن الوصول إلى تطبيق VacationVibe عن طريق فتح المتصفح وزيارة http://localhost:4000 .

هيكل المجلد

يتبع المشروع بنية مجلد محددة:

  • api/ : يحتوي على رمز الواجهة الخلفية، بما في ذلك إعداد الخادم والمسارات والنماذج.
  • client/ : يحتوي على كود الواجهة الأمامية، بما في ذلك مكونات React وأنماطها وأصولها.

شكر وتقدير

نود أن نعرب عن امتناننا للموارد والمكتبات التالية التي كان لها دور فعال في تطوير VacationVibe :

الخلفية

  • bcryptjs: مكتبة لتجزئة كلمات المرور ومقارنتها.
  • محلل ملفات تعريف الارتباط: برنامج وسيط لتحليل ملفات تعريف الارتباط في Express.
  • cors: برنامج وسيط لتمكين مشاركة الموارد عبر الأصل (CORS).
  • dotenv: وحدة لتحميل متغيرات البيئة من ملف .env.
  • jsonwebtoken: مكتبة لإنشاء رموز ويب JSON (JWT) والتحقق منها.
  • النمس: مكتبة نمذجة بيانات الكائنات (ODM) لـ MongoDB.
  • Multer: برنامج وسيط للتعامل مع تحميلات الملفات في Express.
  • @aws-sdk/client-s3: مكتبة عميل للتفاعل مع Amazon S3 لتخزين الملفات.
  • image-downloader: مكتبة لتنزيل الصور من عناوين URL.
  • أنواع mime: مكتبة للعمل مع أنواع MIME.
  • صريحة: إطار عمل الويب لـ Node.js.

تبعيات التطوير (الخلفية):

  • Nodemon: أداة مساعدة تقوم بإعادة تشغيل خادم Node.js تلقائيًا عند اكتشاف تغييرات في الملف.

الواجهة الأمامية

  • axios: مكتبة لتقديم طلبات HTTP.
  • date-fns: مكتبة لمعالجة التواريخ وتنسيقها.
  • React-router-dom: مكتبة للتعامل مع التوجيه في تطبيقات React.
  • رد: مكتبة جافا سكريبت لبناء واجهات المستخدم.
  • رد فعل دوم: حزمة لعرض مكونات React.

تبعيات التطوير (الواجهة الأمامية):

  • @types/react: تعريفات النوع لـ React.
  • @types/react-dom: تعريفات النوع لـ React DOM.
  • @vitejs/plugin-react: البرنامج المساعد Vite لدعم React.
  • autoprefixer: البرنامج المساعد PostCSS لإضافة بادئات البائع إلى CSS.
  • postcss: أداة ما بعد المعالج لـ CSS.
  • tailwindcss: إطار عمل CSS للأداة المساعدة أولاً.
  • vite: أداة بناء لتطوير الويب الحديث.

شكرًا لك على اختيار VacationVibe ! إذا كان لديك أي أسئلة أو تعليقات، فلا تتردد في التواصل معنا.

المساهمة

نرحب بالمساهمات في تطبيق VacationVibe ! إذا وجدت أي مشاكل أو كنت ترغب في إضافة ميزات جديدة، فلا تتردد في فتح طلب سحب.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل