in january 2020, i worked on what could’ve been miro. just kidding. kinda.
introduction
it all started when i stumbled upon paper.js. it looked super cool and i immediately wanted to build something with it. honestly, it had pretty much everything i needed out of the box. the data types were all there — I just had to use them to build the app i had in mind.
at this point, i had just gotten comfortable with vuejs. i noticed that because the entire app lived inside one huge .vue file. i was planning to split it up into components, but yeah… should’ve done that from the start.
the idea
the concept was to build a whiteboard app where you could create a room that stays active for 24 hours. you’d get a shareable link that you could send to others so you could draw together in real time.
i originally planned to use websockets for real-time collaboration, but the backend never got finished.
what did get built though were some pretty sick front-end tools:
downsides of vectors
i wanted to make some fun pencil and brush tools. but since paper.js is vector-based, everything you draw is made up of points. to improve performance, it creates fewer points and connects them with bézier curves to make the lines smooth. which is awesome — until you try to erase.
it’s not like photoshop or other raster-based tools where the eraser just feels right. here’s what i mean:
layer system
one of the features i’m most proud of is the layer system. i stored every object in layers — just like you’d expect if you’ve used photoshop. looking back, this might be a bit overkill for a whiteboard app, which is usually more about quick sketches than complex compositions. still, i think it’s a dope feature.
i also grouped objects by their tool type. so objects drawn with the pencil tool were grouped separately from shapes, etc. i wanted to add text and image support too, but never got around to it.
conclusion
this was a fun project that really helped me understand how vuejs works. i definitely could’ve taken it further, but the direction i was going in — like building something similar to aggie.io — probably wasn’t the right fit.
still super happy with the design though.
you can check the code here.