Hotel Reservation System

A full-stack hotel reservation management application built with React, Node.js, Express, and MySQL.

Project Structure

hotel-app/
├── backend/                    # Node.js/Express API server
│   ├── routes/                # API route handlers
│   │   ├── auth.js           # Authentication routes (login, register)
│   │   ├── rooms.js          # Room CRUD operations
│   │   ├── customers.js      # Customer CRUD operations
│   │   ├── bookings.js       # Booking CRUD operations
│   │   ├── payments.js       # Payment CRUD operations
│   │   └── reports.js        # Reporting endpoints
│   ├── middleware/
│   │   └── auth.js           # JWT authentication middleware
│   ├── db.js                 # MySQL database connection
│   ├── server.js             # Express server setup
│   ├── package.json          # Backend dependencies
│   ├── .env                  # Environment variables
│   └── .env.example          # Example environment file
├── frontend/                  # React Vite application
│   ├── src/
│   │   ├── components/
│   │   │   ├── Login.jsx              # Login page
│   │   │   ├── Register.jsx           # Registration page
│   │   │   ├── RoomList.jsx           # Room list display
│   │   │   ├── RoomForm.jsx           # Room form (modal)
│   │   │   ├── CustomerList.jsx       # Customer list display
│   │   │   ├── CustomerForm.jsx       # Customer form (modal)
│   │   │   ├── BookingList.jsx        # Booking list display
│   │   │   ├── BookingForm.jsx        # Booking form (modal)
│   │   │   ├── PaymentList.jsx        # Payment list display
│   │   │   ├── PaymentForm.jsx        # Payment form (modal)
│   │   │   └── ReportList.jsx         # Reports and analytics
│   │   ├── App.jsx                    # Main app component with routing
│   │   ├── App.css                    # App styles
│   │   ├── main.jsx                   # React entry point
│   │   └── index.css                  # Global styles
│   ├── package.json          # Frontend dependencies
│   ├── vite.config.js        # Vite configuration
│   └── index.html            # HTML template
├── database.sql              # Database schema and initial data
└── README.md                 # This file

Features

• User Authentication: Secure login/register system with JWT tokens
• Room Management: Add, edit, delete, and view hotel rooms
• Customer Management: Manage customer information and details
• Booking System: Create and manage room bookings with check-in/check-out dates
• Payment Processing: Track payments for bookings
• Reports: Generate occupancy, revenue, booking, and customer reports
• Responsive UI: Clean, modern interface using Tailwind CSS

Technology Stack

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• MySQL2 - Database driver
• JWT - Authentication
• bcryptjs - Password hashing
• CORS - Cross-origin requests

Frontend

• React - UI library
• React Router - Client-side routing
• Axios - HTTP client
• Vite - Build tool
• Tailwind CSS - Utility-first CSS framework

Setup Instructions

Prerequisites

• Node.js (v16+)
• MySQL Server
• npm or yarn package manager

Backend Setup

1. Navigate to the backend directory

   cd backend

2. Install dependencies

   npm install

3. Configure environment variables

   • Copy or rename .env.example to .env
   • Update database credentials:

     DB_HOST=localhost
     DB_USER=root
     DB_PASSWORD=your_password
     DB_NAME=hotel_db
     PORT=5000
     JWT_SECRET=your_secret_key

4. Set up the database

   mysql -u root -p < ../database.sql

5. Start the server

   npm start
   # or for development with auto-reload
   npm run dev

   The API server will be running at http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Install and configure Tailwind CSS (optional if you want to customize styling)

   • The project is ready to use with basic CSS
   • If you want Tailwind, run: npm install -D tailwindcss

4. Start the development server

   npm run dev

   The application will be available at http://localhost:5173

API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user

Rooms

• GET /api/rooms - Get all rooms
• GET /api/rooms/:id - Get a specific room
• POST /api/rooms - Create a new room (protected)
• PUT /api/rooms/:id - Update a room (protected)
• DELETE /api/rooms/:id - Delete a room (protected)

Customers

• GET /api/customers - Get all customers
• GET /api/customers/:id - Get a specific customer
• POST /api/customers - Create a new customer (protected)
• PUT /api/customers/:id - Update a customer (protected)
• DELETE /api/customers/:id - Delete a customer (protected)

Bookings

• GET /api/bookings - Get all bookings
• GET /api/bookings/:id - Get a specific booking
• POST /api/bookings - Create a new booking (protected)
• PUT /api/bookings/:id - Update a booking (protected)
• DELETE /api/bookings/:id - Delete a booking (protected)

Payments

• GET /api/payments - Get all payments
• GET /api/payments/:id - Get a specific payment
• POST /api/payments - Create a new payment (protected)
• PUT /api/payments/:id - Update a payment (protected)
• DELETE /api/payments/:id - Delete a payment (protected)

Reports

• GET /api/reports/occupancy - Room occupancy report (protected)
• GET /api/reports/revenue - Revenue report (protected)
• GET /api/reports/bookings - Booking report (protected)
• GET /api/reports/customers - Customer report (protected)

Default Credentials

After setting up the database, you can login with:

• Username: admin
• Password: password

⚠️ Important: Change these credentials in production!

Database Schema

The application uses the following main tables:

• users - User accounts for authentication
• rooms - Hotel room information
• customers - Customer information
• bookings - Room booking records
• payments - Payment records

See database.sql for the complete schema.

Running Both Frontend and Backend

Terminal 1 - Backend:

cd backend
npm start

Terminal 2 - Frontend:

cd frontend
npm run dev

Access the application at http://localhost:5173

Future Enhancements

• Email notifications for bookings and payments
• Advanced search and filtering
• User roles and permissions system
• Invoice generation
• Multi-language support
• Mobile app version
• Real-time notifications
• Integration with payment gateways

Troubleshooting

Database Connection Error

• Ensure MySQL is running
• Check credentials in .env file
• Verify the database exists: mysql -u root -p -e "SHOW DATABASES;"

Port Already in Use

• Backend default port: 5000
• Frontend default port: 5173
• Change ports in .env or vite.config.js if needed

CORS Issues

• Ensure backend is running before starting frontend
• Check CORS configuration in backend/server.js

License

ISC

Support

For issues or questions, please create an issue in the repository or contact the development team.