QRPage

Free QR code event page generator. Create beautiful, branded pages for events, funerals, weddings, conferences — and share via QR code.

---

Tech Stack

• Framework: Next.js 14 (App Router)
• Auth + Database: Supabase (PostgreSQL + Auth)
• File Storage: Cloudinary
• QR Generation: qrcode npm package
• Deployment: Vercel
• Styling: Tailwind CSS

---

Setup Guide

1. Install dependencies

npm install

2. Supabase Setup

1. Go to supabase.com and create a free project
2. Go to SQL Editor and run the entire contents of supabase-schema.sql
3. Run the latest migration: supabase-schema-phase5.sql (for template system)
4. Go to Authentication → Providers and enable Google (optional but recommended)
5. Copy your Project URL and anon key from Settings → API

3. Cloudinary Setup

1. Go to cloudinary.com and create a free account
2. Go to Settings → Upload → Upload Presets
3. Create a new unsigned upload preset named qrpage_unsigned
4. Set folder to qrpage
5. Copy your Cloud Name from the dashboard

4. Environment Variables

Copy .env.local.example to .env.local and fill in your values:

cp .env.local.example .env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

NEXT_PUBLIC_APP_URL=http://localhost:3000

5. Run locally

npm run dev

Visit http://localhost:3000

---

Deploy to Vercel

1. Push your project to GitHub
2. Go to vercel.com → New Project → Import your repo
3. Add all environment variables from .env.local (change NEXT_PUBLIC_APP_URL to your Vercel domain)
4. Deploy

After deploying, update Supabase → Authentication → URL Configuration:

• Site URL: https://yourapp.vercel.app
• Redirect URLs: https://yourapp.vercel.app/auth/callback

---

Project Structure

app/
  page.tsx                    → Marketing homepage
  auth/
    login/page.tsx            → Login
    signup/page.tsx           → Signup
    callback/route.ts         → OAuth callback handler
  dashboard/
    page.tsx                  → Projects list
    layout.tsx                → Dashboard layout with sidebar
    new/page.tsx              → Create new project
    [id]/
      edit/page.tsx           → Edit project
      qr/page.tsx             → View QR code
  p/
    [slug]/page.tsx           → Public QR landing page ← what people scan into
    demo/page.tsx             → Demo page

components/
  editor/
    ProjectEditor.tsx         → Main editor with live preview
    ColorPickerField.tsx      → Color picker input
    TemplatePicker.tsx        → Template selection UI
    TemplateSettings.tsx      → Per-template customization panel
  templates/
    index.ts                  → Template registry
    Classic.tsx               → Bold colors, centered (default)
    Elegant.tsx               → White background, serif typography
    Modern.tsx                → Split layout: image + content
    Bold.tsx                  → Full-bleed image background
    Minimal.tsx               → Ultra-clean, typography-focused
  public-page/
    PublicPagePreview.tsx     → Template router (renders correct template)
  qr/
    QRDisplay.tsx             → QR code + download + share
  ui/
    DashboardSidebar.tsx      → Nav sidebar
    DeleteProjectButton.tsx   → Delete with confirmation

lib/
  supabase/
    client.ts                 → Browser Supabase client
    server.ts                 → Server Supabase client
    middleware.ts             → Auth session middleware
  cloudinary.ts               → Upload utility
  slugify.ts                  → Slug generator
  types.ts                    → TypeScript types

---

Features

Phase 1 (complete)

• Email + Google auth (Supabase)
• Create / edit / delete projects
• Full color customization (bg, text, button)
• Cover image upload (Cloudinary)
• PDF or link resource attachment
• Live split-screen preview while editing
• Public branded landing page at /p/[slug]
• Smart resource detection (PDF opens in tab, links redirect)

Phase 2 (complete)

• QR code generation per project
• Download QR as PNG
• Copy shareable link
• Page view counter

Phase 3 (complete)

• Custom slug editing
• Project expiry dates
• Password-protected pages

Phase 4 (complete)

• 5 pre-built design templates (Classic, Elegant, Modern, Bold, Minimal)
• Extended styling controls (fonts, button styles, header sizes)
• Per-template customization (overlay opacity, dividers, visibility toggles)
• Live template preview in editor

---

Template System

QRPage comes with 5 professionally designed templates users can choose from in the editor:

Templates

Template	Description	Best For
Classic	Bold solid background, centered content, card image	Events, promotions, memorials
Elegant	White background, large serif headings, decorative line	Formal events, weddings, memorials
Modern	Split layout: image on left (40%), content on right	Modern events, product launches
Bold	Full-bleed image background with overlay, bottom text	High-impact visuals, announcements
Minimal	Ultra-clean typography, thin lines, maximum whitespace	Minimalist events, portfolios

Customization Options

Each template supports:

• Font: Sans-serif or Serif
• Button Style: Square or Rounded/Pill
• Visibility Toggles: Show/hide subtitle and description
• Header Size: Small, Medium, Large (Classic, Elegant, Minimal templates)
• Template-Specific: Overlay opacity (Bold), decorative divider (Elegant)
• Colors: Always customizable (background, text, button colors)

For Developers

Templates are stored in components/templates/ with:

• Each template is a reusable React component
• Settings are stored in template_settings JSONB column
• Registry in index.ts for easy addition of new templates
• Fully type-safe with TypeScript support

---

Cloudinary Upload Preset

Make sure your upload preset in Cloudinary is:

• Name: qrpage_unsigned
• Signing Mode: Unsigned
• Folder: qrpage
• Allowed formats: jpg, png, gif, webp, pdf, doc, docx

This is what the client-side upload uses. No server credentials are exposed.