SereneScape Hotel Management System

A modern, responsive hotel management system built with React and TypeScript. This application provides both guest-facing features and a comprehensive admin panel for managing hotel operations.

🚀 Features

Guest Features

• Homepage: Beautiful landing page with hotel facilities showcase
• Room Booking: Browse and book different room types with availability checking
• Services: View and request hotel services (dining, spa, transportation, etc.)
• Reviews: Read guest reviews and submit your own feedback
• Billing: View detailed invoices and payment information

Admin Features

• Dashboard: Comprehensive overview with KPIs and analytics
• Reservation Management: View, update, and manage all reservations
• Billing Management: Handle invoices and payment tracking
• Service Management: Manage hotel services and amenities
• Reports & Analytics: Detailed performance reports with charts
• Feedback Management: Monitor and respond to guest reviews

🛠️ Tech Stack

• Frontend: React 18 with TypeScript
• Routing: React Router DOM
• Charts: Recharts for data visualization
• Icons: Lucide React
• Styling: Custom CSS with CSS Variables
• State Management: React Context API with useReducer

📦 Installation

1. Navigate to the project directory:

   cd hotel-management-system

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open http://localhost:3000 to view it in the browser.

🎨 Design Features

• Modern UI: Clean, intuitive interface with smooth animations
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Accessibility: Proper ARIA labels and keyboard navigation
• Color Scheme: Professional teal and blue color palette
• Typography: Inter font family for excellent readability

🔐 Admin Access

To access the admin panel:

1. Click "Admin" in the navigation
2. Use the demo credentials:
   • Username: admin
   • Password: password

📱 Responsive Breakpoints

• Desktop: 1024px and above
• Tablet: 768px - 1023px
• Mobile: Below 768px

🎯 Key Components

Guest Components

• Home: Landing page with hero section and facilities
• Rooms: Room browsing and booking interface
• Services: Service catalog and request form
• Reviews: Guest reviews and feedback system
• Bill: Invoice viewing and payment interface

Admin Components

• AdminDashboard: KPI cards and analytics charts
• AdminReservations: Reservation management table
• AdminBilling: Invoice and payment management
• AdminServices: Service management interface
• AdminReports: Analytics and reporting dashboard
• AdminFeedback: Review and feedback management

🔧 State Management

The application uses React Context API with useReducer for state management:

• HotelContext: Centralized state for all hotel data
• Actions: Dispatched actions for state updates
• Types: TypeScript interfaces for type safety

🎨 Styling Architecture

• CSS Variables: Consistent theming across components
• Component-specific CSS: Isolated styles for each component
• Responsive Design: Mobile-first approach with media queries
• Animation: Smooth transitions and hover effects

🚀 Getting Started

1. The application will automatically open in your browser
2. Navigate through different sections using the top navigation
3. Try booking a room or exploring the services
4. Access the admin panel to see management features
5. All data is stored in local state (no backend required)

📈 Future Enhancements

• Backend integration with REST API
• Real-time notifications
• Payment processing integration
• Advanced filtering and search
• Multi-language support
• Dark mode theme

🤝 Contributing

This is a demo application showcasing modern React development practices. Feel free to use it as a reference or starting point for your own hotel management system.

📄 License

This project is for demonstration purposes. Feel free to use and modify as needed.