PackMate-WebXR

Logo
Interfaz

PackMate WebXR - Project Story 💡 Inspiration The idea for PackMate came from the frustration of disconnected packing: 62% of travelers forget essentials because paper lists get lost and mobile apps isolate you from the physical task. When I discovered the WebXR capabilities of the Meta Quest Browser, I saw a new opportunity: avoiding app friction entirely. What if your packing assistant was just a link away, instantly accessible and floating in your real space?

🛠️ How I Built It Technology Stack:

Frontend: React 18 with Vite for lightning-fast performance. 3D Engine: Three.js & React Three Fiber (R3F) to render the immersive interface. WebXR: @react-three/xr library to access VR/MR features directly in the browser. State Management: Zustand for efficient global state handling. Deployment: GitHub Pages for instant, zero-install distribution. Development Process:

Web-First Approach: Shifted from native development to WebXR to ensure maximum accessibility. No APKs, no side-loading. Immersive UI Design: Created a glassmorphism-based UI using Three.js that feels native to the Mixed Reality environment. Hardware Simulation: Developed without physical Quest hardware by creating a robust "Desktop Mode" that simulates VR interactions with mouse/keyboard, ensuring the logic was solid before testing on device. 🎯 Key Features Instant Access (Zero-Install): Runs directly in the Meta Quest Browser. Just click the link and enter VR. Spatial Checklist: A floating, interactive 3D list that anchors to your space, not your face. AI Simulation: Simulates computer vision logic to detect suitcases and visualize them with a 3D wireframe. Hybrid Input: Works seamlessly with VR controllers (hands) or desktop mouse for dev testing. 🚧 Challenges Faced Challenge 1: pivoting to WebXR: I originally started with native Android code but realized the barrier to entry was high. Solution: I completely rebuilt the app using Web technologies (Three.js), proving that the web can deliver native-quality MR experiences. Challenge 2: Testing without Hardware: Developing for VR without a headset is tough. Solution: I implemented a dual-input system where mouse interactions on desktop perfectly mirror VR controller clicks, allowing me to debug the entire packing flow on a screen. 📚 What I Learned The Power of WebXR: The web is ready for spatial computing. You don't always need heavy game engines like Unity. React Three Fiber: Mastered the declarative way of building 3D scenes, which made UI development much faster than imperative code. Accessibility: Learned that the best app is the one users can actually open. Removing the installation step is a game-changer. 🚀 Future Plans Hand Tracking API: Upgrade from controller clicks to full hand-tracking interactions using the WebXR Hands API. Web-based Scene Understanding: Integrate TensorFlow.js to perform real object detection directly in the browser. PWA Support: Make the app installable as a Progressive Web App for offline use. 🎉 Impact PackMate WebXR demonstrates that the future of Mixed Reality is open and accessible. By building on the web, we democratize access to spatial tools, making packing smarter, faster, and stress-free for anyone with a browser.