2D Metaverse – Immersive Browser-Based Virtual World

Overview

The 2D Metaverse is an immersive virtual environment accessible directly via web browsers. It blends real-time communication, avatar-driven exploration, and spatial collaboration into one seamless experience. Designed to feel like a "virtual office" or "hangout space," users can move around rooms, talk with others via video calls, and experience a persistent shared environment.

🛠 Technologies Used

Frontend: React, Next.js, TailwindCSS, Framer Motion
Backend: WebSocket, Prisma, PostgreSQL
Dev Tools: VSCode, Figma, Chrome DevTools, GitHub

🚀 Live Demo

🔗 Live Project
💻 GitHub Repo

✨ Key Features

🧭 Real-time avatar-based navigation on a 2D/3D interactive map
💬 Personalized virtual spaces with chat and proximity-based video calls
🎥 One-on-one and group video calls between users in real-time
🏗️ Modular scene architecture that supports dynamic content injection
🕹️ Realtime state tracking for user position and interaction
🔁 Reusable component design for efficient expansion and scene creation

🖼️ Visuals

🧩 Project Architecture

🖥 Frontend

Built using Next.js and React for fast rendering and SPA-like behavior
Integrated with Framer Motion for smooth avatar and environment animations
Responsive layout with TailwindCSS

🔌 Backend

Real-time interactions powered by WebSocket
User and session management handled with PostgreSQL + Prisma
Video/audio communication via WebRTC integration (peer-to-peer)

🧠 Challenges Tackled

🧮 Optimizing performance for complex interactive maps with many avatars
🔄 Synchronizing movement and real-time interaction for all users
📞 Implementing WebRTC in a modular avatar-driven environment
🧰 Maintaining responsiveness for both desktop and mobile layouts
🌐 Cross-browser compatibility across Chrome, Safari, and Firefox

⏳ Project Duration

📅 Feb 2024 – Apr 2024
👨‍💻 Role: Full Stack Developer

💡 Learning Outcomes

Building real-time collaborative environments with WebSocket
Managing distributed UI states across users in shared virtual spaces
Implementing dynamic video/audio calling logic into React
Designing flexible backend schemas with Prisma + PostgreSQL

📂 Folder Structure (Simplified)

2d-metaverse/
├── components/       # Reusable UI components (Avatar, Map, Controls)
├── pages/            # Next.js routes and views
├── public/           # Static assets and map images
├── lib/              # WebSocket and video call logic
├── prisma/           # DB schema and queries
├── styles/           # Tailwind and global styles
└── utils/            # Helpers for avatar logic, media, and map data