Dylan really likes to use MS paint to illustrate diagrams for his friends. However, he thought it would be really fun if they could collaborate on his awesome drawings.
Also, Jen and Dylan were learning React and NodeJS through a club at UCSB and this was the perfect project to see how much they learned through the workshops.
What it does
Sketched Out is a collaborative whiteboard using socketIO with drawing tools which allows multiple users to draw simultaneously. When you click ‘Create Room’, you are given a unique 6-letter room ID for your friends to use to join your room. They can undo changes, clear the board, increase or decrease brush size, and change the color of the brush. Draw away!
How we built it
SketchedOut is implemented using HTML, CSS, React, Socket.io, and Express. For the back-end portion, we used NodeJS and the Socket.IO library. Using Socket.IO, Dylan and Jen opened a real-time communication channel between the web browser and the server. After the initial set-up, we wrote functions to listen for drawing events, retrieve the data to broadcast, and send requests to the server whenever the client-side socket emits the signal. On the server-side, we made the connection, randomly generated a room ID, and executed the commands, emitting data back to the client. Tanner worked on the frontend and linked it to the storing of the whiteboard. He used React to create the canvas and components, make the drawing tools customizable, and style the webpage.
Then, everything was deployed on Heroku using 2 differed repositories: one for the frontend React server and the other for backend Express and the main socket server.
Challenges we ran into
Jen: This was my first time working with web sockets so setting up the communication between client and server so that the whiteboard would emit to a specific user was confusing at first. Also, frontend debugging was a lot more difficult than I expected.
Tanner: I’ve never had any prior experience with web developing languages so it was difficult at first learning what each component in the language does and implementing it into the program.
Dylan: I’ve never worked with Socket.io before and using Express on its own (without being part of the create-react-app). Setting up the initial websocket server took so long! And then deploying it was a huge challenge, as we had to figure out how to put both the frontend and backend on Heroku.
Accomplishments that we're proud of
Jen: I’m proud that we were able to create unique rooms that multiple users could join in and draw on a whiteboard simultaneously. It was very rewarding to work with my group members to get a viable product.
Tanner: Creating a webpage that held many stylistic elements was something that I was proud of. It was extremely rewarding after getting the canvas to work and managing to get most things we set out to accomplish when planning out the idea.
Dylan: Setting up the websocket server after 5 hours of trying was immensely satisfying. Progress seemed to soar from there. And then, updating the board was super satisfying as well.
What we learned
Jen: I learned how web sockets worked and how they interacted with React components.
Tanner: From this hackathon, I was able to better understand the Git software and its functionalities especially when developing as a group. It was also my first time using the HTML and CSS language and experiencing front-end development.
Dylan: I broadened my knowledge of React, utilizing useRef and useEffect for the first time. This is also the first in-depth node project I’ve created as well and creating a dedicated “backend” server and deploying everything on Heroku successfully.
What's next for SketchedOut
We want to create a database to store the whiteboards so that each user can access their saved whiteboards and download them at any time. We’d also like to reduce lag time, send notifications to all the users in a room upon joining, and list usernames of each collaborator in the current room somewhere on the page.