This is going to be a thorough step-by-step guide for building a single page chat application using React, TypeScript and Socket.io.
If you want to skip the reading, here is the GitHub repository with a detailed README, and here you can check the live demo. In order to play with it, you need to open it in two different browsers (or browser tabs) or devices (you may use your computer and your smartphone) and chat with each other.
When you are about to start a new project, it’s a good practice to do initial research about the technical stack you are planning to use.
In other words, you may want or need — especially if you don’t have prior experience with it — to investigate on each technology you will be using. I recommend doing that separately. Take one of the them and create a small app that you can play with.
If you need to check how the integration of two or more technologies is going to work in a real project — then you might want to include them all together in your “research-test-play” app — but preferably do your research one at a time.
When I started thinking about making this chat application, I did exactly what I described above. I haven’t had recent experience with TypeScript and none with Socket.io, so I had to take a look at those and get myself familiarized with what is their current state. As my plan was to use React as a main UI library, I needed to see how it was going to work with the other guys in the equation. So I did.
I created two small applications (repos here and here) with these technologies, just to be able to play with them and learn how could I use them in my future chat application.
After my initial research was done I was able to start thinking and planning the implementation of my main chat app.
https://cdn-media-1.freecodecamp.org/images/TjBOPkJjQ11wSe3gxxczgRYplWFpQnx5vmfd
Photo by Hutomo Abrianto on Unsplash
Usually what people mean when they say “high level plan” is that they are looking for the big picture. Which means we need to create a rough plan of our execution and define our main pillars, but without going into too much detail. Now when we have clear idea of what to do, let’s start doing it! ?
Note: From this point forward I will be assuming that you are following my steps as I describe them, hence I will be writing in the second person. **?
We already mentioned the main technologies we will be using, but let’s define a proper list of all of them here:
create-react-app my-app --scripts-version=react-scripts-ts) — a UI library we will use for building our application’s user interfaces.