Refq - Hotel Booking Management System

A full-featured hotel booking application built with React and Supabase, enabling users to manage hotel reservations, track availability, and handle authentication with two-factor security.

Overview

Refq provides a complete solution for hotel booking management, offering both user-facing booking capabilities and an admin dashboard for analytics and reservation management.

Features

User Features

• Secure Authentication: Login with email/password
• Two-Factor Authentication: Optional 2FA for enhanced security
• Password Recovery: Forgot password and reset password flows
• Booking Creation: Reserve hotel rooms with guest details
• Booking History: View past and current reservations

Admin Features

• Dashboard Analytics: View booking statistics and trends
• Booking Management: View, update, and manage all reservations
• Availability Calendar: Visual calendar for room availability
• Availability Summary: Quick overview of room status

Technology Stack

Layer	Technology
Frontend	React 18, Vite
Styling	CSS
Database	Supabase (PostgreSQL)
Authentication	Supabase Auth
Build Tool	Vite

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account (for backend)

Installation

# Navigate to the project directory
cd hotel-booking

# Install dependencies
npm install

# Start development server
npm run dev

Environment Setup

Create a .env file in the src directory with your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Project Structure

hotel-booking/
├── src/
│   ├── components/          # React components
│   │   ├── AdminBookingManager.jsx
│   │   ├── AvailabilityCalendar.jsx
│   │   ├── AvailabilitySummary.jsx
│   │   ├── BookingAnalyticsDashboard.jsx
│   │   ├── BookingForm.jsx
│   │   ├── Footer.jsx
│   │   ├── ForgotPassword.jsx
│   │   ├── Login.jsx
│   │   ├── ResetPassword.jsx
│   │   ├── Toast.jsx
│   │   └── TwoFactorSetup.jsx
│   ├── services/            # API services
│   │   └── availabilityService.js
│   ├── styles/              # CSS files
│   │   └── main.css
│   ├── App.jsx             # Main application component
│   ├── App.css             # App-level styles
│   ├── index.css           # Global styles
│   ├── main.jsx            # Application entry point
│   ├── constants.js        # Application constants
│   └── supabaseClient.js   # Supabase client configuration
├── public/                 # Static assets
├── index.html              # HTML entry point
├── vite.config.js          # Vite configuration
├── eslint.config.js        # ESLint configuration
└── package.json            # Dependencies

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Supabase Database Schema

The application expects the following tables in your Supabase project:

• users - User accounts and profile data
• bookings - Hotel reservations
• rooms - Room availability and details
• availability - Room availability records

Security Features

• Row Level Security (RLS) policies in Supabase
• Password hashing via Supabase Auth
• Session management
• Two-factor authentication support
• Secure environment variable handling

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Support

For issues or questions, please open a GitHub issue.