Dream Hotel

A full-stack guest house management application for guest registration, room booking, enquiries, and back-office management. Built with React/Vite on the frontend and Express on the backend.

---

🛠️ Technology

• Frontend: React + Vite
• Backend: Express
• Build: Vite + esbuild

---

🚀 Local Development

Prerequisites

• Node.js v18+
• npm

Install

npm install

Run development server

npm run dev

The app is available at http://localhost:3000.

Database setup

This project uses Prisma with a database configured through prisma/schema.prisma.

1. Configure your database URL

Create or update .env with a valid Prisma connection string, for example:

DATABASE_URL="mysql://root:your_password@127.0.0.1:3306/dream_pension"

2. Apply the schema

npx prisma db push

Or, if you want to create a migration history:

npx prisma migrate dev --name init

3. Seed demo data

npx tsx prisma/seed.ts

If you want to reset and reseed the database from scratch:

npx prisma migrate reset --force

---

📦 Production Build

Build frontend only

macOS / Linux

npm install
npx vite build

Windows PowerShell

npm install
npx vite build

This outputs optimized frontend files to dist/.

Serve frontend only (test)

macOS / Linux

npx serve -s dist -l 5173

Windows PowerShell

npx serve -s dist -l 5173

or:

macOS / Linux

npx http-server dist -p 5173

Windows PowerShell

npx http-server dist -p 5173

Build and start in production

1. Install dependencies

npm install

2. Build the app

npm run build

This builds the frontend into dist/ and the backend into dist/server.cjs.

3. Start the app with PM2

If you have an ecosystem file configured, start all processes with:

pm2 start ecosystem.config.cjs

If you are starting the built backend directly, use:

macOS / Linux

NODE_ENV=production PORT=3000 pm2 start node --name dream-hotel-backend -- dist/server.cjs

Windows PowerShell

$env:NODE_ENV='production'; $env:PORT='3000'; pm2 start node --name dream-hotel-backend -- dist/server.cjs

4. Check PM2 status

pm2 status

5. View logs

pm2 logs dream-hotel-backend

6. Restart or stop the process

pm2 restart dream-hotel-backend
pm2 stop dream-hotel-backend
pm2 delete dream-hotel-backend

7. Save PM2 processes for reboot

pm2 save
pm2 startup

---

🌐 Production Deployment

Use Nginx to serve static frontend files from dist/ and proxy /api/ to the backend.

server {
    listen 80;
    server_name your.domain;
    root /path/to/project/dist;
    index index.html;

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Reload Nginx:

sudo nginx -t
sudo systemctl reload nginx || sudo nginx -s reload

---

⚠️ Notes

• npm run build builds both frontend and backend for production.
• Make sure production environment variables are set before starting the server.
• Use a process manager such as PM2 or systemd in production.

---

☁️ Cloudinary Image Uploads

This project uses Cloudinary for gallery image uploads and runtime optimization.

Required environment variables

Set these for the backend to upload images:

• CLOUDINARY_URL or all three of:
  • CLOUDINARY_CLOUD_NAME
  • CLOUDINARY_API_KEY
  • CLOUDINARY_API_SECRET

If credentials are not configured, gallery uploads will be disabled.

How uploads work

• Admin uploads are handled by backend/modules/gallery/gallery.controller.ts.
• Uploaded files are streamed to Cloudinary using the cloudinary package.
• Uploaded images are stored under the dream_hotel_gallery folder in Cloudinary.
• The backend stores the secure Cloudinary URL in the gallery record.

Frontend optimization

The frontend optimizes Cloudinary image URLs at render time using src/features/gallery/cloudinary.ts.

The helper supports options like:

• width
• crop
• gravity
• quality
• dpr
• format

It creates URLs with Cloudinary transformations such as f_auto, q_auto, and dpr_auto.

Usage examples

Example backend env values:

CLOUDINARY_URL=cloudinary://<api_key>:<api_secret>@<cloud_name>

Example runtime URL optimization:

import { optimizeCloudinaryUrl } from "./features/gallery/cloudinary";

const optimizedUrl = optimizeCloudinaryUrl(image.url, {
  width: 600,
  crop: "fill",
  gravity: "auto",
  quality: "auto",
  dpr: "auto",
  format: "auto",
});

This is used in gallery components such as GalleryCard and GalleryLightbox.