Skip to content

akhilender-bongirwar/collab-draw

Repository files navigation

Collab Draw - Real-Time Drawing WebApp


Table of Contents


Overview

Collab Draw is a real-time collaborative drawing web application that allows multiple users to draw on a shared canvas simultaneously. Users can interact with the canvas, choose different colors, adjust brush sizes, undo and redo actions, and download their creations.

Features

  • Real-time collaboration on a shared canvas
  • Individual color selection for each user
  • Adjustable brush sizes and eraser sizes
  • Undo and redo functionality
  • Download option to save drawings

Tech Stack

  • React
  • Next.js
  • Redux Toolkit
  • TypeScript
  • Socket.io
  • CSS (utilizing best practices)
  • HTML5 Canvas API

Screenshots

Screenshot 2023-11-14 164512 Screenshot 2023-11-14 164428 Screenshot 2023-11-14 164626

Working Video

Live Demo

What I Learned

During the development of Collab Draw, I gained hands-on experience in utilizing TypeScript for frontend development. Working with Redux Toolkit for structured state management was a key learning point. Additionally, integrating Socket.io for real-time collaboration enhanced my understanding of WebSocket communication in web applications.

Useful Resources

React - Documentation Next.js - Documentation Redux Toolkit - Documentation Socket.io - Documentation


Author

About

Next js application for collabrative real-time drawing

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published