DEV Community

Robert
Robert

Posted on • Edited on

4 2

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

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (9)

Collapse
 
wobsoriano profile image
Robert • Edited

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 • Edited

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
 
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

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

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

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

Sure. Thanks!

Collapse
 
wobsoriano profile image
Robert

Day 4

Done

  • Export drawing as image

To-Do

  • Validate coordinates in drawing page
Collapse
 
wobsoriano profile image
Robert • Edited

Day 1

Done

  • Initial project setup

To-Do

  • Initial UI for canvas drawing
  • Review Twilio Sync docs

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay