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.
- LINKS
- artabia.com ↗
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.VERIFY — Unverified — 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
FRONTEND →BACKEND →3D / WEBGL →AR / VR / XR →AI →CREATIVE TECHNOLOGY →
05ARCHITECTURE
WEB CLIENT
- React app
- Artist dashboard
- AR viewer · “View it in your space”
3D GALLERIES
- Unity WebGL builds × 6 themes
- WebXR manager
- webxr-polyfill fallback
SERVICES
- Node.js backend
- Digital asset management
- AI-powered features
DELIVERY
- Brotli-compressed framework builds
- Per-gallery build artefacts
UNVERIFIEDVERIFY — Unverified
- IPFS
- NFT minting pipeline
- 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.VERIFY — Unverified — 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.