The Vision: Fast, Expressive Websites Without Code

Traditional website builders often suffer from a common dilemma: they are either simple but produce rigid, cookie-cutter sites, or they offer deep customization at the expense of overwhelming complexity and sluggish runtime performance.

When we conceptualized TechSparks Sites (builder.techsparks.co), our mission was straightforward: allow creators, agencies, and businesses to publish stunning, animation-first websites in minutes, complete with free HTTPS subdomains and fluid micro-interactions.

Here is the architectural story of how we engineered the platform from the ground up.

1. Decoupled Multi-Service Architecture

To ensure security, operational isolation, and independent deployability, the platform is architected across three core layers:

1
Frontend Builder (`builder.techsparks.co`): Next.js App Router application delivering the guided setup wizard, real-time live editor, theme showcase, and Card Studio.
2
Backend API & Microservices: High-throughput Node.js & Express service handling authentication, MongoDB persistence, Cloudinary asset signing, and rate limiting.
3
**Wildcard Host Resolver (*.techsparks.co):** Multi-tenant host-rewriting middleware that serves custom published user sites instantly with edge caching.

2. The Editor Sandbox: Secure Iframe Communication

One of the hardest challenges in building an online site builder is rendering user-edited content safely without causing style collisions or main-thread freezes in the editor chrome.

Why Iframes?

If the editor and the rendered preview live in the exact same DOM tree:

  • CSS frameworks and custom user styles can easily leak into the builder UI.
  • Heavy scroll animations or WebGL canvas renders can lag editor controls.
  • Running third-party custom scripts exposes authentication cookies.

    • Typed postMessage Protocol

    We solved this by rendering preview sites inside an isolated, sandboxed <iframe>. The parent builder window communicates with the preview canvas using a strongly typed bidirectional messaging protocol:

    ts
    // Shared message contract between Builder and Preview Frame
export type BuilderMessage =
  | { type: 'THEME_UPDATE'; payload: { themeId: string; mode: 'light' | 'dark' } }
  | { type: 'CONTENT_PATCH'; payload: { sectionId: string; field: string; value: unknown } }
  | { type: 'VIEWPORT_RESIZE'; payload: { width: number; device: 'mobile' | 'tablet' | 'desktop' } };

// Parent dispatch
function dispatchPreviewUpdate(msg: BuilderMessage) {
  const frame = document.getElementById('preview-frame') as HTMLIFrameElement;
  frame?.contentWindow?.postMessage(msg, 'https://builder.techsparks.co');
}

    Inside the preview iframe, a tiny runtime listener receives the payload and applies React state updates without a full page reload, enabling buttery-smooth 60fps live editing.

    3. High-Performance Theme Engine

    Rather than storing unstructured raw HTML blobs, TechSparks Sites structures websites into modular, deterministic JSON schemas. Each theme defines:

  • Design Tokens: Primary colors, secondary accent palettes, typography scales, and border radius variables.
  • Layout Sections: Hero, Feature Grid, Showcase Carousel, Testimonials, Pricing, and Contact CTA.
  • Animation Presets: Entrance animations powered by Framer Motion, smooth scroll triggers, and optional Three.js particles.

    • By storing websites as structured JSON rather than raw HTML:

  • We can upgrade themes globally without breaking user content.
  • We generate clean, accessible, semantic HTML that search engine crawlers love.
  • Exported sites are lightweight, loading in under 400ms.

    • 4. Edge Routing for Wildcard Domains (name.techsparks.co)

    When a user publishes their project to portfolio.techsparks.co, the request is intercepted at the Vercel Edge Middleware. The middleware extracts the subdomain hostname, queries the edge cache for the compiled site data, and rewrites the request internally:

    ts
    // Next.js Edge Middleware hostname extraction
export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const hostname = req.headers.get('host') || '';
  
  // Exclude primary domains
  if (hostname === 'builder.techsparks.co' || hostname === 'techsparks.co') {
    return NextResponse.next();
  }
  
  // Extract custom user site subdomain
  const subdomain = hostname.split('.')[0];
  url.pathname = `/s/${subdomain}${url.pathname}`;
  return NextResponse.rewrite(url);
}

    Looking Forward

    Building a modern SaaS requires thinking holistically about security, developer ergonomics, and user delight. By investing in typed contracts, iframe sandboxing, and edge-first routing, TechSparks Sites delivers an expressive creative platform without sacrificing speed.