MISSION 001LIVEAVRLabs · Ongoing

Artabia

DIGITAL ART · 3D · AR / XR · AI

Full-stack digital art platform built with React and Node.js, including virtual galleries, 3D/AR experiences, digital asset management and AI-powered features.

An AVR Labs product. Prince works on it as a full-stack developer at AVRLabs.

ROLE
Full-stack development across the React frontend, the Node.js backend, the 3D/AR gallery experiences and AI-powered features.
STACK
React · Node.js · Unity WebGL · WebXR · webxr-polyfill · Brotli
OUTCOME
Live at artabia.com. Six themed virtual galleries — Museum, Japanese, Circle, Arabic, Digital, Earth — patched to boot with or without native WebXR.

01BRIEFING

Artabia helps artists create and showcase their art with AR and VR: virtual galleries, 3D/AR experiences and digital asset management in the browser.

02OBJECTIVE

Put an artist’s work into spaces people can walk through — a themed 3D gallery, or their own room in AR — directly from a web page.

03ROLE

  • Full-stack development across the React frontend, the Node.js backend, the 3D/AR gallery experiences and AI-powered features.
  • Diagnosed and fixed a WebXR boot-order race across the Unity WebGL gallery builds.
  • Audited the marketing site’s SEO and rendering, and wrote the prioritised remediation plan.
  • Built a Python (Flask + OpenCV) artwork-detection service: orientation correction, text-region masking and contour-based artwork detection.VERIFYUnverified — only in: Artwork detection service (Python)

04TECHNOLOGY

  • React
  • Node.js
  • Unity WebGL
  • WebXR
  • webxr-polyfill
  • Brotli

MENTIONED IN OLDER RESUMES · VERIFY

  • Three.js
  • IPFS
  • NFT minting pipeline
  • Next.js SSR
  • PostgreSQL
  • Redis
  • Stripe
  • JWT + RBAC
  • Vercel
  • Python / Flask / OpenCV

FRONTENDBACKEND3D / WEBGLAR / VR / XRAICREATIVE TECHNOLOGY

05ARCHITECTURE

  1. WEB CLIENT

    • React app
    • Artist dashboard
    • AR viewer · “View it in your space”
  2. 3D GALLERIES

    • Unity WebGL builds × 6 themes
    • WebXR manager
    • webxr-polyfill fallback
  3. SERVICES

    • Node.js backend
    • Digital asset management
    • AI-powered features
  4. DELIVERY

    • Brotli-compressed framework builds
    • Per-gallery build artefacts
  5. UNVERIFIEDVERIFYUnverified

    • IPFS
    • NFT minting pipeline
FIG · ARTABIA — SYSTEM LAYERS
  • Each gallery is its own Unity WebGL build with a WebXR bridge exposing AR, VR, hit-testing and haptics to the page.

06CHALLENGE

  • Some devices stalled before a gallery finished loading. Browsers without native WebXR load a webxr-polyfill; if Unity finished booting first, its _InitXRSharedArray hook called Module.WebXR.onUnityLoaded before the WebXR manager had attached — there was nothing to call.
  • Separately, the marketing site’s content pages were invisible to search. Crawlers received a “enable JavaScript” fallback page, and every content page declared the homepage as its canonical URL — explicitly asking Google to treat the blog as duplicates.

07SOLUTION

  • Made the order of events stop mattering. If the manager isn’t there yet, Unity now parks the Ready event, reports no AR/VR capability and keeps booting. When the manager attaches, it replays the parked event, so capability detection still reaches the page.
  • Shipped it as a guarded Node.js script, not hand edits: decompress each brotli build, require exactly one match per patch site, syntax-check the result with new Function before writing, back up the original, recompress at quality 11 — then read the file back and compare it to prove the round trip.
  • For search, traced six findings to one root cause — no per-route server rendering — and recommended prerendering or SSR for every public route with self-referencing canonicals, resolving four findings with one change.

08RESULT

  • One idempotent script patches all seven gallery builds; re-running it reports “already patched” instead of applying twice.
  • A prioritised SEO remediation plan that also states what the audit could not check.
  • [MEASURED IMPACT AFTER DEPLOYMENT REQUIRED]

09EXPERIENCE

10REFLECTION

Engine–browser boundaries fail silently. The fix wasn’t clever code; it was making the sequence of events irrelevant — and proving the patch before trusting it.VERIFYUnverified — only in: Drafted copy — confirm voice

TECHNICAL LAYERWhy this stack · trade-offs · performance · implementation

WHY THIS STACK

  • The galleries are Unity WebGL builds with a WebXR bridge, so the same scene runs as a normal 3D page or enters AR/VR where the device supports it.

TRADE-OFFS

  • Patching the compiled framework file instead of rebuilding seven Unity projects: fast and reversible (backups are kept), at the cost of needing an exact-match, self-verifying script.
  • Prerendering vs. moving to an SSR framework for the marketing site: both fix the root cause; prerendering is the smaller change, SSR the more durable one.

PERFORMANCE

  • Builds are served brotli-compressed; the patch recompresses at maximum quality so the fix ships at the same compression level as the original.

IMPLEMENTATION

  • Guards, in order: skip if already patched → exactly one match per site → syntax gate → backup → write → read back and compare.