DevPlayground

A real-time collaborative coding platform for seamless multi-user code editing, instant synchronization, code execution in multiple languages, and secure user authentication.

Features

• Real-time collaborative code editing with WebSocket
• Code execution in JavaScript, Python, and TypeScript
• Secure user authentication and session management
• File system operations and project sharing
• Dockerized execution environment for isolation
• Responsive UI with modern design

Tech Stack

• Frontend: React, TypeScript, Vite, HTML, CSS
• Backend: Node.js, TypeScript, Express.js, WebSocket
• Database: PostgreSQL
• Authentication: Passport.js
• Deployment: Docker, Vercel
• Other: ESLint, Email service

Installation

Prerequisites

• Node.js (v16 or higher)
• PostgreSQL
• Docker (for execution service)

Setup

1. Clone the repository:

   git clone https://github.com/Ankushkr14/DevPlayground.git
   cd DevPlayground

2. Install client dependencies:

   cd client
   npm install

3. Install server dependencies:

   cd server
   npm install

4. Set up environment variables:

   • Copy .env.example to .env in both client and server directories
   • Fill in your database URL, JWT secrets, etc.

5. Set up the database:

   • Run the SQL queries in server/db_queries/queries.sql

6. Start the development servers:

   • Server: npm run dev
   • Client: cd ../client && npm run dev

Usage

1. Open the client at http://localhost:5173
2. Register/Login
3. Create or join a coding session
4. Start collaborating in real-time
5. Execute code in supported languages

API Documentation

The backend provides RESTful APIs for:

• Authentication (/auth)
• File operations (/fs)
• Sessions (/session)
• Sharing (/share)
• Templates (/template)