loading...

milliondollarpaint - A real-time multi-user drawing web app

wobsoriano profile image Robert Updated on ・1 min read

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.

Discussion

pic
Editor guide
Collapse
meganspeir profile image
Megan Speir

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.

Collapse
wobsoriano profile image
Robert Author

Hi Megan, will do! Thank you for taking your time here.

Collapse
wobsoriano profile image
Robert Author

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.

Collapse
wobsoriano profile image
Robert Author

Day 2

Done

  • Homepage and Drawing page
  • Ability do draw in canvas

To-Do

  • Show user drawings in the homepage for each pixel
  • Save drawings in Twilio Sync
  • Load drawings in Twilio Sync in real-time
  • Export drawing as image
Collapse
wobsoriano profile image
Robert Author

Day 3

Done

  • Show user drawings in the homepage for each pixel
  • Subscribe to real-time painting updates using Twilio Sync

To-Do

  • Export drawing as image
  • Validate coordinates in drawing page
Collapse
wobsoriano profile image
Robert Author

Day 4

Done

  • Export drawing as image

To-Do

  • Validate coordinates in drawing page
Collapse
technoplato profile image
Michael Lustig - halfjew22@gmail.com

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.

Collapse
wobsoriano profile image
Robert Author

Sure. Thanks!

Collapse
wobsoriano profile image
Robert Author

Day 1

Done

  • Initial project setup

To-Do

  • Initial UI for canvas drawing
  • Review Twilio Sync docs