LIVEDAB
Campaign Filter & CRM Platform
The Challenge
Event organizers and brands faced a complex problem: how to maximize campaign reach while simultaneously collecting and managing valuable audience data. Traditional solutions required:
- • Multiple disconnected tools - Photo overlay generators separate from CRM systems
- • Manual data entry - Copying contact information between platforms
- • Limited customization - Rigid field structures that don't match business needs
- • Poor event tracking - No integrated way to manage participants, schedules, and tasks
- • Scattered analytics - Campaign performance data isolated from CRM insights
- • Complex access control - Difficulty managing team permissions across features
The challenge was to build a unified platform that seamlessly combines engaging visual campaigns with comprehensive CRM capabilities, all while maintaining enterprise-grade architecture and multi-tenant isolation.
The Solution
LIVEDAB is a full-stack SaaS platform that unifies visual campaign management with a powerful CRM system. Built with Clean Architecture principles, it enables teams to create interactive photo filter campaigns while automatically capturing and managing user data in a flexible, customizable CRM.
Platform Overview
Core Features
Campaign Management
Create branded photo filter campaigns with custom overlays, placeholders, and effects. Support for multiple campaign types including image server rendering, client-side processing, and video generation. Built-in analytics track views, uses, and conversion rates.
- • Visual filter/frame designer
- • Multi-version A/B testing
- • Password-protected campaigns
- • Custom branding & placeholders
- • Real-time analytics dashboard
Flexible CRM System
Dynamic custom field system that allows teams to define their own data structures. Manage contacts and companies with fully customizable field definitions, validation rules, and entity types - no code changes required.
- • Dynamic custom fields (text, email, phone, select, etc.)
- • Contact types & legal entity types
- • Company-contact associations
- • Campaign-contact linking
- • Wildcard indexing for fast search
Event Management
Comprehensive event planning with stages, schedules, participants, and tasks. Track contact participation with roles and status, manage company sponsorships, and organize detailed agendas with schedule items.
- • Multi-stage event organization
- • Participant tracking with roles
- • Task management with deadlines
- • Schedule items & agendas
- • Company event associations
Gallery Streams
Create public photo galleries with moderation workflow. Batch import from campaigns, moderate submissions through pending → moderated → published states, and display curated galleries with real-time updates via Mercure.
- • Three-stage moderation workflow
- • Campaign integration
- • Real-time updates
- • Public gallery pages
- • Uploader tracking
Public Forms
Create shareable data collection forms linked to contact types for automatic field generation. Capture leads and registrations with custom validation rules and optional company pre-fill.
- • Auto-generated from contact types
- • Custom validation rules
- • Company pre-fill option
- • Public shareable URLs
- • Direct CRM integration
Multi-Tenancy & Permissions
Team-based access control with role-based permissions using CASL. Complete data isolation between teams with support for multiple team memberships and granular permission management.
- • 6-level role hierarchy (Super Admin → Viewer)
- • CASL ability-based authorization
- • Team invitations with tokens
- • Per-team feature flags
- • Audit trail via event logs
Technical Architecture
Built with Clean Architecture principles, featuring clear separation of concerns across domain, application, infrastructure, and presentation layers. This ensures maintainability, testability, and scalability for enterprise deployments.
Architecture Patterns
- • Use Case Pattern - Single-responsibility business logic
- • Repository Pattern - Data access abstraction
- • DTO Pattern - Type-safe data transfer
- • Dependency Injection - Loose coupling
Key Features
- • Multi-tenant isolation - Complete data separation
- • Role-based permissions - Granular access control
- • Real-time updates - Server-Sent Events
- • Dynamic schemas - Flexible custom fields
Tech Stack
Frontend
- • Next.js - React framework
- • TypeScript - Type safety
- • Tailwind CSS - Styling
- • shadcn/ui - UI components
State & Data
- • TanStack Query - Server state
- • React Hook Form - Forms
- • Zod - Validation
Backend
- • MongoDB - Database
- • Auth0 - Authentication
- • AWS - Cloud services
User Journey: Campaign to CRM
User visits campaign URL and views branded photo filter campaign
Session created to track user journey and interactions
User uploads photo which is stored securely in cloud storage
User fills custom form fields (email, phone, etc.)
Filter applied to photo and result image generated
Analytics events tracked for campaign performance metrics
Contact automatically created in CRM with campaign association
Team can manage contact, add to events, and track engagement
Results & Impact
LIVEDAB eliminates the need for multiple disconnected tools by providing a unified platform where visual campaigns seamlessly integrate with comprehensive CRM functionality. Teams can create engaging photo filter experiences while automatically capturing structured data, all within a single system with proper multi-tenant isolation and enterprise-grade architecture.
The clean architecture approach ensures maintainability and testability, while the dynamic custom field system provides the flexibility of no-code solutions without sacrificing type safety or performance.
Real-World Use Case: Embeddable Widget
Realtime Gallery Widget
Built a self-contained, embeddable JavaScript widget that displays real-time gallery streams from LIVEDAB campaigns. Deployable on any website with a single line of code, demonstrating the platform's extensibility beyond the core application.
Technical Highlights
- • Shadow DOM Isolation - Complete style encapsulation prevents CSS conflicts
- • Mercure Integration - Real-time SSE updates for instant new image display
- • TanStack Query - Optimistic updates and intelligent caching
- • Framer Motion - Smooth entrance animations for new items
- • Responsive Grid - 1-4 columns adapting to screen size
- • IIFE Bundle - Single-file deployment with inlined styles
Integration
Embed on any website with two lines of code:
Auto-initializes, polls for updates (configurable), and handles multiple widgets per page.
Widget Architecture
- • React 19
- • Vite build system
- • Tailwind CSS 4
- • TypeScript
- • Mercure Hub SSE
- • Custom EventSource hooks
- • Event ordering logic
- • Delta event handling
- • Chrome 53+
- • Firefox 63+
- • Safari 10+
- • Edge 79+
Key Features
Scans DOM for elements with livedab-stream-id attribute and initializes widgets automatically
Adjustable polling interval (default 5s) or disable for one-time fetch via data-polling-interval
Beautiful entrance animations using Framer Motion for newly added gallery items
Masonry-style grid adapts from 1 to 4 columns based on viewport width
Shadow DOM ensures zero CSS conflicts with host page styles
Support for multiple gallery widgets on a single page with independent streams
📊 Impact & Results
The widget enables event organizers and brands to display their LIVEDAB gallery streams anywhere on the web - event websites, landing pages, or promotional sites - with minimal technical overhead and maximum reliability.
Key Learnings
- • Clean Architecture pays dividends - Proper separation of concerns makes scaling and maintenance significantly easier
- • Design patterns matter at scale - Consistent patterns across the codebase reduce cognitive load and bugs
- • Dynamic schemas require careful planning - Flexibility must be balanced with type safety and performance
- • Multi-tenancy must be fundamental - Data isolation at the core prevents security issues and simplifies logic
- • Real-time features enhance UX - Instant updates create more engaging user experiences
- • Authorization is complex - Role-based permissions require careful planning for team-scoped resources
- • Widget isolation is crucial - Embeddable components need complete style isolation to work anywhere