WorkShiftly Installation Guide

Prerequisites

Before you begin setting up WorkShiftly, make sure you have the following requirements:

1

System Requirements

Node.js: Version 18.0 or higher (recommended: 18.x or 20.x)
npm/yarn/pnpm: Package manager for dependencies
Git: Version control system
Modern Browser: Chrome, Firefox, Safari, or Edge (latest versions)

2

Accounts Required

Supabase Account: supabase.com - Free tier available
Stripe Account: stripe.com - For payment processing (test mode available)
Razorpay Account: razorpay.com - Optional, for additional payment gateway
SSLCommerz Account: SSLCommerz Developer Portal - Optional, for regional payments
GitHub Account: For code repository and deployment
Vercel Account: vercel.com - For deployment (optional)

3

Technical Knowledge

Basic JavaScript/TypeScript: Understanding of modern JavaScript and TypeScript
React/Next.js: Basic knowledge of React components and Next.js routing
Database Concepts: Basic understanding of SQL and relational databases
Command Line: Comfortable using terminal/command prompt
REST APIs: Basic understanding of API endpoints and HTTP methods

4

Hardware Requirements

RAM: Minimum 4GB, recommended 8GB or more
Storage: At least 2GB free space for dependencies
Internet Connection: Stable connection for development and deployment

Note: All the required tools are free to use. The Supabase free tier provides enough resources for small to medium deployments. Payment gateways offer test modes for development.

Important: Make sure you have admin access to your computer to install Node.js and other development tools.

Project Overview

WorkShiftly is a modern work shift management platform built with Next.js 15 and Supabase. It connects workers with employers, allowing businesses to post job shifts and workers to find flexible work opportunities.

Key Features

Worker Management: Workers can browse and apply for available shifts
Employer Dashboard: Employers can post jobs, manage shifts, and hire workers
Admin Panel: Complete administrative control over the platform
Shift Management: Create, manage, and track work shifts
Package System: Employers purchase packages to post jobs (Basic, Standard, Premium)
Payment Gateway: Integrated payment processing with Stripe, Razorpay, and SSLCommerz
Transaction Management: Track all payments and transactions
Notifications: Real-time notifications for workers and employers
Reports & Analytics: Comprehensive reporting and analytics dashboard
Job Categories: Organize jobs by categories and skills
Referral System: Track referrals and rewards
Feedback System: Collect and manage user feedback

Technology Stack

Frontend: Next.js 15, React 19, TypeScript
Backend: Supabase (PostgreSQL, Auth, Storage)
UI: Tailwind CSS, Radix UI Components, Lucide Icons
Database: PostgreSQL with Row Level Security
Authentication: Supabase Auth
Payments: Stripe, Razorpay, SSLCommerz
State Management: SWR for data fetching
Forms: React Hook Form

Note: This system is designed for businesses that need flexible staffing solutions and workers seeking flexible work opportunities.

Supabase Database Setup

Beginner-Friendly • No Coding Required • Estimated Time: 30–45 Minutes

⚠ Official Supabase Notice — Items NOT Included in a Database Restore
Per Supabase's official documentation, the following are NOT stored in the database and must be configured manually after setup:

• Edge Functions — must be redeployed separately
• Auth Settings and API keys — review in Authentication settings after setup
• Realtime settings — configure in Database → Replication if needed
• Additional database extensions — covered in Step 2 of this guide
• Read Replicas — configure separately if required

These items are covered in the Web App and Mobile App setup guides.

What You Need Before Starting

A computer (Mac or Windows)
A stable internet connection
The database/ folder from your purchase: roles.sql, schema.sql, data.sql, webhooks.sql (optional)
An email address to create your Supabase account

ℹ Note — No coding knowledge required. Every step uses copy-and-paste only.

Overview — What You Will Do

Phase	Step	Task	Tool
Phase 1	1	Create Supabase account and project	Browser
Phase 1	2	Enable required database extensions	SQL Editor
Phase 1	3	Run roles.sql	SQL Editor
Phase 1	4	Run schema.sql	SQL Editor
Phase 2	5	Install PostgreSQL on your computer	Your Computer
Phase 2	6	Get Session Pooler connection string	Browser
Phase 2	7	Run data.sql via terminal	Terminal
Phase 3	8	Set up storage bucket policies	SQL Editor
Phase 3	9	Verify setup and collect API keys	Browser
Phase 4 (Optional)	10	Set up webhooks	SQL Editor

✓ Success — All steps use either your browser or a simple copy-paste terminal command. No coding knowledge needed.

🌐 PHASE 1

Browser Setup

Use only your browser and the Supabase SQL Editor

1

Create Your Supabase Account and Project — Takes about 2–3 minutes

1.1 — Sign Up

Open your browser and go to supabase.com
Click "Start your project" and sign up with Google or your email address
If you signed up with email, check your inbox and click the verification link

1.2 — Create a New Project

After logging in, click the green "New Project" button and fill in the form:

