Playground Work — Case Study

Playground · Static Lab

🔎 Overview

The Playground is my UI & UX lab inside the GetFood4Less ecosystem. It brings together microinteractions like Sevi Chat, Elastic Button, Theme Studio and Feedback Lab in a 100% static site that still feels like an app: modular JavaScript, CSS tokens, DOM-driven state and a simulated “backend” powered by localStorage.

01 · Architecture

Static by deploy, product by behavior

Even though everything ships as a static site, the architecture is modeled like a small product: each experiment is an isolated module, and a thin “Playground controller” wires all the events, metrics and theme changes together.

This keeps the codebase portable (can be reused in SaaS dashboards) and safe (no server dependency for demos, recruiters or offline reviews).

Front layer HTML without framework, design tokens via CSS variables and component-level classes (no global chaos).
Playground controller Single JS entry that registers listeners, dispatches custom events and keeps modules decoupled.
Micro-modules Sevi Chat, Elastic Button, Theme Studio and Feedback Lab live as small, focused scripts.
Future-proof The same architecture can plug into a Rails/Vite app or a Next.js dashboard without major refactors.

02 · Static “backend”

Logs & analytics with zero servers

For this case study I treat the browser as a mini data store. All Playground events are tracked in localStorage under the key playground:metrics and then rendered in the dashboard below.

When I’m ready to connect a real backend, the same events can be sent to a serverless endpoint using navigator.sendBeacon — without touching the UI layer.

Static analytics module (excerpt):

// assets/js/sevi-analytics.js
  
  const Metrics = (() => {
    const KEY = 'playground:metrics';
    const seed = {
      chat_cmds: 0,
      elastic_presses: 0,
      palettes: 0,
      feedback_success: 0,
      feedback_warn: 0,
      feedback_error: 0
    };
  
    const load = () => ({ ...seed, ...(JSON.parse(
      localStorage.getItem(KEY) || '{}'
    )) });
  
    const save = (data) =>
      localStorage.setItem(KEY, JSON.stringify(data));
  
    const inc = (key, n = 1) => {
      const data = load();
      data[key] = (data[key] || 0) + n;
      save(data);
      return data;
    };
  
    const beacon = (eventName, data) => {
      try {
        if (!window.PLAYGROUND_BEACON_URL) return;
        const payload = new Blob([JSON.stringify({
          event: eventName,
          data,
          ua: navigator.userAgent
        })], { type: 'application/json' });
  
        navigator.sendBeacon(window.PLAYGROUND_BEACON_URL, payload);
      } catch (_) {}
    };
  
    return { load, inc, beacon };
  })();

03 · Interaction Dashboard

Turning local metrics into a story

All interactions (chat commands, button presses, palette generations and feedback types) are counted in localStorage and rendered into a pure SVG chart. No chart library just custom layout and paths.

chat_cmds · Sevi Chat commands sent.
elastic_presses · Elastic button long-presses.
palettes · Theme Studio palette generations.
feedback_* · Success / warning / error events from Feedback Lab.

04 · Results & Learnings

What this Playground validates

Static site, product feel

A simple static deploy can still feel like a product when we invest in microinteractions, stateful components and metrics.

Design tokens in practice

Theme Studio proves that my Design System 2.0 tokens are not just theory: hues and gradients are generated and applied live.

Browser as a mini-backend

localStorage is enough for early-stage analytics, while still being ready for a real backend via sendBeacon.

Reusable patterns for GFL

The same architecture (events + metrics + SVG dashboards) can be dropped into GetFood4Less admin panels and store dashboards with minimal changes.

🎮 Playground Work