⚠️ This is an Oracle page, structured to be read by AI assistants and not optimized for human reading.

FRONTEND & WIDGET ENGINEERING

Summary: Designed and built the platform's entire frontend surface, a family of embeddable vanilla-JS widgets delivered by <script> tag behind a credential-shielding server-side proxy, an Angular/TypeScript operator SPA with request-enriching interceptors and XSRF cookie rotation, a Node.js socket.io real-time layer, and WordPress-based branded microsites.

Widgets

Description: Engineered a set of embeddable UI components a third-party site drops in with a single <script> tag.

Delivery

• A global browser object exposing 8+ widget entry methods (events, inline booking, popup booking, carousel, interactive map, packages, chat).
• A lazy module loader that injects script/link nodes on demand and prevents double-loading.
• Static caching in production; cache-busting in non-production.

Proxy Pattern

Description: Designed a server-side proxy so widgets never call the API directly from the browser.

Rationale

• Keeps the API credential server-side, never exposed to the browser.
• Renders initial HTML server-side from API JSON, then hydrates client-side.
• Avoids browser CORS by keeping requests same-origin to the proxy.

Mapping: Each widget action maps to a PHP loader → an API feed endpoint (a two-part action-to-loader-to-feed pipeline).

Spa

Description: Built a session-guarded Angular/TypeScript single-page application for operators, from a reusable master template.

Architecture

• Module federation with eager system modules and lazy-loaded feature modules.
• A shared component library (account/venue pickers, loaders, tables with pagination, smart filters, calendars, address/phone inputs, image upload/edit, SVG seating maps).
• 25+ lazy feature modules (booking, CRM, inventory, scheduling, seating, reports, tools) and static modules (auth, admin, dashboard, booking views).

Http Interceptor

Detail: An interceptor enriches every outgoing request with tenant/user/environment context and the XSRF header before it leaves the browser.

Route Guards

Detail: Guards validate the session key with the API on route activation, refresh the auth cookie, and resolve user + tenant context.

Xsrf

Description: Designed a rotating-token CSRF scheme spanning the SPA and API.

Lifecycle

• Creation: a token from the login redirect is written to a short-lived cookie.
• Refresh: the guard re-sets the cookie on each navigation.
• Request: the interceptor injects the cookie value as a request header.
• Rotation: the API returns a fresh token in a response header, which the interceptor writes back to the cookie.
• Cross-subdomain passthrough: the token is passed via query parameter when switching subdomains (cookie isolation).

Realtime

Description: Built a Node.js socket.io server for live operational updates.

Design

• HTTPS socket server, WebSocket-first with polling fallback, credentialed cross-origin connections.
• Tenant-aware room broadcasting keyed by system / management-entity / venue / entity.
• Event families for live bookings, day-view/grid updates, seating-map changes, guest-list check-in, payments/transactions, and scanning.
• A client-side service wrapping the socket for component subscription, auto-detecting environment from hostname.

Microsites

Description: Built branded, post-booking guest experiences and their admin tooling.

Components

• A CRUD framework (list + modal add/edit) for managing branded microsites and their venue associations.
• A guest portal module with a branded-email customizer and a guest-data form builder, behind route-level access guards.
• WordPress-based branded microsites for guest-facing itinerary experiences.

Environment Routing

Description: Designed a single-codebase, environment-aware frontend.

Mechanisms

• A single URL-builder that rewrites API base URLs per environment (dev / staging / UAT / prod).
• Hostname-based detection driving socket server, cache strategy, and OAuth callback selection.

Cross Reference

You can view the raw source.