✔ project name

• Hotel Rose

📜 Project Overview

• "Hotel Rose" is a modern and elegant website designed to offer a seamless online experience for guests seeking premium accommodation. With a user-friendly interface, it showcases the hotel’s luxurious rooms, exceptional services, and various amenities. Visitors can easily explore different room options, view stunning images, and book their stays directly through the platform. The website also highlights customer reviews, offering a glimpse of the memorable experiences previous guests have had. Whether you're looking for a relaxing getaway or a business trip stay, Hotel Rose provides everything needed for a comfortable and enjoyable stay.

---

🚀 Live Links

• Client Repo: This repository serves as the main Hotel-Rose platform and includes the frontend setup.
• Live Site: HotelRose.com

---

🔍 React Concepts Used

• Components
• Hooks: useState, useEffect, useContext
• React Router: useParams, useLocation, useNavigate
• Conditional Rendering
• Context API for global state management
• React Hook Form for form handling and validation

---

🛠️ Technologies Used

👩🏼‍💻 Frontend

• React
• Firebase
• Tailwind CSS
• DaisyUI
• React Router
• React Icons
• React Hot Toast
• React Hook Form
• JWT-based Authentication

｡🇯‌🇸‌ Backend

• Node.js
• Express.js

🛢️ Database

• MongoDB

---

✨ Key Features of Hotel Rose:

• Luxury Room Options: Showcases a variety of elegant and comfortable rooms tailored to guests' needs.
• Seamless Booking System: Easy-to-use booking platform for quick and direct reservations.
• Stunning Visuals: High-quality images of the hotel, rooms, and amenities to give guests a glimpse of their experience.
• Guest Reviews: Display customer testimonials, offering insight into previous guests' memorable experiences.
• Comprehensive Services: Highlights the hotel’s premium services, including dining, spa, fitness, and event facilities.
• Mobile-Friendly: Optimized for a smooth and responsive experience across all devices.
• Special Offers: Provides promotions and discounts for a more affordable stay.
• Real-Time Availability: Displays up-to-date room availability to ensure guests can secure their preferred stay.
• Easy Navigation: User-friendly interface to explore the hotel’s amenities and book accommodations without hassle.

---

🧰 NPM Packages Used

• @stripe/react-stripe-js
• @stripe/stripe-js
• @tanstack/react-query
• @tanstack/react-table
• axios
• class-variance-authority
• clsx
• dompurify
• embla-carousel-autoplay
• firebase
• keep-react
• lottie-react
• lucide-react
• motion
• phosphor-react
• prop-types
• react
• react-datepicker
• react-dom
• react-hook-form
• react-hot-toast
• react-icons
• react-intersection-observer
• react-loading-skeleton
• react-quill
• react-router-dom
• react-select
• react-spinners
• sweetalert2
• swiper
• tailwind-merge
• tailwindcss-animate

---

🛠 Installation

Prerequisites

• Node.js and npm installed
• MongoDB connection string

---

Client Side Setup

1. Clone the client-side repository:

   git clone https://github.com/shorifulbd1st/Hotel-Rose.git
   cd hotel-rose

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   VITE_API_KEY=_____________________________
   VITE_AUTH_DOMAIN=_________________________
   VITE_PROJECT_ID=__________________________
   VITE_STORAGE_BUCKET=______________________
   VITE_MESSAGE_SENDER_ID=___________________
   VITE_APP_ID=______________________________
   VITE_MEASUREMENT_ID=______________________
   VITE_IMGBB_API_KEY=_______________________
   VITE_SERVER_API_URL=______________________

   Note: Replace the VITE_API_KEY and VITE_AUTH_DOMAIN, along with other placeholders, with actual values.

Server Side Setup

1. Clone the server-side repository:

   git clone https://github.com/shorifulbd1st/Visa-Navigator-Portal-Server.git
   cd Visa-Navigator-Portal-Server

2. Install dependencies:

   npm install

3. Start the server:

   node index.js

   --- OR ---

   nodemon index.js

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   DB_USER=..........................................
   DB_PASS=..........................................
   SECRET_KEY=.......................................

   Note: Replace the index.js file's mongo_uri and the .env file's DB_USER, DB_PASS and SECRET_KEY with actual values.

🧑‍💻 Authors

• Shoriful Islam (Lead Developer)
• Lead Developer & Maintainer
• Connect with me on GitHub & Facebook