https://github.com/shorifulbd1st/hotel-rose
"Hotel Rose" website offers seamless booking, showcasing luxury rooms, amenities, services, and guest reviews.
https://github.com/shorifulbd1st/hotel-rose
firebase html5 js mongodb react tailwindcss
Last synced: 3 months ago
JSON representation
"Hotel Rose" website offers seamless booking, showcasing luxury rooms, amenities, services, and guest reviews.
- Host: GitHub
- URL: https://github.com/shorifulbd1st/hotel-rose
- Owner: shorifulbd1st
- Created: 2025-01-05T13:54:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-23T04:43:18.000Z (over 1 year ago)
- Last Synced: 2025-02-23T05:26:21.520Z (over 1 year ago)
- Topics: firebase, html5, js, mongodb, react, tailwindcss
- Language: JavaScript
- Homepage: https://hotel-rose-1e441.web.app/
- Size: 382 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## β 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_](https://hotel-rose-1e441.web.app)
---
## π 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:
```bash
git clone https://github.com/shorifulbd1st/Hotel-Rose.git
cd hotel-rose
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the project in a code editor:
```bash
code .
```
5. Add the `.env` file in the root directory and include the following environment variables:
```bash
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:
```bash
git clone https://github.com/shorifulbd1st/Visa-Navigator-Portal-Server.git
cd Visa-Navigator-Portal-Server
```
2. Install dependencies:
```bash
npm install
```
3. Start the server:
```bash
node index.js
```
--- OR ---
```bash
nodemon index.js
```
4. Open the project in a code editor:
```bash
code .
```
5. Add the `.env` file in the root directory and include the following environment variables:
```bash
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_](https://github.com/shorifulbd1st) & [_Facebook_](https://www.facebook.com/shoriful1st)