🏨 Hotel Haven

About The Project

Hotel Haven is a sleek, responsive hotel booking platform designed to simplify the process of finding and reserving rooms. Built with React and Tailwind CSS, it offers an intuitive user interface and seamless navigation. This project emphasizes performance, scalability, and user experience.

Table of Contents

• 🏨 Hotel Heaven
• About The Project
• Table of Contents
• Demo
• Features
• Technologies Used
• Installation
• Usage
• Project Structure
• Built with:
• Components Overview:
• Team members:
• Acknowledgements

Demo

🎥 Click the image to watch the demo

Deployment

🌐 Live Project: (https://hotel-of4p.onrender.com/)

Features

• 🛏️ Room Listing: Browse available rooms and filter the rooms based on their price,size,number of guest and pets .

• 🧭 Intuitive Navigation: Easy-to-use routing and layout for effortless browsing.

• ♻️ Reusable Components: Modular design with reusable UI elements.

• 🌍 Global State Management: Managed via Context API to ensure smooth data flow.

Technologies Used

Frontend:

• ⚛️ React
• 🌐 React Router
• 📦 Context API
• 🎨 CSS

Tools:

• 🛠️ Node.js
• 📦 npm
• 🗂️ Git & GitHub

Installation

Clone the repository:

git clone https://github.com/ktabassum1809/hotel.git

Install dependencies:

npm install

Run the Project:

npm run dev

Usage

Once the project is running:

• 🎯 Visit http://localhost:3000 to access the application.

Project Structure

hotel-haven/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── About/
│   │   ├── Rooms/
│   │   ├── Booking/
│   │   ├── Login/
│   │   ├── Context/
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── HeroSection/
│   │   └── Layout/
│   ├── assets/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

Built with:

• ⚛️ React - JavaScript library for building user interfaces.
• 🌐 React Router - Client-side routing.
• 🖌️ styled-components - CSS in JavaScript for component-based styling.
• 🌍 Context API - For managing global state.

Components Overview:

• 📝 About: Project overview and company mission.
• 🏨 Rooms: List of available rooms.
• 🌍 Context (GlobalContext.js): Manages global state.
• 🧭 Header & Footer: Persistent navigation.
• 🎯 HeroSection: Highlights promotions.
• 🗂️ Layout: Consistent page structure.

Acknowledgements

• 🎨 CSS for styling.
• 🖌️ styled-components for flexible styling.
• ⚛️ React Documentation for development guidance.
• 🛠️ Vite for fast development and build processes.