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