Queue Away

Queue Away is a queue and appointment platform for businesses and customers.

It provides:

• a React + Vite frontend
• a Node + Express API backend
• Supabase authentication
• PostgreSQL persistence
• booking, chat, profile, and business directory flows

Project Structure

client/   Frontend app
backend/  API server

Tech Stack

• Frontend: React, Vite, React Router, Tailwind CSS, Framer Motion
• Backend: Node.js, Express, pg, cors, dotenv
• Auth and data services: Supabase
• Local orchestration: Docker Compose

Requirements

• Node.js 20 or newer
• npm 9 or newer
• A Supabase project
• A PostgreSQL database for the backend

Environment Setup

The backend is configured through backend/.env.

Required backend variables:

DATABASE_URL=
SUPABASE_URL=
SUPABASE_ANON_KEY=
CLIENT_URLS=
PORT=5000

Notes:

• CLIENT_URLS should contain your allowed frontend origins, separated by commas.
• For local development, http://localhost:5173 is usually enough.
• If you use Docker Compose, the frontend build also needs SUPABASE_URL and SUPABASE_ANON_KEY available in the root environment.

Where each variable belongs:

• Frontend variables are used by the React app at build time.
• Backend variables are used by the API server at runtime.
• VITE_* variables belong to the frontend.
• DATABASE_URL, SUPABASE_URL, SUPABASE_ANON_KEY, and CLIENT_URLS belong to the backend.

Required frontend variables:

VITE_API_BASE_URL=
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

Example values:

VITE_API_BASE_URL=http://localhost:5000/api
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Run Locally

Install dependencies for both apps:

npm install --prefix backend
npm install --prefix client

Start the backend:

npm run dev --prefix backend

Start the frontend in another terminal:

npm run dev --prefix client

Local URLs:

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

Port summary:

• 5173 is the Vite development server for the frontend.
• 5000 is the Express API port for the backend.
• 8080 is used by Docker Compose for the containerized frontend.

Docker

You can run the full stack with Docker Compose:

docker compose up --build

This starts:

• backend on http://localhost:5000
• frontend on http://localhost:8080

If the frontend build is using Docker Compose, make sure the root environment provides:

SUPABASE_URL=
SUPABASE_ANON_KEY=

Deployment

Recommended hosting:

• Frontend: Cloudflare Pages
• Backend: Render Web Service

Frontend on Cloudflare Pages

Build settings:

• Build command: npm ci && npm run build --prefix client
• Build output directory: client/dist
• Root directory: repository root

Cloudflare variables:

VITE_API_BASE_URL=https://your-render-service.onrender.com/api
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

These are frontend build variables. They are read by Vite during the Cloudflare build.

Important:

• The app uses BrowserRouter, so SPA fallback is required.
• client/public/_redirects already contains the Cloudflare fallback rule.
• Add the final Cloudflare domain to Supabase Auth redirect URLs.

Backend on Render

Service settings:

• Runtime: Node
• Build command: npm ci --prefix backend
• Start command: npm start --prefix backend
• Root directory: repository root or backend

Render variables:

DATABASE_URL=your-postgres-connection-string
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
CLIENT_URLS=https://your-cloudflare-site.pages.dev,https://your-custom-domain.com

These are backend runtime variables. Render injects them into the Node server process.

Deployment Checklist

Before going live, confirm the following:

1. Backend health check returns ok at /api/health.
2. Frontend loads successfully on the Cloudflare Pages domain.
3. Supabase redirect URLs include the deployed frontend domain.
4. Render CLIENT_URLS includes every frontend origin you will use.
5. Booking, accept, decline, and message flows work in production.

Useful Commands

npm run lint --prefix client
npm run build --prefix client
npm run dev --prefix backend

Notes

• The backend API is expected to live under /api.
• The client reads its API base URL from VITE_API_BASE_URL.
• Keep the backend env values out of the frontend build.