Field	What to Enter
Organization	Your name or company name
Project Name	e.g. `workshiftly` or your preferred name
Database Password	Create a strong password — WRITE IT DOWN AND SAVE IT NOW
Region	Choose the region closest to your users

Click "Create new project" and wait 2–3 minutes for setup to complete.

⚠ Important — Save it immediately in a secure place — you will need it in Step 7 to run data.sql.

2

Enable Required Database Extensions — Must be done before running any SQL files

Workshiftly depends on specific PostgreSQL extensions. These must be enabled first.

Extension	Purpose	Required?
`uuid-ossp`	Generates unique IDs used throughout the database	✓ Critical
`pgcrypto`	Generates secure random UUIDs for all tables	✓ Critical
`pg_net`	Sends HTTP webhook requests for notifications	✓ For webhooks
`pg_graphql`	GraphQL API — auto-enabled by Supabase	Safe to include
`pg_stat_statements`	Performance monitoring — auto-enabled by Supabase	Safe to include
`pgjwt`	JWT auth handling — auto-enabled by Supabase	Safe to include
`supabase_vault`	Secrets management — auto-enabled by Supabase	Safe to include

ℹ Note — None of these affect payment processing or app performance. IF NOT EXISTS means nothing breaks if already active.

How to Open the SQL Editor

In your Supabase project, look at the left sidebar
Click "SQL Editor" — it has a </> icon
Click "New query" — a blank white editor opens

Run the Extensions Query

Copy everything below, paste into the SQL Editor, click the green Run button:

-- Enable all required extensions for Workshiftly

-- Safe to run: IF NOT EXISTS means nothing breaks if already enabled

CREATE EXTENSION IF NOT EXISTS "pg_net" WITH SCHEMA "extensions";

CREATE EXTENSION IF NOT EXISTS "pg_graphql" WITH SCHEMA "graphql";

CREATE EXTENSION IF NOT EXISTS "pg_stat_statements" WITH SCHEMA "extensions";

CREATE EXTENSION IF NOT EXISTS "pgcrypto" WITH SCHEMA "extensions";

CREATE EXTENSION IF NOT EXISTS "pgjwt" WITH SCHEMA "extensions";

CREATE EXTENSION IF NOT EXISTS "supabase_vault" WITH SCHEMA "vault";

CREATE EXTENSION IF NOT EXISTS "uuid-ossp" WITH SCHEMA "extensions";

✓ Success — If you see an error, wait 1 minute and try again — the project may still be initializing.

3

Run roles.sql — Sets up database user roles and access permissions

How to Run a SQL File — Use This for Every File in Phase 1

#	Action	Windows	Mac
1	Open the file	Right-click → Open with → Notepad	Right-click → Open with → TextEdit
2	Select all text	`Ctrl + A`	`Cmd + A`
3	Copy	`Ctrl + C`	`Cmd + C`
4	New query in SQL Editor	Click "New query"	Click "New query"
5	Paste	`Ctrl + V`	`Cmd + V`
6	Run	Click green Run button	Click green Run button
7	Wait	Do NOT close or refresh tab	Do NOT close or refresh tab

Now follow those steps for roles.sql.

✓ Success — Expected result: Success. No rows returned — Do not move to Step 4 until you see success.

4

Run schema.sql — Creates all tables, relationships, functions, and triggers

This is the most important file in Phase 1. It defines the entire database structure.

Follow the same 7-step method from Step 3 for schema.sql. This may take 10–30 seconds.

✓ Success — Expected result: Success. No rows returned

If You See This Error

ERROR: 42883: function supabase_functions.http_request() does not exist

Why this happens: The pg_net extension was not fully activated yet on the new project.

Fix — follow these steps in order:

Open a new query in SQL Editor and run:

CREATE SCHEMA IF NOT EXISTS supabase_functions;
Wait 1–2 minutes
Re-run schema.sql again

✓ Success — Once schema.sql runs successfully, all your database tables and structure are ready.

💻 PHASE 2

Terminal Setup

Run data.sql to set up authentication, storage buckets, and all essential data

ℹ Why the Terminal Is Required for data.sql

The data.sql file sets up system-level configurations that can ONLY be applied through a direct PostgreSQL connection — not through the SQL Editor. This includes:

• Authentication providers (email and phone sign-in)
• Storage buckets (images, files, worker-documents)
• Internal system sequences and configurations
• All essential default data (admin account, settings, categories, packages, payment gateways)

The SQL Editor has limited permissions and cannot touch Supabase's internal auth and storage schemas. The terminal connects as a full PostgreSQL superuser and can do everything.

5

Install PostgreSQL on Your Computer — One-time setup only — skip if psql is already installed

You need the psql command-line tool to connect to your Supabase database.

💡 Tip — Download from postgresql.org/download/ or follow the step-by-step instructions below for your operating system.

🍎 Mac — Installation Steps

Step 5A — Install Homebrew (skip if you already have it)

Homebrew is a free package manager for Mac. Open Terminal first:

