- Overview
- Features
- Tech Stack
- Screenshots
- Working Video
- Deployed Link
- What I Learned
- Useful Resources
- Author
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.
- 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
- React
- Next.js
- Redux Toolkit
- TypeScript
- Socket.io
- CSS (utilizing best practices)
- HTML5 Canvas API
- 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.
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.
React - Documentation Next.js - Documentation Redux Toolkit - Documentation Socket.io - Documentation
- LinkedIn - Akhilender Bongirwar