EliteStay Hotels - Booking System

A beautiful, professional hotel booking system built with ReactJS and Firebase.

Features

• User Authentication: Login and registration system with Firebase Authentication
• Dashboard: Home screen with room availability and booking summaries
• Room Booking: Browse available rooms and book stays
• Booking Status: View confirmed bookings and details
• Responsive Design: Works on all device sizes

Modules

1. Registration/Login Module

   • User authentication system with email and password
   • Secure login and registration forms

2. Home Screen Dashboard

   • Welcome section with personalized greeting
   • Room availability summary
   • Booking statistics
   • Upcoming stays

3. Available Rooms Module

   • Browse all room types with detailed descriptions
   • View room features and pricing
   • Select rooms for booking

4. Booking Status Module

   • Confirmation of bookings
   • Detailed booking information
   • Payment summary

Firebase Integration

This application uses Firebase for:

• User Authentication
• Database storage for rooms and bookings
• Real-time data synchronization

Firebase Configuration

• API Key: AIzaSyCK4dSFNR91GX5kh55zoTTWb1UhS4Yl5CA
• Project ID: hotel-booking-system-8a469
• Public-facing Name: project-251011084991

Installation

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm start to start the development server
4. Open http://localhost:3000 to view the application

Troubleshooting

MetaMask Error

If you see a "Failed to connect to MetaMask" error in the browser console, this is unrelated to our application. This error occurs due to a conflict between MetaMask browser extension and React's hot-reloading feature during development. It does not affect the functionality of our hotel booking system.

To resolve this:

1. Disable the MetaMask browser extension temporarily
2. Or ignore this error as it doesn't impact the application functionality

Technologies Used

• ReactJS
• Firebase (Authentication & Firestore)
• CSS3 with modern styling techniques
• Responsive design for all device sizes

Project Structure

src/
├── components/
│   ├── auth/           # Authentication components
│   ├── booking/        # Booking components
│   ├── dashboard/      # Dashboard components
│   └── layout/         # Layout components
├── config/             # Configuration files
├── pages/              # Page components
├── services/           # Service files (Firebase integration)
├── App.css             # Main stylesheet
├── App.js              # Main App component
├── index.css           # Global styles
└── index.js            # Entry point

Design Features

• Modern, professional UI with gradient backgrounds
• Responsive design that works on mobile and desktop
• Smooth animations and transitions
• Intuitive user flow from login to booking
• Clean, organized layout with card-based components

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

Learn More

This project was bootstrapped with Create React App.