Press Cmd + Space → type Terminal → press Enter

Then run this command in Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the on-screen prompts. This may take a few minutes.

Step 5B — Install PostgreSQL

brew install postgresql

Wait for it to finish. You will see text scrolling — this is normal.

Step 5C — Add psql to your PATH

Run these two commands one at a time:

echo 'export PATH="/opt/homebrew/opt/postgresql@18/bin:$PATH"' >> ~/.zshrc

source ~/.zshrc

Step 5D — Verify the installation

psql --version

✓ Success — Expected result: psql (PostgreSQL) 18.x — If you see a version number, psql is ready. Move to Step 6.

🪟 Windows — Installation Steps

Step 5A — Download the Installer

Go to postgresql.org/download/windows/
Click "Download the installer"
Choose the latest version and download for Windows x86-64

Step 5B — Run the Installer

Open the downloaded .exe file and click Next
On the Select Components screen, make sure "Command Line Tools" is checked
You do NOT need PostgreSQL Server, pgAdmin, or Stack Builder — uncheck them if you want
Keep the default port 5432 and click Next through the remaining screens
Click Finish when installation completes

Step 5C — Add psql to your Windows PATH

Press Windows + S and search for "Environment Variables"
Click "Edit the system environment variables"
Click the "Environment Variables" button
Under "System variables", find "Path" and double-click it
Click "New" and add this (adjust version number if needed):

C:\Program Files\PostgreSQL\18\bin
Click OK on all windows to save

Step 5D — Verify the installation

Press Windows + S, search for "Command Prompt", open it, then run:

psql --version

✓ Success — Expected result: psql (PostgreSQL) 18.x — If you see a version number, psql is ready. Move to Step 6.

6

Get Your Session Pooler Connection String — From the Connect button in your Supabase project

⚠ Important — Direct connection requires IPv6 which most home and office networks do not support. Session Pooler works on all networks.

How to Find It — Updated Supabase UI

Supabase now shows the connection string from the top bar of your project — not in Settings.

Open your Supabase project in the browser
At the top of the page, click the "Connect" button in the top navigation bar
A dialog box will open — it defaults to the "Connection String" tab
You will see a "Method" dropdown — it is set to "Direct connection" by default
Click the Method dropdown and change it to "Session pooler"
The connection string will update — copy it. It looks like this:

postgresql://postgres.xxxxxxxxxxxx:[YOUR-PASSWORD]@aws-1-ap-southeast-1.pooler.supabase.com:5432/postgres
Replace [YOUR-PASSWORD] with the database password you saved in Step 1

💡 Tip — Use exactly the port shown in YOUR copied string from Supabase — do not change it.

7

Run data.sql via Terminal — Sets up auth, storage buckets, admin account, and all essential data

Before running the command, you need to build it correctly using your own details.

Here is the full command structure:

psql "YOUR-CONNECTION-STRING" -f "PATH-TO-YOUR-DATA.SQL-FILE"

Understanding and Building Your Command

Your full connection string from Step 6 looks like this:

postgresql://postgres.jqnrcxrpzmtcvnygeixn:[YOUR-PASSWORD]@aws-1-ap-southeast-1.pooler.supabase.com:5432/postgres

Here is what each part means and what you need to update:

Part	Meaning	What to do
`postgres.jqnrcxrpzmtcvnygeixn`	Your project username	Copy exactly from Supabase — do NOT change this
`[YOUR-PASSWORD]`	Your database password	Replace with the password you saved in Step 1
`aws-1-ap-southeast-1.pooler.supabase.com`	Your project host	Copy exactly from Supabase — do NOT change this
`5432`	Port number	Use exactly the port shown in YOUR Supabase string
`postgres`	Database name	Leave as-is — do NOT change this

⚠ Important
• Do NOT use the example connection strings in this guide — always use YOUR OWN string copied from Supabase
• Do NOT change the port — use exactly what Supabase shows in your Session Pooler string
• Do NOT change the username (postgres.xxxxxxxxxxxx) — copy it exactly
• Only replace [YOUR-PASSWORD] with your actual database password

Finding Your data.sql File Path

You also need the full path to your data.sql file on your computer:

🍎 Mac — Finding the File Path

Open Finder and locate your data.sql file
Right-click the file and hold the Option (Alt) key
Click "Copy data.sql as Pathname" — this copies the full path
The path will look like: /Users/yourname/Downloads/workshiftly/database/data.sql

🪟 Windows — Finding the File Path

Open File Explorer and locate your data.sql file
Hold Shift and right-click the file
Click "Copy as path" — this copies the full path including quotes
The path will look like: "C:\Users\YourName\Downloads\workshiftly\database\data.sql"

The Complete Command — Mac

Open Terminal and run this command with YOUR values:

psql "postgresql://postgres.xxxxxxxxxxxxxx:YOUR-PASSWORD@aws-1-region.pooler.supabase.com:5432/postgres" \

  -f "/Users/yourname/Downloads/workshiftly/database/data.sql"

