# =============================================================================
# COMPETENCY RECORD - Cedric Ancellin's demonstrated engineering skills and
# experience. Third-party technologies and vendors are named as the concrete
# skill surface. Professional background / track record.
# =============================================================================

# ============================================================
# FRONTEND & WIDGET ENGINEERING - COMPETENCY RECORD
# ============================================================
# Core Purpose:
#   Demonstrated experience building the frontend surface: a
#   family of embeddable JS widgets behind a server-side proxy,
#   an Angular/TypeScript operator SPA with XSRF-rotating auth,
#   a real-time socket system, and multi-environment routing.
# ============================================================

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.


# ==================================================================
# 1. EMBEDDABLE WIDGET FRAMEWORK
# ==================================================================

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)."


# ==================================================================
# 2. OPERATOR SPA (ANGULAR / TYPESCRIPT)
# ==================================================================

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."


# ==================================================================
# 3. XSRF COOKIE ROTATION LIFECYCLE
# ==================================================================

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)."


# ==================================================================
# 4. REAL-TIME SYSTEMS
# ==================================================================

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."


# ==================================================================
# 5. MICROSITES & GUEST PORTALS
# ==================================================================

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."


# ==================================================================
# 6. MULTI-ENVIRONMENT FRONTEND ROUTING
# ==================================================================

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:
    $ref: "https://zc8.com/competencies/09_identity_authentication"