Building a Real-Time Collaborative Drawing App with Next.js, Socket.IO, and Strapi

[lizpart]

What is your article idea?

This article details the creation of an interactive drawing application that allows users to collaborate on drawings in real-time. It has applications in various fields, including online education, remote collaboration in engineering and architecture, and interactive games and entertainment. It is implemented using technologies like Next.js, Socket.IO, Strapi and React Canvas Draw Library.

What are the objectives of your article?

Introduction

• Brief overview of the technologies to be used.

Project Setup

• Introduce the concept of collaborative drawing apps and the benefits of using Strapi as a headless CMS for data storage and user management.
• Guide the reader through setting up a Next.js project.
• Install required dependencies: Next.js API routes, Socket.IO for real-time communication, and a library for drawing functionalities (e.g., react-canvas-draw).

Strapi Backend

• Briefly explain Strapi and its role in data management and user authentication.
• Provide instructions for installing and configuring Strapi.
• Define Strapi Content Types for:
• Drawings (including title, creation date, collaborators, drawing data)
• Users (optional, for user accounts and authentication)

Next.js Frontend with Drawing Canvas

• Structure the Next.js project with components for:
• A collaborative drawing canvas where users can draw using various tools (lines, shapes, colors).
• User list displaying currently connected users.
• Implement the drawing canvas using the chosen library, allowing users to create and modify drawings in real-time.

Real-time Collaboration with Socket.IO

• Integrate Socket.IO into both the frontend and backend to facilitate real-time communication.
• Set up event listeners on the client-side (Next.js app) to capture user drawing actions (strokes, color changes, etc.).
• Utilize Socket.IO to emit these events to the server, sending drawing data (user ID, drawing ID, and specific action details) to the appropriate Strapi API route.
• On the server-side (Next.js API routes), listen for incoming events from clients and perform the following actions:
• Update the corresponding drawing data in Strapi using the received information.

Conclusion

• Recap the functionalities built in the collaborative drawing app.
• Briefly discuss potential improvements and future features like user-generated content galleries with drawing previews, drawing tools specific to design fields, or cloud storage integration for saving drawings permanently.
• Highlight the advantages of using Strapi for data management, user authentication, and potentially version control compared to a simpler backend solution.

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @lizpart , this looks great. Please would this demonstrate real-time communication among several users?

[lizpart]

Yes @Theodore-Kelechukwu-Onyejiaku , the outlined article will demonstrate real-time communication among several users. The integration of Socket.IO in both the frontend and backend allows for bidirectional, real-time communication between clients (users) and the server. This enables users to collaborate on drawings simultaneously, with changes being reflected in real-time across all connected clients.

[Theodore-Kelechukwu-Onyejiaku]

Thank you @lizpart ,

That is great. Will you provide a demo and a Github repo to the working code please?

[lizpart]

@Theodore-Kelechukwu-Onyejiaku, yes I will.

[Theodore-Kelechukwu-Onyejiaku]

@lizpart , please proceed. Thank you! 🚀

[lizpart]

Hi @Theodore-Kelechukwu-Onyejiaku,

I am done working on the draft of this article. Please take a look at it here.

[Theodore-Kelechukwu-Onyejiaku]

Hi @lizpart ,

Thank you for your contribution! I just skimmed through your work. Please do well to include the GitHub repo link to the project. Also, add a clear GIF or you can submit the clear one here if HackMD prevents you from doing that. I also noticed you didn't include links to packages you used in the tutorial.

And lastly, I would love to ask that you use Strapi server instance for the real time communication instead of Express. My initial thought was you were to implement this with Strapi alone.

At the moment, I haven't reviewed your work, but will add it to the review backlog. If I need anything from you, I will let you know.

Please do well to join our Discord community channel if you haven't, https://discord.gg/invite/strapi. 😊

[lizpart]

Hi @Theodore-Kelechukwu-Onyejiaku,

I have made the requested changes and provided the GIF below.
As for using Strapi as server instance instead of Express. Integrating Socket.IO directly into Strapi’s core violates the separation of concerns principle. Real-time communication typically involves managing Socket connections, broadcasting and handling real-time data flows, which are outside the primary responsibilities of the CMS, which forces implementing it using a plugin. Which does not align with the application architecture and tutorial outline. That's why I used Express.

[lizpart]

• Complete source code for the application in GitHub repository.
• Strapi backend in GitHub repository.

[Theodore-Kelechukwu-Onyejiaku]

Hi @lizpart ,

Thank you so much for the clarity. I would recommend using Strapi. You can check this blog post: https://strapi.io/blog/how-to-create-a-real-time-bidding-app-using-strapi-v4-vue-and-socket-io.

Also, the GIF provided is not descriptive enough. I should see "User A" and "User B" or something similar, and perhaps a moving cursor to show which user is drawing.

Please let me know if you are willing to implement this.

[lizpart]

Hi @Theodore-Kelechukwu-Onyejiaku ,

I have provided a more descriptive gif, indicating the user in action. After a careful consideration, I would like to maintain the article content and structure. I suggest you proceed to review.