The Complete Command — Windows

Open Command Prompt and run this command with YOUR values:

psql "postgresql://postgres.xxxxxxxxxxxx:YOUR-PASSWORD@aws-1-region.pooler.supabase.com:5432/postgres" -f "C:\Users\YourName\Downloads\workshiftly\database\data.sql"

What You Will See While It Runs

You will see many lines scrolling — this is normal and means it is working:

SET
SET
INSERT 0 1
INSERT 0 1
INSERT 0 3
...

Wait until the terminal returns to the command prompt (% on Mac, > on Windows).
Do NOT close the terminal window while it is running.

ℹ Note — ERROR: relation "supabase_functions.hooks_id_seq" does not exist

This is completely harmless — it is a known Supabase internal sequence that does not exist on new projects. Your data has loaded successfully. Ignore this and continue to Phase 3.

If the Command Fails — Common Reasons

Error Message	Most Likely Cause	Fix
could not translate host name	Using Direct connection string instead of Session Pooler	Go back to Step 6 and copy the Session Pooler string (not Direct connection)
Tenant or user not found	Wrong username in the connection string	Make sure username includes your project ID like `postgres.xxxxxxxxxxxx` — copy it exactly from Supabase
password authentication failed	Wrong database password	Re-type your password carefully. It is case-sensitive. Reset at Project Settings → Database if needed
psql: command not found	psql is not installed or not in your PATH	Complete Step 5 again including the PATH setup (Steps 5C and 5D)
No such file or directory	Wrong path to data.sql file	Double-check the file path. Use the copy-as-path method described above
connection refused	Internet connection issue	Check your connection and try again
SSL connection error	SSL certificate issue	Add `?sslmode=require` to end of connection string before the closing quote

✓ PHASE 3

Final Browser Setup

Back to Supabase for the last configuration steps

8

Set Up Storage Bucket Policies — Allows the app to upload and read files correctly

8.1 — Verify Your Buckets Exist

Click "Storage" in the left sidebar
Confirm you see all 2 buckets: images, files

⚠ Important — If you do not see these buckets, data.sql did not complete successfully. Go back and re-run Step 7.

8.2 — Apply Storage Policies

In SQL Editor → New query, copy and paste the entire block below, then click Run:

-- Storage Bucket Policies for Workshiftly

-- Run this after data.sql has been executed successfully

-- IMAGES bucket

CREATE POLICY "images_select" ON storage.objects

  FOR SELECT TO public USING (bucket_id = 'images');

CREATE POLICY "images_insert" ON storage.objects

  FOR INSERT TO public WITH CHECK (bucket_id = 'images');

CREATE POLICY "images_update" ON storage.objects

  FOR UPDATE TO public USING (bucket_id = 'images');

CREATE POLICY "images_delete" ON storage.objects

  FOR DELETE TO public USING (bucket_id = 'images');

-- FILES bucket

CREATE POLICY "files_select" ON storage.objects

  FOR SELECT TO public USING (bucket_id = 'files');

CREATE POLICY "files_insert" ON storage.objects

  FOR INSERT TO public WITH CHECK (bucket_id = 'files');

CREATE POLICY "files_update" ON storage.objects

  FOR UPDATE TO public USING (bucket_id = 'files');

CREATE POLICY "files_delete" ON storage.objects

  FOR DELETE TO public USING (bucket_id = 'files');

✓ Success — Expected result: Success. No rows returned — The app can now upload and display all files.

9

Verify Setup and Collect API Keys — Confirm everything worked correctly

9.1 — Check Tables Have Data

Click "Table Editor" in the left sidebar. Confirm these tables have data:

Table Name	Should Contain
`admin`	1 row — your default admin login account
`settings`	1 row — platform configuration
`job_category`	Multiple rows — default job categories
`payment_gateways`	At least 1 row — payment gateway configuration
`packages`	Multiple rows — employer subscription plans

9.2 — Check Storage Buckets

Click "Storage" in the left sidebar
Confirm all 3 buckets exist: images, files, worker-documents
Click "Policies" at the top right — confirm policies are listed under each bucket

9.3 — Check and Configure Authentication Providers

Email sign-in is enabled by default in Supabase. However, Workshiftly also uses phone sign-in which must be enabled manually.

Click "Authentication" in the left sidebar
Click "Providers"
Confirm "Email" provider is enabled (it should be on by default)
Find "Phone" provider — click on it and enable it

⚠ Important — To use phone sign-in (OTP via SMS), you must connect a phone SMS provider such as Twilio.

After enabling the Phone provider, follow the official Supabase guide for your chosen method:
https://supabase.com/docs/guides/auth/phone-login

Without this setup, phone sign-in will not work in the mobile app.

9.4 — Collect Your API Keys

Go to Project Settings (&cog;) → API and copy these 3 values:

