MetaSpace

MetaSpace is a full-stack multiplayer web application with real-time collaboration, interactive PixiJS editing, and video chat features. Users can join rooms, collaborate in real-time, and communicate through video.

---

Table of Contents

• Features
• Tech Stack
• Project Structure
• Installation
• Running the Project
• Usage
• Scripts
• Contributing
• License

---

Features

• Real-time multiplayer rooms
• PixiJS-powered interactive editor for maps and environments
• Video chat with WebRTC and Socket.IO
• Google Sign-In authentication
• Supabase backend for authentication, database, and realtime updates
• Modular and scalable TypeScript codebase
• Responsive frontend built with Next.js and Tailwind CSS

---

Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Node.js, Express, Socket.IO, TypeScript
• Database: Supabase (PostgreSQL + Realtime)
• Realtime Communication: Socket.IO
• Video Chat: WebRTC
• Game Editor / Engine: PixiJS

---

• frontend/app: Pages and components
• frontend/app/auth: Google Sign-In authentication
• frontend/app/editor: PixiJS editor components
• frontend/app/play: Game client UI
• backend/server.ts: Backend entry point
• backend/requests.ts: API request helpers

---

Installation

Prerequisites

• Node.js >= 18
• Yarn or npm
• Supabase project with API keys

Steps

1. Clone the repository:

git clone https://github.com/your-username/metaspace.git
cd metaspace

# Backend
cd backend
yarn install

# Frontend
cd ../frontend
yarn install


SUPABASE_URL=your-supabase-url
SUPABASE_KEY=your-supabase-key
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

cd backend
yarn dev

cd frontend
yarn dev