Collab Draw - Real-Time Drawing WebApp

---

Table of Contents

• Overview
• Features
• Tech Stack
• Screenshots
• Working Video
• Deployed Link
• What I Learned
• Useful Resources
• Author

---

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

Working Video

• https://github.com/akhilender-bongirwar/collab-draw/assets/112749383/c5da5dfc-606a-4a89-8fe1-d61763d03008
• All the functionalities are shown in this working video of the application.

Live Demo

• Collab Draw 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

• LinkedIn - Akhilender Bongirwar