Livelet

Collaborative code editor & executor with real-time presence and access control

Problem Statement

Online collaboration for code editing lacks a web-based lightweight, real-time, access-level controlled platform for developers working in teams or mentorship

Proposed Solution & Key Features

Livelet offers a real-time collaborative editor with code execution and access management

Key Features

  • Real-time collaborative editing using Liveblocks and CodeMirror
  • Code execution using Judge0 supporting 5 major programming languages
  • Robust authentication system with social sign-ons and email OTP generation for sensitive actions
  • Room-based collaboration and access level control for each user in the room
  • Capable of 10+ concurrent users per room
Technology Stack

Frontend

Next.js

CodeMirror

ShadCN UI

Tailwind CSS

TypeScript

Backend

Next.js

TypeScript

Database

PostgreSQL

Prisma

Realtime

Liveblocks

Yjs

Other

Auth.js

Resend

Vercel

Core Feature Workflows

Technical Challenges Faced
  • Syncing the the code document in real-time with live cursors
  • Handling dynamic roles per room according to liveblocks authentication
  • Maintaining clean and dark UI code editor
    • Future Scope
    • Add support for voice collaboration
    • Integerate chat section within the room members
    • Enable AI-powered code suggestions
    • Add a feature for hosting coding competitions