Key Name	Where to Find It	Used For
Project URL	"Project URL" section	Web app and Mobile app config
Anon / Public Key	API Keys → anon public	Web app and Mobile app config
Service Role Key	API Keys → service_role	Web app backend only — keep secret

⚠ Important — Never share it publicly, never put it in the mobile app, never commit it to GitHub.

✓ Supabase Database Setup Complete!
Your Supabase project is fully configured and ready to connect to Workshiftly.
Next: Follow the Web App Setup Guide and Mobile App Setup Guide.

🔔 PHASE 4

Optional Setup

Configure webhooks after your web app is deployed

10

Set Up Webhooks (Optional) — Enable automatic notifications for shifts and withdrawals

Webhooks send automatic HTTP notifications to your server when:

A new shift is created by an employer
A withdrawal request is submitted

ℹ Note — This step is optional. The platform works fully without webhooks. Set this up only after your web app is live.

What You Need First

Your deployed web app URL — e.g. https://your-app.vercel.app
A webhook secret — any random string you choose, e.g. my-secret-webhook-key-2024

⚠ Important — The webhook secret here must exactly match the WEBHOOK_SECRET value in your web app's .env.local file.

How to Run webhooks.sql

Open webhooks.sql from your database folder in a text editor

Find and replace these two placeholders in the file:

Placeholder	Replace With
`YOUR_WEBHOOK_URL`	Your deployed app URL — e.g. `https://your-app.vercel.app`
`YOUR_WEBHOOK_SECRET`	Your chosen secret string

Save the file
Follow the 7-step SQL Editor method from Step 3 to run it

✓ Success — Expected result: Success. No rows returned

💊 Troubleshooting — Solutions for Common Errors

Error or Problem	Cause	Fix
`function supabase_functions.http_request() does not exist`	pg_net not fully initialized	Run: `CREATE SCHEMA IF NOT EXISTS supabase_functions;` then re-run schema.sql
relation already exists	Table was already created	Safe to ignore. Use a new fresh project for a fully clean setup
policy already exists	Storage policy already created	Safe to ignore — policy is already in place
could not translate host name	Using Direct connection instead of Session Pooler	Step 6: use Session Pooler string from the Connect button → Session pooler method
Tenant or user not found	Wrong username format	Copy exact string from Supabase — username must include project ID like `postgres.xxxxxxxxxxxx`
password authentication failed	Wrong database password	Re-enter carefully. Reset at Project Settings → Database if needed
psql: command not found	psql not installed or not in PATH	Complete Step 5 including PATH setup (5C and 5D)
No such file or directory	Wrong path to data.sql	Use the copy-as-path method to get the exact file path (Step 7)
Storage uploads fail in app	Bucket policies not applied	Re-run storage policies from Step 8
Admin login fails	data.sql not completed	Check admin table has a row. Re-run Step 7 if empty
Auth providers missing	data.sql not completed or manual setup needed	Re-run Step 7, or enable manually in Authentication → Providers
Phone sign-in not working	Twilio or SMS provider not configured	Follow Supabase phone auth guide: supabase.com/docs/guides/auth/phone-login
Storage buckets missing	data.sql not completed	Re-run Step 7
hooks_id_seq error at end of data.sql	Harmless internal sequence	Ignore — data loaded successfully
Project still loading after 5 min	Supabase server issue	Refresh page. Check status.supabase.com

📋 Quick Reference — Supabase Dashboard Navigation

What You Need to Do	How to Get There
Get connection string	Click the "Connect" button in the top navigation bar of your project
Run SQL queries	Left sidebar → SQL Editor → New query
View table data	Left sidebar → Table Editor
View storage buckets	Left sidebar → Storage
View storage policies	Left sidebar → Storage → Policies
Check / enable auth providers	Left sidebar → Authentication → Providers
Find your API keys	Left sidebar → Project Settings (&cog;) → API
Reset database password	Left sidebar → Project Settings (&cog;) → Database → Reset password
Check enabled extensions	Left sidebar → Database → Extensions
Check Supabase service status	https://status.supabase.com

.env Configuration

Configure your environment variables for the project:

1

Create .env.local file

In your project root directory, create a file named .env.local

2

Add Supabase credentials

# Supabase Database Configuration

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url

NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

3

Add application settings

# Application Base URL (REQUIRED)

BASE_URL=http://localhost:3000

# Application Name (Optional)

APP_NAME=WorkShiftly

4

Add Payment Gateway credentials

# Stripe Configuration (Primary Payment Gateway)

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

STRIPE_SECRET_KEY=sk_test_...

STRIPE_WEBHOOK_SECRET=whsec_...

# Razorpay Configuration (Optional)

RAZORPAY_ID_KEY=rzp_test_...

RAZORPAY_SECRET_KEY=...

RAZORPAY_WEBHOOK_SECRET=...

# SSLCommerz Configuration (Optional)

SSLCOMMERZ_STORE_ID=your_store_id

SSLCOMMERZ_STORE_PASSWORD=your_store_password

5

Add Email Configuration (Optional)

