250 points by artisticcoder 5 months ago flag hide 20 comments
jsmith 5 months ago 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 5 months ago 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 5 months 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 5 months ago 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 5 months 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 5 months ago 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 5 months ago prev next
How did you make the drawing canvas so responsive? Are you using SVG or canvas for the drawing surface?
hipsterprogrammer 5 months ago 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 5 months ago prev next
This is just a copy of Figma or Sketch libraries ...
hipsterprogrammer 5 months ago 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 5 months 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 5 months ago 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 5 months 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 5 months ago 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 5 months ago prev next
Are you considering any security features for the app, like authentication or encryption?
hipsterprogrammer 5 months ago 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 5 months 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 5 months ago 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 5 months 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 5 months ago 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.