After completing my full stack software engineering bootcamp, JavaScript frameworks felt like ✨magic✨ and I wanted to understand how they worked. This began my journey with Vanilla JavaScript where I made a series of projects for my portfolio (including the site itself) using Vanilla JS. One of the things I love about the these projects is that they still work great today. I've been able to move them from different hosting providers and once they're loaded and I've got my DNS set up we're off and running.
With the potential to start job hunting looming, I thought it would be a good time to dig back in to React since it's been over a year since I used it last. It seemed like remaking some of these former projects in React with TypeScript would be a fun challenge where I didn't have to come up with an idea for a whole new project.
Canvas Playground
Canvas playground was a project I put together during the summer of 2018. It used:
- Vanilla JS
- Socket.io
I had this running on a server in Linode for quite a long time but have since decided to move away from Linode in favor of AWS. It's not currently working since I need to do some work to get the server running on an AWS EC2 instance.
New project goals
As I'm starting again, I'd like to:
- use React with TypeScript
- host everything on AWS
- use socket.io
- add some sort of permanent storage solution for drawings
- ask users to enter their name & display who is drawing
Stretch goals:
- incorporate canvas rooms
- user tokens so users can come back and see their drawings
- push my UI instincts out of my normal box
Getting started
Deciding to write as I work through this process was made after I started, so I've already made some progress on the project and we'll be playing some generalized catch up here. I'm planning for future posts to go in to more detail about what I'm doing.
I typically love to wireframe if I'm starting on something new, but since this is something I previously made, I'm starting with a general idea in mind with things I know I wanted to change/improve from last time.
Progress so far
Front End
The React app is up and running using TypeScript. I've started with creating the general layout and minimal styling so far.
To get Socket.io working with React, Socket.io docs have a really helpful guide. I leaned on this pretty heavily to get the sockets working.
On the UI side of things, I was struggling with getting the mouse events for mouseup, mousedown, mousemove working quite right with the canvas and React. I knew I needed to be using hooks, but wasn't sure what would be the best method for them. After some googling I ran across this tutorial which was exactly what I needed. I had not previously used useCallback or useRef and this was a great way to learn more about these two hooks.
Once I got the canvas events drawing the way I wanted, it was time to send the events to the server so they could be broadcast.
Back End
Getting the server going took me longer than I thought it would, I hadn't realized how long it had been since I've started a server from scratch!
As a user is drawing it's sending an event to the socket server which is then emitting that back out to all of the connected sockets. I'd like to update this so it's using the broadcast feature since it doesn't need to go back to the original connection.
Up Next
- updating the server to use Node with TypeScript
- user tokens and storage options (Maybe DynamoDB?)
- hosting the socket server on AWS
Top comments (0)