📌 This is an excalidraw/miro clone made using Next.js.
First, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
Visit sketchbook-backend to run the backend service. By default, it runs on http://localhost:3000. Change this PORT number, go to src/socket.js, and copy-paste the PORT number under '' in the url variable. Ensure both the services are running for web sockets to emit events.
The project has three sub-folders:-
(1) Menu
src/components/Menu/index.js has context to the pencil, eraser, undo, redo, and download respectively. There is a handleMenuClick handler which emits the activeMenuItem i.e., pencil/eraser. handleActionItemClick has context to actionItemClick i.e., undo, redo, and download and emits which is consumed in Board/index.js.
(2) Toolbox
This has context to the colors and the brush stroke sizes respectively. These are changed based on the current active menu item i.e., pencil or eraser, and emit the change in config to Board/index.js.
(3) Board
All the methods leveraged from the canvas api are consumed here. The events are emitted from here.
- JsCafe's implementation: youtu.be/JsCafe
- Fontawesome for icons: fontawesome.com
- Canvas API: Canvas_API
- Socket io: socket.io
- Draw using different sets of colors and brush strokes.
- Function to erase sketch.
- Undo and redo functionality.
- Downloading the sketchbook in .jpg format.
- Realtime collab with others.
277de52f-fbaf-4561-8b60-fe75540669ba.mp4
- Unknown at rule @applycss(unknownAtRules) while using @apply form tailwindcss. This warning can be fixed by going to code editor settings and to select ignore from dropdown box for Unknown at rule.
- useEffect hook caused error of same toolbox properties being applied even after updating the color and brush size. This was fixed by using useLayoutEffect.
- Currently the bg of the canvas is not getting downloaded. This has to be rectified by applying a white bg while downloading the picture.