# Email Service Configuration
EMAIL_SERVICE=gmail
[email protected]
EMAIL_PASSWORD=your_app_password
[email protected]

Note: For Gmail, you'll need to generate an App Password. For other services, use your SMTP credentials.

6

Complete .env.local example

# ============================================
# SUPABASE CONFIGURATION
# ============================================
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# ============================================
# APPLICATION SETTINGS
# ============================================
BASE_URL=http://localhost:3000
APP_NAME=WorkShiftly

# ============================================
# STRIPE PAYMENT GATEWAY
# ============================================
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# ============================================
# RAZORPAY PAYMENT GATEWAY (Optional)
# ============================================
RAZORPAY_ID_KEY=rzp_test_...
RAZORPAY_SECRET_KEY=...
RAZORPAY_WEBHOOK_SECRET=...

# ============================================
# SSLCOMMERZ PAYMENT GATEWAY (Optional)
# ============================================
SSLCOMMERZ_STORE_ID=your_store_id
SSLCOMMERZ_STORE_PASSWORD=your_store_password

# ============================================
# EMAIL CONFIGURATION (Optional)
# ============================================
EMAIL_SERVICE=gmail
[email protected]
EMAIL_PASSWORD=your_app_password
[email protected]

Note: Replace the placeholder values with your actual credentials from Supabase and payment gateway dashboards. For local development, use test keys from payment gateways.

Security: Never commit .env.local to version control. It's already in .gitignore by default.

Database Scripts

Set up your database schema and initial data:

1

Access SQL Editor

Go to your Supabase dashboard
Click on "SQL Editor" in the left sidebar
Click "New Query"

2

Run Core Database Scripts

Execute these scripts in order (if you have SQL files in your project):

Core Tables: Create users, employers, workers, jobs, shifts tables
Package System: Create packages, package_purchases, employer_packages tables
Transactions: Create transactions table for payment tracking
Notifications: Create notifications table
Job Categories: Create job_categories and related tables
Referrals: Create referral tracking tables
Feedback: Create feedback system tables

3

Package System Setup

If you have the package system SQL file, run it to create:

packages table with default packages (Basic, Standard, Premium)
package_purchases table for purchase tracking
employer_packages table for active package management

Default packages include:

Basic: $19.99 - 3 jobs, 10 applicants/job, 15 days
Standard: $49.99 - 10 jobs, 30 applicants/job, 30 days
Premium: $99.99 - Unlimited jobs, 100 applicants/job, 60 days

4

Enable Row Level Security

After running the scripts, enable RLS policies for data security:

-- Enable RLS on all tables

ALTER TABLE employers ENABLE ROW LEVEL SECURITY;

ALTER TABLE workers ENABLE ROW LEVEL SECURITY;

ALTER TABLE jobs ENABLE ROW LEVEL SECURITY;

ALTER TABLE shifts ENABLE ROW LEVEL SECURITY;

ALTER TABLE packages ENABLE ROW LEVEL SECURITY;

ALTER TABLE transactions ENABLE ROW LEVEL SECURITY;

5

Create Admin User

Create your first admin user through the Supabase Auth system or via SQL:

Go to "Authentication" → "Users" in Supabase
Click "Add User" → "Create new user"
Enter admin email and password
Set user metadata: {"role": "admin"}
Or use the admin setup script if available

Success! Your database is now set up with all necessary tables. You can now proceed to local development setup.

Local Development

Set up your local development environment:

1

Clone or Navigate to Project

If you have the project in a repository:

git clone [your-repository-url]

cd Work-Shift-Management-Web

Or navigate to your project directory if you already have it.

2

Install Dependencies

npm install

# or

pnpm install

# or

yarn install

3

Configure Environment Variables

Make sure your .env.local file is properly configured with all required variables (see .env Configuration section above).

4

Start Development Server

npm run dev

# or

pnpm dev

# or

yarn dev

The server will start on http://localhost:3000 by default.

5

Access the Application

Open your browser and go to http://localhost:3000
You should see the WorkShiftly landing page
Navigate to http://localhost:3000/login for admin access
Use your admin credentials to log in

6

Development Tools

ngrok: For testing webhooks locally (HTTPS required)
npm run tunnel
# This will expose localhost:3000 via ngrok
Linting: Run npm run lint to check code quality
Build: Run npm run build to test production build

Note: Make sure your .env.local file is properly configured before starting the development server. The app uses Turbopack for faster development builds.

Admin Setup

Access and configure your admin account:

1

Create Admin User

Go to your Supabase dashboard
Navigate to "Authentication" → "Users"
Click "Add User" → "Create new user"
Enter admin email (e.g., [email protected])
Set a strong password
In "User Metadata", add: {"role": "admin"}
Click "Create User"

2

Login to Admin Dashboard

Visit http://localhost:3000/login
Enter your admin email and password
Click "Sign In"
You should be redirected to the admin dashboard

3

Admin Dashboard Features

