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