I'm cloning the Excalidraw project to learn more about the tech stacks and how to build a real-time collaboration app.
I built it from scratch using TypeScript, NextJS, TailwindCSS, RoughJS, and Socket.io.
- 🔄 Real-time Collaboration
- 🎨 Hand-drawn Style w/ Papyrus-Paper-like Background
- 🤖 LLM-based Shape Auto-Generation
- TO BE CONTINUED...
- Papyrus-Paper-like Background
- OOP-refactor
- Fix Randomness of a single shape
- Draw Gizmo when a shape is selected
- Change Canvas to SVG
- Shape Creation
- Line
- Curve Line (using SVG)
- Another Line/Arrow Implementation
- Rectangle
- Ellipse
- Straight Arrow (using SVG)
- Diamond (using Polygon)
- Bezier Arrow (using SVG)
- Circle (pressing Shift while drawing Ellipse)
- More shapes using SVG or Polygon
- Shape Manipulation
- Move
- Resize
- Select
- Rotate (using Matrix ?)
- Delete
- Keyboard Shortcuts
- Real-time collaboration
- LLM (OpenAI API) integration to auto-generate shapes
- Redo / Undo
- Drawing Options
- Stroke Color (include Opacity)
- Background Fill
- Background Fillstyle
- Stroke Width
- Stroke Style
- Roughness
- Rounded Corners
- Freehand Drawing
- Text
- Eraser
- Performance Optimizations
Run this command in the root folder.
cd clinet && npm dev
You can now play around with it on https://localhost:3000
.