Dashboard: Overview of jobs, shifts, employers, workers, and analytics
Employers: Manage employer accounts and profiles
Workers: Manage worker accounts and profiles
Shifts: View and manage all work shifts
Packages: Manage employer packages (Basic, Standard, Premium)
Payments: View payment gateway configurations
Transactions: Track all financial transactions
Reports: Generate reports and analytics
Job Categories: Manage job categories and skills
Notifications: Send and manage notifications
Referrals: Track referral system
Feedback: Manage user feedback
Settings: Configure site settings and preferences

4

Change Default Credentials

After login, go to "Settings" → "Profile" (or Admin Profile)
Update your email and password
Set a strong, secure password
Save changes

Security Tip: Change the default admin credentials immediately after first login. Use a strong password with a combination of letters, numbers, and special characters.

Features Guide

Learn about the key features of WorkShiftly:

1

Worker Management

Worker Profiles: Workers can create and manage their profiles
Job Browsing: Browse available jobs and shifts
Job Applications: Apply for jobs that match their skills
Shift Tracking: Track assigned shifts and work history
Earnings: View earnings and payment history
Notifications: Receive notifications for new jobs and updates

2

Employer Management

Employer Profiles: Employers can create and manage business profiles
Job Posting: Post jobs after purchasing a package
Package System: Purchase Basic, Standard, or Premium packages
Applicant Management: Review and approve worker applications
Shift Management: Create and manage work shifts
Payment Processing: Process payments to workers

3

Package System

Package Tiers: Three tiers (Basic, Standard, Premium) with different limits
Job Limits: Each package has a limit on number of jobs
Applicant Limits: Maximum applicants per job varies by package
Duration: Packages expire after a set number of days
Purchase Flow: Employers purchase packages via payment gateway
Auto-Expiry: Packages automatically expire when duration ends

4

Payment Gateway Integration

Stripe: Primary payment gateway for package purchases and worker payments
Razorpay: Alternative payment gateway for international payments (optional)
SSLCommerz: Payment gateway for regional payments, especially in Bangladesh (optional)
Webhooks: Secure webhook processing for payment events from all gateways
Transaction Tracking: All transactions are recorded and tracked in the database
Multiple Payment Methods: Support for credit cards, debit cards, and digital wallets
Worker Payments: Employers can pay workers through integrated payment gateways

5

Shift Management

Shift Creation: Employers create shifts with date, time, and location
Shift Assignment: Assign workers to shifts
Shift Tracking: Track shift status (pending, active, completed)
Location Services: Google Maps integration for location
Shift History: View past and upcoming shifts

6

Analytics & Reporting

Dashboard Analytics: Overview of key metrics and statistics
Transaction Reports: Financial transaction reports
Job Reports: Job posting and application statistics
User Reports: Employer and worker activity reports
Export Options: Export reports to CSV/Excel

Payment Setup

Configure payment gateways for package purchases and worker payments:

1

Stripe Setup

Go to stripe.com and create an account
Navigate to "Developers" → "API keys"
Copy your Publishable key (starts with pk_test_ for test mode)
Copy your Secret key (starts with sk_test_ for test mode)
Go to "Developers" → "Webhooks"
Add webhook endpoint: https://yourdomain.com/api/webhooks/stripe
Copy the webhook signing secret
Add all keys to your .env.local file

2

Razorpay Setup (Optional)

Go to razorpay.com and create an account
Navigate to "Settings" → "API Keys"
Copy your Key ID and Key Secret
Set up webhook: https://yourdomain.com/api/webhooks/razorpay
Add credentials to .env.local

3

SSLCommerz Setup (Optional)

Go to SSLCommerz Developer Portal
Create an account and register your store
Get your Store ID and Store Password from the dashboard
For testing, use sandbox credentials
Add credentials to .env.local:
SSLCOMMERZ_STORE_ID=your_store_id
SSLCOMMERZ_STORE_PASSWORD=your_store_password

4

Local Webhook Testing

For local development, use ngrok to expose your local server:

# Install ngrok

npm install -g ngrok

# Start ngrok tunnel

npm run tunnel

# or

ngrok http 3000

# Use the HTTPS URL provided by ngrok for webhooks

# Example: https://abc123.ngrok.io/api/webhooks/stripe

Note: Use test mode/sandbox keys during development. Switch to live keys only in production. Make sure to update webhook URLs in production. SSLCommerz requires HTTPS for production webhooks.

Payment Gateway Priority: The system supports multiple payment gateways. Stripe is the primary gateway, with Razorpay and SSLCommerz as alternatives. Configure at least one payment gateway for the system to function properly.

Deployment

Deploy your WorkShiftly application to production:

1

Prepare for Production

Update your .env.local with production Supabase credentials
Set BASE_URL and NEXT_PUBLIC_APP_URL to your production domain
Update payment gateway keys to production keys
Update webhook URLs in payment gateway dashboards
Ensure all database scripts have been run in production Supabase
Test all functionality in a staging environment

2

