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.