CoSketch is a real-time collaborative drawing platform built to explore modern full-stack development, real-time communication, and scalable architecture. The application allows multiple users to draw, move, resize, and style shapes (like rectangles, ellipses, arrows, lines, and diamonds) on a shared canvas — all synchronised in real-time using WebSockets.

This project was created as a deep dive into building full-stack systems with live collaboration features. From WebSocket communication and custom shape management to Docker-based development and CI/CD deployment with GitHub Actions, CoSketch reflects a strong foundation in scalable engineering practices and product thinking.

Tech Stack

• Frontend: Next.js, TypeScript, Tailwind CSS, Zustand, @tanstack/react-query

• Backend: Express.js, WebSocket server (ws), Node.js

• DevOps: Docker, GitHub Actions, CI/CD workflows

• Architecture: Turborepo monorepo setup using Bun as the JS runtime

Key Features

• Real-time Collaboration: Draw and interact live with others on the same canvas

• Interactive Tools: Select, move, resize, style, and delete shapes

• Modular Architecture: Cleanly separated frontend, backend, and socket server

• Dockerized: Easy local development with Docker support

• CI/CD Ready: Automated deployment pipeline using GitHub Actions