Feature Catalog

Comprehensive inventory of all features implemented in the Frameingo photobooth system.

Table of Contents

• User-Facing Features (Web App)
  • Core Photobooth Workflow
  • Advanced Features
  • Settings & Configuration
  • Providers (State Management)
• Admin Panel Features
• Backend API Features
  • Payments (Xendit Integration)
  • Subscriptions
  • License Management
  • Customers
  • Photos
  • Sharing/Download
  • Entitlements
• External Integrations
• Project Structure

---

User-Facing Features (Web App)

Core Photobooth Workflow

Step	Route	Feature	Description
1	/	Home Screen	Landing page with session start button
2	/frame-selection	Frame Selection	Choose from preset photo frame layouts (1-4 photos)
3	/image-selection	Image Selection	Choose between camera capture or gallery upload
4	/image-upload	Image Upload	Capture via camera or select from gallery
5	/image-editing	Image Editing	Drag-and-drop reordering, retake photos, brightness adjustment
6	/customization	Customization	Admin settings for frame, text, colors, buttons, printer, voucher
7	/image-final	Final Preview	View collaged result, print, download QR
8	/offline	Offline Page	Displayed when network unavailable

Code Reference: apps/web/routes/ and apps/web/pages/

Advanced Features

Feature	Description	Code Reference
Visual Frame Editor	Customize frames with layers, text, borders	features/customization/editor/
Frame Presets	Save/load frame customization presets (stored in IndexedDB/localStorage)	lib/frame-presets.ts
Page Presets	Save/load full page settings presets	lib/page-presets.ts
Customization Presets	Save/load complete customization settings	lib/customization-presets.ts
Image Compression	Auto-compress images before printing (max 800x800, 500KB)	lib/image-compression.ts
Dithering Filter	Atkinson dithering for thermal printer output	domain/image-processing/dithering.ts
QR Code Generation	Generate download QR codes (server-side rendering)	services/api/sharing/controller.ts
Photo Download	Signed URLs with expiry for secure photo download	services/api/sharing/download-signing.ts
Offline Mode	PWA with service worker, offline page	public/sw.js, routes/offline.tsx
Auto-Print	Automatically print when reaching final screen (if enabled)	providers/printer-provider.tsx
Brightness Adjustment	Slider to adjust image brightness before printing	features/image-editing/

Settings & Configuration

Feature	Description	Code Reference
Page Settings	Background, title, subtitle customization	providers/settings-provider.tsx
Frame Settings	Header/footer text, border, background	features/customization/
Button Settings	Button text, colors, font size, border radius	features/customization/
Printer Settings	Enable/disable, default copies, paper size	hooks/use-printer-settings.ts
Voucher Settings	Enable/disable, passcode configuration	providers/voucher-provider.tsx
Security Settings	Admin PIN change, lock icon visibility	hooks/use-security-settings.ts
Language Settings	i18n/locale configuration	providers/language-provider.tsx

Providers (State Management)

Provider	Purpose	File
PrinterProvider	Bluetooth/ESCPOS printing	providers/printer-provider.tsx
LicenseProvider	License key verification	providers/license-provider.tsx
VoucherProvider	QR voucher passcode verification	providers/voucher-provider.tsx
LanguageProvider	Internationalization	providers/language-provider.tsx
SettingsProvider	App preferences persistence	providers/settings-provider.tsx
CollageProvider	Frame/image state, final image generation	providers/collage-provider.tsx

---

Admin Panel Features

Customer Management

Feature	Description	API Endpoint
View all customers	List paginated customer accounts	GET /v1/admin/customers
Customer details	View individual customer info	GET /v1/admin/customers/:id
License regeneration	Generate new license key for customer	POST /v1/admin/customers/:customerId/regenerate-license

Code Reference: services/api/admin/controller.ts - createAdminCustomersController()

Subscription Management

Feature	Description	API Endpoint
View all subscriptions	List all subscriptions with customer info	GET /v1/admin/subscriptions
Subscription details	View individual subscription	GET /v1/admin/subscriptions/:id
Cancel subscription	Cancel active subscription	(via customer-facing endpoint)
Resume subscription	Resume paused subscription	(via customer-facing endpoint)

Code Reference: services/api/admin/controller.ts - createAdminSubscriptionsController()

Payment History

Feature	Description	API Endpoint
View all payments	List all payments with customer info	GET /v1/admin/payments
Payment details	View individual payment	GET /v1/admin/payments/:id
Process refund	Refund a payment	POST /v1/payments/:id/refund

Code Reference: services/api/admin/controller.ts - createAdminPaymentsController()

---

Backend API Features

Base URL Structure

• Local development: http://localhost:8787
• Staging: Cloudflare Workers endpoint
• All v1 endpoints prefixed with /api/v1

Payments (Xendit Integration)

Method	Endpoint	Function	Description
POST	/v1/payments/create	Create payment	Create Xendit QRIS payment
GET	/v1/payments/status/:id	Get payment status	Poll for payment completion
POST	/v1/payments/webhook	Handle webhook	Xendit payment confirmation
POST	/v1/payments/subscription-webhook	Subscription webhook	Handle subscription events
POST	/v1/payments/:id/refund	Refund payment	Process refund via Xendit

