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.

Posted on by:

wobsoriano profile

Robert

@wobsoriano

Apparently, this user prefers to keep an air of mystery about them.

Discussion

markdown guide
 

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

  • 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
 

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
 

Day 4

Done

  • Export drawing as image

To-Do

  • Validate coordinates in drawing page
 

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.

 
 

Day 1

Done

  • Initial project setup

To-Do

  • Initial UI for canvas drawing
  • Review Twilio Sync docs