The problem Collabrush solves

We have Figma for UI collaboration
MS Paint for painting images
But nothing for paint with collaboration!!

In this project, we aimed to cover that gap.

Challenges we ran into

We faced challenges implementing following features within limited time we had:
• Set and restrict access to boards by making it private, public or view only
• Undo/Redo feature with conflict management
Next.js 13 beta
A custom server had to be made for proper socket.io and backend integration
Reference -
• https://stackoverflow.com/a/57324229
• https://github.com/vercel/next.js/tree/canary/examples/custom-server
• Socket server and client-based basic Chat app made for functionality testing
• Realtime mouse rendering was implemented using with multiple user connections and
broadcasts
• socket.IO
https://codesandbox.io/s/0wlo27k1v?file=/server/index.js:905-951
• Socket.IO callbacks were dependent on states, so they had to be dynamic.
Hence, refs were used to make dynamic, continuously updating callback functions which are
defined only once
• https://stackoverflow.com/questions/68119668/useeffect-with-react-hooks-exhaustivedeps-
where-callbacks-depend-on-state
• https://github.com/Aminadav/react-useStateRef#readme (Not used must can be)
• https://stackoverflow.com/questions/57847594/react-hooks-accessing-up-to-date-statefrom-
within-a-callback
• Client connection and disconnection was managed using events
• Getting and making pointers for all already connected clients was implemented
• Improved callbacks and references to make only state as reference
• Drawing flickering issues resolved
• More than 3 clients also work flawlessly now
• Paint tools from scratch
• Integrating sockets with the paint component
• Completed collaboration integration and planned data flow
• Thought of complete flow for making sure canvas is updated with socket data efficiently