Excalidraw Clone
A collaborative whiteboard tool I built to understand how real-time collaboration works. Drawing on canvas and syncing across users was way harder than I expected!
Project Overview
I've always been fascinated by tools like Excalidraw and wanted to understand how they work under the hood. So I decided to build my own version. The drawing part was fun - using Canvas API and Rough.js to get that hand-drawn look. But real-time collaboration? That was a whole different beast. Getting multiple users to draw simultaneously without conflicts was the biggest challenge. I spent way too long debugging why some strokes would disappear or appear in the wrong place. Eventually figured out a decent conflict resolution strategy, though I'm sure there are still edge cases I haven't caught. This project taught me a lot about WebSockets, canvas manipulation, and the complexity of real-time systems. The code might have a few rough edges (pun intended), but it works and I learned a ton building it.
Project Gallery
💡 Like all human-written code, you might spot a typo or two - that's part of the authentic development process!
Key Highlights
Related Projects
DevPath
A journaling application designed to help developers overcome tutorial hell by tracking their learning progress and building a portfolio of completed projects.
Git Learning Tool
An interactive tool to visualize Git concepts in MusicBlocks, making version control easier to understand through visual and auditory representations.
MERN Sprint Accelerator
A comprehensive website for a full stack bootcamp that helps students rapidly learn the MERN stack through structured sprints and hands-on projects.
SnippetVault
A modern code snippet manager I built because I kept losing my snippets across projects. What started as a weekend project became something I use daily.
Project Details
Timeline
4 weeks
Team
Solo project
Role
Frontend Developer
Completed
2024
Type
personal experiment