Code Reference: services/api/payments/

Subscriptions

Method	Endpoint	Function	Description
GET	/v1/subscriptions/:id	Get subscription	Get subscription details
GET	/v1/subscriptions/customer/:id	Customer subscriptions	List customer's subscriptions
POST	/v1/subscriptions/:id/cancel	Cancel	Cancel subscription
POST	/v1/subscriptions/:id/resume	Resume	Resume paused subscription
POST	/v1/subscriptions/:id/renew	Renew	Create renewal payment

Code Reference: services/api/subscriptions/

License Management

Method	Endpoint	Function	Description
GET	/v1/license/verify/:key	Verify license	Verify license key validity
GET	/v1/license/customer/:id	Get by customer	Get customer's license info

Code Reference: services/api/license/

Customers

Method	Endpoint	Function	Description
POST	/v1/customers	Create	Register new customer
GET	/v1/customers/me	Current session	Get current customer
GET	/v1/customers/:id	Get by ID	Get customer details

Code Reference: services/api/customers/

Photos

Method	Endpoint	Function	Description
POST	/v1/photos	Create	Create photo record
GET	/v1/photos/:id	Get	Retrieve photo metadata

Code Reference: services/api/photos/

Sharing/Download

Method	Endpoint	Function	Description
POST	/v1/upload	Upload photo	Upload base64-encoded photo
GET	/v1/download/:photoId	Get download URL	Get signed download URL
GET	/v1/download/:photoId/file	Download file	Direct file download (signed)
POST	/v1/qr/generate	Generate QR	Generate QR code for download URL

Code Reference: services/api/sharing/

Entitlements

Feature	Description	Code Reference
Grant perpetual entitlement	One-time purchase license	entitlements/use-cases/grant-perpetual-entitlement.ts
Grant recurring entitlement	Subscription-based access	entitlements/use-cases/grant-recurring-entitlement.ts
Revoke entitlement	Remove customer access	entitlements/use-cases/revoke-entitlement.ts
Resolve active entitlement	Check if customer has valid access	entitlements/use-cases/resolve-active-entitlement.ts

---

External Integrations

Service	Purpose	Code Reference
Xendit	Payment processing, QRIS, webhooks	services/api/outbound/xendit/
Cloudflare D1	SQLite database	services/api/core/db/
Cloudflare R2	Photo file storage	services/api/outbound/photo-storage.ts
OpenTelemetry	Observability/tracing	services/api/core/middleware/otel-trace.ts
Niimbluelib	Bluetooth printer driver (Web)	hooks/use-native-printer.ts
Web Bluetooth API	Browser Bluetooth for printing	Platform-specific

---

Project Structure

frameingo-project/
├── apps/
│   ├── web/                    # React + Vite photobooth UI
│   │   ├── pages/              # 9 page components
│   │   ├── routes/             # TanStack Router route definitions
│   │   ├── providers/          # 6 React context providers
│   │   ├── features/
│   │   │   ├── image-editing/  # Edit mode, preview, sortable items
│   │   │   ├── frame-selection/
│   │   │   ├── customization/  # Editor, hooks, schemas, types
│   │   │   └── printing/       # Native printer bridge
│   │   ├── hooks/              # 14+ custom React hooks
│   │   ├── lib/                # Utilities, presets, validation
│   │   ├── domain/             # Image processing (crop, dithering)
│   │   └── client.tsx          # App entry point
│   └── internal/               # Internal admin panel (scaffolded)
├── services/
│   └── api/                    # Hono/Cloudflare Workers backend
│       ├── payments/           # Xendit integration, webhooks
│       ├── subscriptions/      # Subscription lifecycle
│       ├── license/            # License verification
│       ├── customers/          # Customer management
│       ├── photos/             # Photo records
│       ├── sharing/           # Upload, download signing, QR
│       ├── entitlements/       # Access control logic
│       ├── admin/              # Admin panel API
│       └── outbound/           # Xendit client, photo storage
└── packages/
    └── shared/                 # Shared TypeScript (bridge interface)

---

Technology Stack

Layer	Technology
Frontend	React 18, Vite, TailwindCSS, TanStack (Query + Router)
Backend	Hono, Cloudflare Workers, Drizzle ORM
Database	Cloudflare D1 (SQLite)
Storage	Cloudflare R2
Payments	Xendit (QRIS)
Printing	Bluetooth ESCPOS via @mmote/niimbluelib
Mobile	Capacitor (Android WebView)
Container	Bun

---

Feature Status Summary

Feature Area	Status	Notes
Photobooth workflow	✅ Complete	All routes implemented
Frame customization	✅ Complete	Visual editor + presets
Bluetooth printing	✅ Complete	Web Bluetooth + native bridge
Payment integration	✅ Complete	Xendit webhooks
Subscription management	✅ Complete	Full lifecycle
License verification	✅ Complete	One-time + recurring
Photo upload/download	✅ Complete	Base64 + signed URLs
QR code generation	✅ Complete	Server-side rendering
Offline PWA	✅ Complete	Service worker + offline page
Voucher system	✅ Complete	Passcode-based access
Admin panel	✅ Complete	Customers, subscriptions, payments
Android app	✅ Complete	WebView + native bridge