Skip to main content

​
Prerequisites

Before you begin, make sure you have the following:
  • Node.js 20.x — The engines field in package.json pins the required version. Use nvm or fnm to manage Node versions.
  • A Supabase project — Create one at supabase.com. You will need the project URL and anon key. See Database Setup and Environment Variables.
  • npm — Comes bundled with Node.js. The project uses package-lock.json, so npm is preferred over Yarn or pnpm.

​
Install

1

Clone the repository

git clone https://github.com/greenmartialarts/shift-scheduler-web.git
cd shift-scheduler-web
2

Install dependencies

npm install
This installs all production and development dependencies defined in package.json, including Next.js, the Supabase client libraries, Tailwind CSS v4, and the PWA plugin.
3

Configure environment variables

Create a .env.local file in the project root with your Supabase credentials:
.env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
See Environment Variables for the full list of supported variables, including optional SMTP and Axiom settings.
4

Run the database migrations

Apply the SQL migrations in your Supabase SQL Editor before starting the app. See Database Setup for the full migration order and instructions.
5

Start the development server

npm run dev
Open http://localhost:3000 in your browser. The app uses the Next.js App Router with Webpack (the --webpack flag is set explicitly to avoid Turbopack incompatibilities with some dependencies).

​
Available scripts

CommandDescription
npm run devStart the development server with hot reload at localhost:3000
npm run buildCompile a production build (outputs to .next/)
npm startStart the production server (requires a prior npm run build)
npm run lintRun ESLint across the src/ directory

​
Production deployment

The project includes a render.yaml for one-click deployment to Render:
render.yaml
services:
  - type: web
    name: scheduler-web
    env: node
    plan: free
    buildCommand: npm install && npm run build
    startCommand: npm start
Connect your repository to Render and it will use this configuration automatically. Set the required environment variables in the Render dashboard under Environment. See Environment Variables for the full list.
The free Render plan spins down after inactivity. For latency-sensitive deployments, upgrade to a paid plan or use an alternative Node.js host.

​
PWA support

The app is configured as a Progressive Web App using @ducanh2912/next-pwa. When built for production, Next.js generates a manifest.json and a service worker automatically. Users on Chrome or Safari can install the app to their home screen for an app-like experience — useful for tablets running the kiosk. No additional configuration is needed for PWA support. The manifest.json is served from /manifest.json and is referenced in the <head> via the metadata.manifest field in src/app/layout.tsx.

Build docs developers (and LLMs) love

Get started for freeTalk to us