Deploy to Vercel (Recommended)

Push your code to GitHub
Go to vercel.com
Import your GitHub repository
Add environment variables in Vercel dashboard:
- All variables from your .env.local
- Make sure to use production values
Configure build settings (usually auto-detected)
Click "Deploy"

3

Alternative Deployment Options

Netlify: Similar to Vercel, good for static sites
Railway: Full-stack deployment platform
DigitalOcean App Platform: Container-based deployment
Self-hosted: Deploy on your own server with Docker or Node.js
AWS Amplify: AWS-based deployment

4

Post-Deployment Setup

Update admin credentials
Configure payment gateway webhooks with production URLs
Set up job categories and skills
Test the complete flow:
- Employer registration
- Package purchase
- Job posting
- Worker application
- Payment processing
Configure email notifications
Set up monitoring and error tracking

5

Production Environment Variables

# ============================================
# PRODUCTION CONFIGURATION
# ============================================
BASE_URL=https://yourdomain.com
APP_NAME=WorkShiftly

# Supabase (Production)
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_production_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_production_service_key

# Stripe (Production - Live Keys)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Razorpay (Production - Live Keys)
RAZORPAY_ID_KEY=rzp_live_...
RAZORPAY_SECRET_KEY=...
RAZORPAY_WEBHOOK_SECRET=...

# SSLCommerz (Production)
SSLCOMMERZ_STORE_ID=your_production_store_id
SSLCOMMERZ_STORE_PASSWORD=your_production_store_password

# Email (Production)
EMAIL_SERVICE=gmail
[email protected]
EMAIL_PASSWORD=your_production_app_password
[email protected]

Success! Your WorkShiftly application is now live and ready for employers and workers to start using!

Support

If you face any issues or need help with customization:

Email Support

For technical support or questions, please contact:

[email protected]

Common Issues & Solutions

1

Database Connection Issues

Verify Supabase URL and keys are correct in .env.local
Check that your Supabase project is active
Ensure RLS policies allow your operations

2

Payment Gateway Issues

Verify API keys are correct
Check webhook URLs are properly configured
Ensure BASE_URL is set correctly
For local testing, use ngrok for HTTPS

3

Build Errors

Clear node_modules and reinstall: rm -rf node_modules && npm install
Clear Next.js cache: rm -rf .next
Check TypeScript errors: npm run lint
Verify all environment variables are set

Response Time: We typically respond to support requests within 24-48 hours. For urgent matters, please include "[URGENT]" in your email subject.

Additional Resources

Next.js Documentation: nextjs.org/docs
Supabase Documentation: supabase.com/docs
Stripe Documentation: stripe.com/docs
Tailwind CSS: tailwindcss.com/docs

WorkShiftly Setup

WorkShiftly Installation Guide

Prerequisites

System Requirements

Accounts Required

Technical Knowledge

Hardware Requirements

Project Overview

Key Features

Technology Stack

Supabase Database Setup

What You Need Before Starting

Overview — What You Will Do

Create Your Supabase Account and Project — Takes about 2–3 minutes

Enable Required Database Extensions — Must be done before running any SQL files

Run roles.sql — Sets up database user roles and access permissions

Run schema.sql — Creates all tables, relationships, functions, and triggers

Install PostgreSQL on Your Computer — One-time setup only — skip if psql is already installed

Get Your Session Pooler Connection String — From the Connect button in your Supabase project

Run data.sql via Terminal — Sets up auth, storage buckets, admin account, and all essential data

Set Up Storage Bucket Policies — Allows the app to upload and read files correctly

Verify Setup and Collect API Keys — Confirm everything worked correctly

Set Up Webhooks (Optional) — Enable automatic notifications for shifts and withdrawals

💊 Troubleshooting — Solutions for Common Errors

📋 Quick Reference — Supabase Dashboard Navigation

.env Configuration

Create .env.local file

Add Supabase credentials

Add application settings

Add Payment Gateway credentials

Add Email Configuration (Optional)

Complete .env.local example

Database Scripts

Access SQL Editor

Run Core Database Scripts

Package System Setup

Enable Row Level Security

Create Admin User

Local Development

Clone or Navigate to Project

Install Dependencies

Configure Environment Variables

Start Development Server

Access the Application

Development Tools

Admin Setup

Create Admin User

Login to Admin Dashboard

Admin Dashboard Features

Change Default Credentials

Features Guide

Worker Management

Employer Management

Package System

Payment Gateway Integration

Shift Management

Analytics & Reporting

Payment Setup

Stripe Setup

Razorpay Setup (Optional)

SSLCommerz Setup (Optional)

Local Webhook Testing

Deployment

Prepare for Production

Deploy to Vercel (Recommended)

Alternative Deployment Options

Post-Deployment Setup

Production Environment Variables

Support

Email Support

Common Issues & Solutions

Database Connection Issues

Payment Gateway Issues

Build Errors

Additional Resources

Thank you for choosing WorkShiftly! 💼