What I built
Ever heard of the milliondollarhomepage? It's a website that consisted of a million pixels arranged in a 1000 × 1000 pixel grid; the image-based links on it were sold for $1 per pixel in 10 × 10 blocks. More info here.
I created something similar, and instead of links, users will be able to draw in each pixel and let others see it in real-time.
Yes, I've seen a lot of posts using Twilio's sms, video and other communication APIs that will be helpful to the community in this crisis and I think that's enough already. I'm more of a "battle the loneliness" person and want other people to connect and just have fun.
Demo Link
https://milliondollarpaint.herokuapp.com
Link to Code
https://github.com/sorxrob/milliondollarpaint
How I built it
I used HTML Canvas for creating and drawing graphics and JavaScript and Vue for manipulation of the Canvas. Each pixel has an x and y coordinate and will be saved in a shared state using Twilio Sync. Twilio Sync offers us two-way real-time communication between different devices.
Detailed stack:
- Node
- JavaScript
- Twilio
- Vue
- Vuetify
- HTML
- CSS
Additional Resources/Info
When testing, open up 2 browsers. Stay at the homepage for the first browser, and try to draw anything on the 2nd browser and click save to see the real-time magic happen using Twilo Sync!
Also, I am using heroku free tier so it might take some time on your first load.
Top comments (9)
Day 2
Done
To-Do
Day 3
Done
To-Do
Hey Robert, Love the idea! Let me know if you need some help testing.✏️ I think we could all do with some gentle distraction apps right about now.
Hi Megan! I think you can try testing it.
The url is milliondollarpaint.herokuapp.com
Try to open 2 browsers at the same time to see updates! Thank you.
Hi Megan, will do! Thank you for taking your time here.
Thanks for laying out your submission. I'm going to borrow your strategy for sharing TODO / Done underneath. That's a cool idea. So is your idea! Good luck.
Sure. Thanks!
Day 4
Done
To-Do
Day 1
Done
To-Do