{"id":22117309,"url":"https://github.com/arnobt78/HotelBooking--React-Frontend","last_synced_at":"2025-10-12T06:31:54.252Z","repository":{"id":256846832,"uuid":"856608392","full_name":"arnobt78/HotelBooking-ReactVite-Website","owner":"arnobt78","description":"Hotel-Booking is a Static React-Vite Frontend Website, using React.js, React-Compotents, React-context API, Hooks, TailwindCSS, React Date Picker, Responsive Mobile Menu, Swiper Slider, Data Loading Spinner Effect, Scroll To Top Component, when page or location changes and deployed on Netlify.","archived":false,"fork":false,"pushed_at":"2024-09-16T13:03:39.000Z","size":12842,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-01T13:37:47.836Z","etag":null,"topics":["fronted-development","hotel-booking","netlify-deployment","react-components","react-context-api","react-date-picker","react-hooks","react-vite","reactjs","scroll-to-top","spinning-donut","tailwindcss","website-design"],"latest_commit_sha":null,"homepage":"https://hotel-booking-arnob.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-12T21:52:11.000Z","updated_at":"2024-10-25T19:45:44.000Z","dependencies_parsed_at":"2024-12-01T13:46:47.794Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/HotelBooking-ReactVite-Website","commit_stats":null,"previous_names":["arnobt78/hotel-booking-reactvite-website","arnobt78/hotelbooking-reactvite-website"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FHotelBooking-ReactVite-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FHotelBooking-ReactVite-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FHotelBooking-ReactVite-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FHotelBooking-ReactVite-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/HotelBooking-ReactVite-Website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236176746,"owners_count":19107387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fronted-development","hotel-booking","netlify-deployment","react-components","react-context-api","react-date-picker","react-hooks","react-vite","reactjs","scroll-to-top","spinning-donut","tailwindcss","website-design"],"created_at":"2024-12-01T13:31:37.922Z","updated_at":"2025-10-12T06:31:54.245Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hotel Booking - ReactVite TailwindCSS Fundamental Project 3\n\n\u003cimg width=\"1200\" alt=\"Screenshot 2024-09-13 at 00 01 03\" src=\"https://github.com/user-attachments/assets/51070abc-f3ae-47ef-8bc1-e17151f075da\"\u003e ![Screenshot 2024-09-13 at 00 08 31](https://github.com/user-attachments/assets/5b984db0-c8c0-4a9a-bc25-543d30586225) \u003cimg width=\"1200\" alt=\"Screenshot 2024-09-13 at 00 03 29\" src=\"https://github.com/user-attachments/assets/4e1a4f30-ab6a-492a-8607-68963542f151\"\u003e ![Screenshot 2024-09-13 at 00 08 53](https://github.com/user-attachments/assets/edbabe77-1879-477d-8711-30bf245ff5b7)\n\n---\n\n## Project Summary\n\n**HotelBooking** is a modern, responsive hotel booking frontend website built with [React](https://react.dev/), [Vite](https://vitejs.dev/), and [TailwindCSS](https://tailwindcss.com/). This project demonstrates core React concepts (components, context API, hooks), advanced UI/UX with custom components, a mobile-friendly layout, and integration with third-party React libraries. It is designed both as a learning resource and a practical template for static hotel or accommodation websites.\n\n- **Live Demo:** [https://hotel-booking-arnob.netlify.app](https://hotel-booking-arnob.netlify.app)\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Features](#features)\n- [Tech Stack \u0026 Keywords](#tech-stack--keywords)\n- [Project Structure](#project-structure)\n- [Components Overview](#components-overview)\n- [Pages \u0026 Routing](#pages--routing)\n- [Functionality Walkthrough](#functionality-walkthrough)\n- [How to Run / Usage Instructions](#how-to-run--usage-instructions)\n- [Learning \u0026 Teaching Notes](#learning--teaching-notes)\n- [Code Examples](#code-examples)\n- [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- 🏨 **Responsive hotel booking frontend** — fully mobile-ready\n- ⚡ **Vite-powered** for fast development and hot-reloading\n- 🎨 **TailwindCSS styling** for utility-first, customizable design\n- 🔄 **React Context API** for state management (room filtering, selection, etc.)\n- 🧩 **Reusable React components** like Room Cards, Booking Form, Dropdowns\n- 📅 **React Date Picker** for check-in/check-out selection\n- 🚀 **Swiper Slider** for hero images\n- 🔗 **React Router** for SPA navigation and room details\n- 🌀 **Spinner** loading indicator for data fetch simulation\n- ⬆️ **Scroll to Top** on route changes\n- 🛠️ **Example hotel data**, facilities, and images\n- ☑️ **Hotel rules** and details on each room page\n\n---\n\n## Tech Stack \u0026 Keywords\n\n- **React**, **Vite**, **React Router DOM**, **TailwindCSS**, **PostCSS**, **Autoprefixer**\n- **Context API**, **Hooks**, **Reusable Components**\n- **React Date Picker**, **Swiper**, **Spinners**\n- **Responsive Design**, **SVG/Images**, **Single Page Application (SPA)**\n- **Frontend Only** (No backend integration)\n\n---\n\n## Project Structure\n\n```\nHotelBooking--TailwindCSS-Fundamental-Project-3/\n├── public/\n│   └── favicon, static assets...\n├── src/\n│   ├── assets/           # Images \u0026 SVGs\n│   ├── components/       # UI Components (Header, Footer, Rooms, etc.)\n│   ├── constants/        # Static data (e.g., hotel rules)\n│   ├── context/          # React Context (RoomContext.js)\n│   ├── pages/            # Page-level components (Home, RoomDetails)\n│   ├── utils/            # Utility functions (ScrollToTop)\n│   ├── App.jsx           # Main app component, routing\n│   ├── main.jsx          # App entry point\n│   └── index.css         # TailwindCSS directives\n├── index.html\n├── package.json\n├── tailwind.config.js\n├── postcss.config.js\n└── README.md\n```\n\n---\n\n## Components Overview\n\n- **Header:** Navigation bar with logo and links\n- **Footer:** Footer with copyright\n- **HeroSlider:** Swiper slider with hotel images (homepage)\n- **BookForm:** Main booking form for guests (date pickers, dropdowns)\n- **Rooms:** List/grid of available rooms (with spinner effect)\n- **Room:** Card for an individual room\n- **RoomDetails:** Page for detailed info about a single room (facilities, price, rules)\n- **AdultsDropdown, KidsDropdown:** Select number of guests\n- **CheckIn, CheckOut:** Date pickers for reservation\n- **PageNotFound:** 404 fallback\n- **ScrollToTop:** Utility component to scroll on navigation\n\n---\n\n## Pages \u0026 Routing\n\n- `/` **Home:** Hero slider, booking form, room listing\n- `/room/:id` **Room Details:** Details for a selected room (from Rooms grid)\n- `*` **PageNotFound:** Handles all unmatched routes\n\nRouting is implemented via `react-router-dom` in `src/App.jsx`.\n\n---\n\n## Functionality Walkthrough\n\n### Homepage (`/`)\n- **HeroSlider:** Engaging slider with hotel images.\n- **BookForm:** Users select check-in, check-out dates, number of adults/kids. (State managed by context)\n- **Rooms Grid:** Dynamically lists all rooms pulled from static data. Clicking a room navigates to its details.\n\n### Room Details (`/room/:id`)\n- Fetches room info by ID.\n- Shows:\n  - **Room images, name, description**\n  - **Facilities grid** (icons, features)\n  - **Reservation block** (right column) — allows user to select dates/guests and see price.\n  - **Hotel Rules** (list with icons)\n- All state (selected room, guest counts, dates) handled using React context/hooks.\n\n### Spinner Loading\n- When room data is \"loading\", a full-screen spinner overlay is shown using `spinners-react`.\n\n### Responsive/Mobile\n- Layout adapts for different screen sizes using Tailwind's utility classes.\n- Mobile navigation, grid stacking, and component sizes adjust accordingly.\n\n---\n\n## How to Run / Usage Instructions\n\n### 1. **Clone the Repository**\n```bash\ngit clone https://github.com/arnobt78/HotelBooking--TailwindCSS-Fundamental-Project-3.git\ncd HotelBooking--TailwindCSS-Fundamental-Project-3\n```\n\n---\n\n### 2. **Install NodeJS**\n- Download and install from [nodejs.org](https://nodejs.org/en/)\n\n---\n\n### 3. **Install Project Dependencies**\n```bash\nnpm install\n```\n\n---\n\n### 4. **(Optional) Create your own Vite + TailwindCSS React Project**\n\n```bash\nnpm create vite@latest my-project -- --template react\ncd my-project\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\nEdit `tailwind.config.js`:\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: { extend: {} },\n  plugins: [],\n}\n```\nAdd the following to `src/index.css`:\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n---\n\n### 5. **Run the Project Locally**\n```bash\nnpm run dev\n```\n- Open your browser at: [http://localhost:5173/](http://localhost:5173/)\n\n---\n\n### 6. **Project Dependencies Used**\n```bash\nnpm create vite\nnpm add -D react-icons\nnpm add -D react-router-dom\nnpm add -D react-datepicker\nnpm add -D @headlessui/react\nnpm add -D spinners-react\nnpm add -D swiper\nnpm add -D vite-plugin-svgr\nnpm add -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n---\n\n## Learning \u0026 Teaching Notes\n\n- **React Context API** is used to manage state globally (room filters, room selection, etc.).\n- **Hooks** (`useState`, `useContext`, `useParams`) are leveraged throughout to drive interactivity.\n- **TailwindCSS** enables quick UI development with utility classes; no traditional CSS files are needed.\n- **Component Reusability:** All UI blocks (dropdowns, forms, cards) are reusable and composable.\n- **Router Design:** Routing is declarative and supports dynamic parameters (`/room/:id`).\n- **Third-Party Libraries:** Enhance user experience (date picker, spinner, slider, icons).\n- **Deployment:** Easily deployable to Netlify or Vercel as a static site.\n\n---\n\n## Code Examples\n\n### App Routing (`src/App.jsx`)\n```jsx\nimport { BrowserRouter, Route, Routes } from 'react-router-dom';\nimport { Footer, Header, PageNotFound } from './components';\nimport { Home, RoomDetails } from './pages';\n\nconst App = () =\u003e (\n  \u003cmain\u003e\n    \u003cBrowserRouter\u003e\n      \u003cHeader /\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path='/' element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path='/room/:id' element={\u003cRoomDetails /\u003e} /\u003e\n        \u003cRoute path='*' element={\u003cPageNotFound /\u003e} /\u003e\n      \u003c/Routes\u003e\n      \u003cFooter /\u003e\n    \u003c/BrowserRouter\u003e\n  \u003c/main\u003e\n);\nexport default App;\n```\n---\n\n### Room Listing (`src/components/Rooms.jsx`)\n```jsx\nimport { useRoomContext } from '../context/RoomContext';\nimport { SpinnerDotted } from 'spinners-react';\nimport { Room } from '.';\n\nconst Rooms = () =\u003e {\n  const { rooms, loading } = useRoomContext();\n  return (\n    \u003csection className='py-24'\u003e\n      {loading \u0026\u0026 (\n        \u003cdiv className='h-screen w-full fixed bottom-0 top-0 bg-black/80 z-50 grid place-items-center'\u003e\n          \u003cSpinnerDotted /\u003e\n        \u003c/div\u003e\n      )}\n      \u003cdiv className='container mx-auto lg:px-0'\u003e\n        \u003cdiv className='text-center'\u003e\n          \u003cp className='font-tertiary uppercase text-[15px] tracking-[6px]'\u003eHotel \u0026 Spa Adina\u003c/p\u003e\n          \u003ch2 className='font-primary text-[45px] mb-6'\u003eRoom \u0026 Suites\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv className='grid grid-cols-1 max-w-sm mx-auto gap-[30px] lg:grid-cols-3 lg:max-w-none lg:mx-0'\u003e\n          {rooms.map(room =\u003e \u003cRoom key={room.id} room={room} /\u003e)}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/section\u003e\n  );\n};\nexport default Rooms;\n```\n---\n\n### Booking Form Snippet (`src/components/BookForm.jsx`)\n```jsx\nimport { CheckIn, CheckOut, AdultsDropdown, KidsDropdown } from '.';\n\nconst BookForm = () =\u003e (\n  \u003cform\u003e\n    \u003cCheckIn /\u003e\n    \u003cCheckOut /\u003e\n    \u003cAdultsDropdown /\u003e\n    \u003cKidsDropdown /\u003e\n    \u003cbutton type=\"submit\"\u003eBook Now\u003c/button\u003e\n  \u003c/form\u003e\n);\nexport default BookForm;\n```\n---\n\n## Conclusion\n\nThis project is a comprehensive example of modern frontend development, combining the power of React, TailwindCSS, and Vite for rapid, scalable, and beautiful web applications. It is ideal for learning, teaching, or as a starter template for your own hotel or resort web apps.\n\n---\n\n## Happy Coding! 🚀\n\nThank you for using and exploring this project!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FHotelBooking--React-Frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FHotelBooking--React-Frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FHotelBooking--React-Frontend/lists"}