Workverse

Workverse is a 3D virtual office platform that brings the spontaneity and connection of in-person work to remote teams. Walk around as an avatar, chat with teammates, and manage your calendar.

Comment

Inspiration

We started this hackathon working on VoiceUp, a platform for submitting social issues. After building a good chunk of it, we realized it lacked that "wow factor"—it was too simple and didn't truly solve the problems it aimed to address.

Then we pivoted. With the recent rise of the loneliness epidemic and the post-COVID separation many remote workers face, we saw an opportunity to bridge a real gap. Workverse was born from a simple idea: bring the personalization and spontaneous connection of in-person work to the comfort and flexibility of remote work. We wanted to recreate those water cooler moments, the casual "hey, got a minute?" interactions, and the sense of presence that makes office culture engaging—all in a 3D virtual environment.

What We Learned

Building Workverse taught us:

  • 3D web graphics with Three.js and React Three Fiber—rendering complex office environments in the browser
  • Real-time communication patterns using WebSockets and Socket.io for instant messaging and presence tracking
  • AI integration with OpenAI's GPT-4 for intelligent document parsing and Q&A
  • Full-stack architecture combining React, Flask, and Supabase for a seamless user experience
  • Rapid pivoting—sometimes the best ideas come from knowing when to change direction

How We Built It

We built WorkVerse as a full-stack web application:

  1. Frontend: React with Vite for fast development, Three.js for the 3D office environment, and Material-UI for polished components
  2. Backend: Flask server with Socket.io for real-time messaging, integrated with OpenAI's API for the chatbot and functional real time multi-user support.
  3. Database: Supabase (PostgreSQL) for user data, messages, events, and authentication
  4. 3D Environment: Custom-modeled office furniture and layout using React Three Fiber
  5. Real-time Features: WebSocket connections for multiple live users, live chat, typing indicators, and presence status.

The architecture follows a clear separation: React handles the immersive 3D interface and user interactions, Flask manages business logic and AI features, and Supabase provides secure authentication and data persistence.

Challenges We Faced

  • The Pivot: Recognizing VoiceUp wasn't solving real problems and having the courage to start fresh mid-hackathon
  • 3D Performance: Optimizing Three.js rendering to handle multiple avatars and complex office geometry without lag
  • Real-time Sync: Ensuring message delivery and presence updates stayed consistent across WebSocket connections
  • PDF Processing: Parsing and chunking documents efficiently for the AI chatbot's context window
  • Time Constraints: Building a feature-complete platform with 3D graphics, messaging, scheduling, and AI in hackathon timeframe

Despite these challenges, we created a platform that genuinely makes remote work feel more human.

Built With

Share this project:

Updates