ActiveEvent Management / SaaS / Multi-Tenant Web Platform• Technical Overview

EventsPlug

Multi-Tenant Event Management SaaS with Embeddable Web Components

What it is

EventsPlug is a multi-tenant event management platform that allows organizers to create events, build custom registration forms, and drop a lightweight registration widget directly into any website. It runs as a framework-agnostic Web Component with zero external redirects and zero CSS style collisions.

Tech Stack

Frontend

Next.js 16 DashboardWeb Components (Shadow DOM)TypeScriptTailwind CSS

Backend

NestJS (Fastify)JWT RBACStripe WebhooksPrisma ORM

Database & Cache

PostgreSQL 16Prisma Client (Multi-Tenant)

DevOps & Tooling

Turborepo MonorepoDockerStripe Elements

System Architecture

System Architecture Sketch

Whiteboard architecture • Click any box to inspect

Tier 1: Embedding Hosts & Client Interfaces

Custom Element Injection

Tier 2: Backend Core & Multi-Tenant Security

REST & Webhooks

Tier 3: Payments & Multi-Tenant Persistence

Third-Party Host SitesHost Pages

Component Role

Organizer landing pages embedding the ticket checkout card directly on their primary domain with zero checkout redirects.

Core Engineering Highlight

Framework-Agnostic Shadow DOM Encapsulation

Embedding checkout widgets into any third-party website with 100% style isolation.

Third-party websites run vastly different CSS frameworks (Tailwind, Bootstrap, normalize resets). Traditional iframe embeds are heavy and break mobile keyboard interactions, while inline JavaScript widgets suffer from severe styling bleed. EventsPlug packages the registration widget as a native Custom Element with a closed Shadow Root, guaranteeing total visual isolation in and out of the host page.

How it works & Technical Depth:

Zero style collisions: Host website CSS resets never break buttons or input fields inside the widget.

Universal compatibility: Embeddable with a single `<script>` tag into React, Vue, Angular, WordPress, or plain HTML.

Boosts checkout conversion: Eliminates jarring redirects to third-party ticketing platforms, keeping users on-site.

Atomic concurrency locks: Prevents ticket overselling during sudden high-demand registration spikes.

widget/src/EventsPlugWidget.ts (Shadow DOM Encapsulation)typescript

export class EventsPlugWidget extends HTMLElement {
  private shadow: ShadowRoot;

  constructor() {
    super();
    // Attach closed shadow root to isolate styles completely from host website
    this.shadow = this.attachShadow({ mode: "closed" });
  }

  connectedCallback() {
    const eventId = this.getAttribute("event-id");
    const theme = this.getAttribute("theme") || "light";
    this.render(eventId, theme);
  }

  private render(eventId: string | null, theme: string) {
    this.shadow.innerHTML = `
      <style>
        :host { display: block; font-family: system-ui, sans-serif; box-sizing: border-box; }
        .widget-card { border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; background: #fff; }
        .btn-register { background: #7c3aed; color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: none; font-weight: 600; cursor: pointer; width: 100%; }
      </style>
      <div class="widget-card">
        <div id="form-container">Loading event registration...</div>
        <button class="btn-register" id="btn-submit">Register Now</button>
      </div>
    `;
  }
}

customElements.define("events-plug-widget", EventsPlugWidget);

Key Challenges & Trade-offs

Hurdle #1

Cross-Framework Styling Bleed on Host Sites

The Bottleneck:

Host sites running opinionated CSS resets (e.g. `* { margin: 0; box-sizing: border-box; }`) distorted widget form inputs and buttons.

The Engineered Solution:

Encapsulated the entire widget using native Web Components and Shadow DOM, completely isolating host page CSS rules.

Takeaway: Native browser Web Components are the cleanest primitive for embeddable SaaS widgets without iframe lag.

Hurdle #2

Multi-Tenant Data Boundary Protection

The Bottleneck:

Handling dynamic custom registration questions across multiple organizations required strict tenant isolation without excessive database connection overhead.

The Engineered Solution:

Enforced organization-scoped foreign key guards at the NestJS API layer paired with Prisma tenant middleware.

Takeaway: Strict software-level multi-tenancy scales gracefully without needing separate physical database instances for each tenant.

Back to all projects View project repository on GitHub