Skip to content
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CodeSketch

CodeSketch is a collaborative platform that allows users to draw, code, and chat in real-time. It provides a seamless experience for teams to work together on sketches, share and edit code, and communicate via text or voice chat.


Features

  • Real-time Canvas - Draw and collaborate with others live.
  • Live Chat System - Communicate via text while working.
  • Code Editor - Share and edit code in real-time.
  • Voice Chat - Talk with teammates while collaborating.
  • Room Management - Create and join different collaboration rooms.

Tech Stack

  • Frontend: Next.js, React, TypeScript, Tailwind CSS
  • Backend:
    • HTTP Backend: Node.js, Express.js, Prisma (PostgreSQL)
    • WebSocket Backend: Websockets and WebRTC
  • Authentication: JWT (JSON Web Token)
  • Database: PostgreSQL (via Prisma ORM)
  • Package Manager: pnpm and npm

Folder Structure

frontend/ (View Repository)

This folder contains the React & Next.js frontend for Dev-Sketch.

  • Built using Next.js, React, TypeScript.
  • Implements real-time drawing, code sharing, and chat.
  • Uses WebSockets for live updates.

http-backend/ (View Repository)

This is the HTTP API backend of Dev-Sketch.

  • Built using Node.js, Express, Prisma.
  • Handles user authentication, database interactions, and API requests.
  • Manages user profiles, project data, and authentication.

websocket-backend/ (View Repository)

This is the WebSocket backend for real-time features.

  • Uses Socket.io for live communication.
  • Manages real-time drawing, code collaboration, and chat events.
  • Ensures seamless room-based collaboration.

Installation & Setup

1️⃣ Clone the Repository

git clone [https://github.com/Shivam1983/CodeSketch.git](https://github.com/Shivam1983/CodeSketch)
cd CodeSketch

🔎 Visit each folder's README for a more detailed view of what each folder does:

Folder Details

       

This README gives a clear overview of the entire project. Let me know if you need any edits! 😊

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages