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.
Oldest comments (9)
Day 1
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, will do! Thank you for taking your time here.
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.
Day 2
Done
To-Do
Day 3
Done
To-Do
Day 4
Done
To-Do
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!