Spatial Showcase Engine

Unlock a futuristic XR dimension where ideas materialize, environments respond, and technology amplifies creativity. The next evolution of spatial showcasing.

Comment

Spatial Showcase Engine

Inspiration

Traditional portfolios are flat and fail to capture the immersive essence of creative work. We envisioned a future where artists and creators could showcase their work in the same 3D space where it was conceived—virtual reality. Inspired by Meta's vision of the metaverse, we set out to transform portfolio presentation from passive viewing into an interactive journey through virtual galleries, democratizing VR portfolio creation for creators without 3D modeling expertise.

What it does

Spatial Showcase Engine is a revolutionary WebXR platform that transforms traditional portfolios into immersive 3D VR experiences. Creators upload work through an intuitive React admin panel and instantly see their portfolio come to life in customizable VR galleries. Users walk through portfolios in VR, interact with panels displaying images and videos, and navigate between project "rooms." Share links with QR codes enable instant public access, while analytics track engagement. The system supports multiple templates, color customization, and seamless media management—all code-free.

How we built it

We architected Spatial Showcase as a full-stack monorepo leveraging cutting-edge WebXR technology. The VR experience is powered by Meta IW SDK 0.2.0 with native Quest 3 support, Three.js for 3D graphics, and UIKitML for declarative UI panels. The backend features Express.js with PostgreSQL, JWT authentication, and Vercel Blob storage. The admin panel uses React 19, TypeScript, and TanStack Query. We implemented an Entity Component System architecture and viewport-aware panel sizing algorithms for optimal VR viewing. Deployment uses Vercel serverless functions, Neon Postgres, and CDN-optimized media delivery—all production-ready with comprehensive error handling and security.

Challenges we ran into

Our biggest challenge was bridging UIKitML's declarative UI system with dynamic content binding. UIKitML elements don't behave like standard DOM elements, requiring a multi-method approach using setProperties, textContent, innerText, and innerHTML in parallel. Asynchronous UI rendering in VR proved complex—panels needed full initialization before content binding, requiring requestAnimationFrame retry loops and staggered entity creation to prevent WebGL issues. We developed custom algorithms for viewport-aware sizing based on camera distance and field of view. Database migration to Neon Postgres required careful SSL configuration, and file storage migration to Vercel Blob necessitated refactoring upload handlers for both buffer and disk-based patterns.

Accomplishments that we're proud of

We created a fully functional, production-ready VR portfolio platform working seamlessly across environments. The system handles dynamic content loading, responsive panel sizing, and multi-level scene navigation while maintaining 60fps performance. Our admin panel provides a polished CMS with drag-and-drop uploads and real-time previews. The share link system with QR codes enables instant portfolio sharing. We achieved zero-downtime Vercel deployment, comprehensive error handling, and a scalable architecture supporting unlimited portfolios. The codebase is well-documented, type-safe, and follows best practices.

What we learned

This project taught us WebXR development intricacies—from Meta IW SDK's Entity Component System to spatial UI design principles. VR UI requires fundamentally different approaches than traditional web interfaces, with considerations for depth, scale, and user comfort. We gained deep serverless architecture experience, optimizing Express.js for Vercel's serverless functions and handling file uploads in stateless environments. Most importantly, we learned that accessible VR experiences require careful attention to performance, UX, and immersive computing constraints—every design decision must consider 3D space interaction, not just 2D screens.

What's next for Spatial Showcase Engine

Our vision extends far beyond portfolios. We're transforming Spatial Showcase into a comprehensive spatial computing platform. Next steps include: Multi-User Collaboration with real-time editing and live synchronization; AI-Powered Content Generation to automatically create 3D environments and suggest layouts; Advanced Analytics with VR heatmaps and interaction tracking; Template Marketplace for community-driven template creation; Mobile AR Support extending to phones and tablets; Integration Ecosystem with Figma, Adobe Creative Cloud, and Behance; and Enterprise Features with team management and white-labeling. We're building the foundation for the next generation of spatial web experiences—where every creator can have their own metaverse presence.

Share this project:

Updates