Holoverse

nextjs typescript tailwindcss redis mediasoup postgresql nodejs
Holoverse

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

Holoverse - Immerse Yourself in Virtual Events

TypeScript Tailwind Nodejs Next.js PostgreSQL Redis

Better Spaces to Host Online Events. A virtual events platform that brings people together in customizable 2D environments with proximity-based interactions.

✨ Features

  • Customizable 2D Avatars - Fully customizable avatars that reflect your unique style
  • Themed Virtual Spaces - Create and explore spaces with different themes, sizes, and privacy options
  • Proximity Media Interactions - Engage in natural conversations with audio and video that dynamically appear based on proximity
  • Realtime Participant Status - See who’s talking, who’s active, and more with real-time participant updates
  • Interactive Elements - Use virtual whiteboards and other tools to collaborate just like in the real world
  • Media and Hardware Controls - Full control over your experience with options like spatial audio, sound effects, and AI-powered noise cancellation
  • Text Chat with Emojis & Emotes - Engage with others through global text channels filled with emojis and animated emoticons
  • Help Signals - Raise your hand to get assistance in real time

🛠️ Tech Stack

  • Next.js - Framework for server-rendered React applications
  • TypeScript - Type-safe JavaScript
  • Tailwind CSS - Utility-first CSS framework
  • Redis - In-memory data structure store
  • BullMQ - Message queue for background jobs
  • Mediasoup - WebRTC media server for real-time communication
  • PostgreSQL - Relational database
  • Node.js - JavaScript runtime for server-side logic

🎯 Key Highlights

Virtual Spaces

Holoverse offers fully customizable and themed spaces, where users can interact using their avatars. These spaces are designed to mimic real-world scenarios, offering a seamless blend of visual and auditory interaction.

Collaborative Tools

The platform includes interactive elements like whiteboards, allowing users to brainstorm and collaborate effectively within the virtual environment.

Proximity-Based Communication

Audio and video interactions dynamically appear based on avatar proximity, creating natural conversation flows similar to real-world interactions.

📋 Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js v14 or higher
  • PostgreSQL database
  • Redis server
  • Mediasoup dependencies

⚙️ Installation & Setup

  1. Clone the Repository

    git clone https://github.com/Nginze/project-vhub.git
cd project-vhub

  2. Install Dependencies

    npm install

  3. Configure Environment Variables

    Create a .env file in the root directory:

    DATABASE_URL=your_postgresql_database_url
REDIS_URL=your_redis_url
MEDIASOUP_LISTEN_IP=your_server_ip

  4. Set Up the Database

    Run migrations to set up the PostgreSQL database schema:

    npx prisma migrate dev

🚀 Running the Application

  1. Start the Development Server

    npm run dev

    The app should now be running on http://localhost:3000

  2. Building for Production

    npm run build

  3. Start the Production Server

    npm start

🎨 Use Cases

  • Virtual conferences and meetups
  • Online workshops and training sessions
  • Remote team collaboration
  • Virtual networking events
  • Educational seminars and classes

📄 License

This project is open source and available under the MIT License.