A real-time video chat application with a Minecraft-style 3D interface built with WebRTC and React Three Fiber.

• 🎮 Minecraft-style 3D World: Navigate a voxel-based room in first-person view
• 📹 WebRTC Video Chat: Peer-to-peer video communication
• 💬 Real-time Chat: Text messaging with Socket.IO
• 👥 Multiplayer: See other users as 3D avatars
• 🎨 Customizable Avatars: Each user gets unique colors based on their ID

• NestJS - Node.js framework
• Socket.IO - Real-time communication
• JWT - Authentication

• React - UI framework
• Vite - Build tool
• React Three Fiber - 3D rendering
• Drei - Three.js helpers
• Zustand - State management
• TailwindCSS - Styling

first-person-room/
├── server/                 # NestJS backend
│   ├── src/
│   │   ├── modules/
│   │   │   ├── auth/      # Authentication module
│   │   │   └── chat/      # Chat & WebRTC signaling
│   │   ├── app.module.ts
│   │   └── main.ts
│   └── package.json
│
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── 3d/        # Three.js components
│   │   │   └── ui/        # UI components
│   │   ├── hooks/         # Custom hooks
│   │   ├── stores/        # Zustand stores
│   │   ├── pages/         # Page components
│   │   └── layouts/       # Layout components
│   └── package.json
│
└── package.json           # Root package.json

• Node.js 18+
• npm or yarn

1. Install dependencies:

npm install

2. Start the development servers:

npm run dev

This will start:

• Backend server on http://localhost:3001
• Frontend on http://localhost:5173

# Backend only
npm run dev:server

# Frontend only
npm run dev:client

• PORT - Server port (default: 3001)
• JWT_SECRET - JWT secret key
• CLIENT_URL - Frontend URL for CORS

• Configure in vite.config.ts for proxy settings

1. User registers/logs in via REST API
2. Server returns JWT token
3. Token used for Socket.IO authentication

1. User joins room via Socket.IO
2. Server notifies existing users
3. New user initiates WebRTC offers to all users
4. ICE candidates exchanged through server
5. Direct peer-to-peer video streams established

• Position/rotation synced via Socket.IO
• Throttled to reduce bandwidth
• Smooth interpolation on receiving end

MIT