PassFlow
One event platform. One attendee identity. One QR across physical and digital experiences.
PassFlow adalah platform event berbasis web untuk organizer yang menggabungkan event website, registration, attendee management, QR credential, digital pass, access control, scanner, activities, benefits, analytics, dan design workflow dalam satu sistem multi-event.
Repository: palcchi/passflow
Status Project
Checkpoint: 28 September 2026
Full execution roadmap: docs/PASSFLOW_ROADMAP.md
PassFlow sudah melewati tahap prototype awal dan sekarang mempunyai foundation aplikasi, database, authentication, organizer workspace, event management, participant management, QR/access system, scanner, experience tools, profile system, serta Figma integration awal.
Fokus berikutnya bukan menambah halaman sebanyak mungkin, tetapi membuat workflow event terasa seperti satu produk yang utuh, terutama:
- menyederhanakan Customize Event;
- menjadikan Figma sebagai visual design source;
- membuat Figma integration benar-benar nyaman melalui plugin;
- memisahkan Draft / Preview / Publish;
- menambahkan event website berbasis custom subdomain;
- memperkuat scanner, access rules, lifecycle credential, dan live event operation.
Deployment policy
PassFlow tidak boleh membuat Vercel preview atau production deployment secara otomatis sebagai bagian dari pekerjaan biasa.
Workflow yang digunakan:
edit
→ group changes
→ review source
→ explicit approval to deploy
→ one intended deployment
Preview atau production deployment hanya dilakukan setelah ada instruksi eksplisit untuk deploy.
1. Product Model
PassFlow adalah multi-event platform.
Satu aplikasi dapat menangani banyak event:
PassFlow
├── Event A
├── Event B
├── Event C
└── ...
Setiap event memiliki data dan konfigurasi sendiri:
- event identity;
- attendee;
- ticket/pass category;
- QR credential;
- access zone;
- scanner station;
- activity;
- benefit;
- visual appearance;
- Figma design;
- public event website;
- logs dan analytics.
Data antar event harus tetap terisolasi melalui event_id, authorization, dan Row Level Security.
2. Current Technology
Frontend
- Next.js 16
- React 19.2
- TypeScript
- App Router
- Server Components + Client Components
- Tailwind CSS 4
- shadcn-style component foundation
- Motion
- Magic UI adaptations
- lucide-react
Backend
- Supabase PostgreSQL
- Supabase Auth
- Supabase Storage
- Supabase Row Level Security
- Server-side authorization
QR
Hosting & Source
- GitHub
- Vercel
passflow.my.id
3. Current Product Structure
Public
/
Main PassFlow homepage.
/e/[slug]
Published public event page.
/e/[slug]/claim
Attendee QR claim / digital pass flow.
/scan/[stationId]
Operational QR scanner.
Account
/login
/register
/forgot-password
/account
/profile
Current account system includes:
- email/password authentication;
- email verification flow;
- password recovery;
- optional Google OAuth support;
- organizer role resolution from memberships;
- profile name / username;
- avatar upload;
- Figma connection status.
User-facing application copy is intended to remain English-first.
Organizer Workspace
/admin
/admin/events/new
/admin/events/[eventId]
Event management navigation currently uses:
Overview
People
Access
Experience
Appearance
Design
Settings
Desktop uses a persistent workspace navigation model. Event-level navigation uses a floating rounded dock with an animated active pill.
Page navigation is designed to feel app-like:
- current content stays stable during navigation;
- active navigation bubble reacts immediately;
- incoming page content uses subtle slide-up + fade;
- avoid full-page loading flashes.
4. Current Event Features
Overview
Organizer can work with real managed events from Supabase.
Event data includes:
- name;
- slug;
- description;
- venue;
- start / end date;
- status;
- capacity;
- attendee count;
- checked-in count;
- theme;
- QR configuration;
- logo;
- hero image;
- poster.
Published events are separated from organizer-managed drafts.
People
Current People tools include:
- ticket/pass categories;
- attendee records;
- attendee search;
- attendee creation;
- CSV import flow;
- crew/event members;
- participant photos;
- attendee profile images from private storage.
Participant avatars are also surfaced in organizer event cards as compact presence previews.
Attendee photos use signed URLs from the private attendee-photos storage bucket rather than exposing private storage paths directly.
Access
PassFlow supports two credential assignment strategies:
Automatic
Registration
→ credential created/assigned
→ digital credential available
Best for:
- digital pass;
- named ID card;
- attendee-specific credential.
Claim
Registration
→ attendee receives physical credential
→ attendee scans QR
→ QR bound to attendee
Best for:
- wristbands;
- pre-printed QR credentials;
- on-site credential distribution.
Current Access workspace includes:
- QR credential batches;
- active / unclaimed / revoked states;
- revoke flow;
- printable QR batch route;
- access zones;
- ticket-based access rules;
- scanner stations;
- station activation / standby state.
Scanner modes:
CHECK_IN
ZONE_ACCESS
ACTIVITY
CLAIM
5. QR Identity Model
PassFlow treats the QR as a credential, not merely a picture.
Core principle:
One credential can be represented physically and digitally without creating two attendee identities.
Example:
ATTENDEE
│
└── ACTIVE QR CREDENTIAL
├── physical wristband
└── digital pass
Important rules:
- one QR must not have multiple active owners;
- revoked QR must fail validation;
- replaced credentials remain in history;
- access decisions are validated server-side;
- scanner must not trust frontend state;
- duplicate processing must be prevented.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
