Inspiration
How many collaborative whiteboards are out there in the world? The only thing that the both of us could think of was Jamboard, because coincidentally, our teachers introduced it to us. Thus, we built the world's worst mini collaborative, semi-interactive, we-hope-to-god-it's-fully-functioning, online whiteboard.
What it does
Imagine a big sheet of paper. Now imagine that sheet of paper just plastered on the Internet, with ways to interact with it just like you could in real life (well, not really, but you get the idea). Now imagine that sheet of paper only being compatible with a couple of colours. Now imagine that paper being drenched in water. Now what do you have? A collaborative online whiteboard, but it's easily broken.
How we built it
I (foop/Weiyi) whipped up some server magic using JavaScript and socket.io, as well as some Express functionality, whilst James (or kombuken, he makes the best nicknames), read up about sockets and Express apps. Both of us then met up on Zoom, watched a bit of The Coding Train (wonderful channel, there's a TON of coding tutorials and guides there), and got to work. The tutorial we followed can be found here
In about an hour, we got the Worldboard up and running on our machines, and we've got the code hosted on both of our Github accounts.
Challenges we ran into
There were definitely some times where both of us got confused. There were some mishaps in understanding the 4-part tutorial series from The Coding Train, as the source code on Github was different than what was shown in the guide, but we overcame that in no time.
Admittedly, we also got a bit confused as to how we wanted to approach the "Hack with Another Hacker" challenge, since the instructions are a bit vague. We settled on both of us writing our own write-ups and submitting the project separately first to the aforementioned challenge category, with me (still foop/Weiyi) managing this version of the project that'll be submitted to the "Make an Online White Board" challenge.
Accomplishments that we're proud of
Making a whiteboard/drawing website/canvas was a project that I wanted to do for a pretty long time, and it was I who suggested that we followed The Coding Train's
What we learned
This was the first time that both of us have heard of p5.js. Turns out, it's pretty useful for managing online drawing canvases and whatnot. James did have to do some research about Express and sockets since he was pretty new to this sort of stuff, and we had a lot of fun learning about p5.js.
What's next for Worldboard
Both of us have ideas that we want to do for Worldboard's future. Personally, I think a save feature/function will be extremely useful, and The Coding Train actually already has a tutorial for that (Firebase tutorial).
Built With
- css3
- express.js
- friendship
- html5
- javascript
- node.js
- p5.js
- socket.io
