A project intended to be fast.
This is a real-time web chat application with a focus on performance. I remembered one project I made in university similar to this one, consisting of making use of WebSockets. At that time, I just made a simple chat using React and Socket.io, and I got fascinated by the utilities of WebSockets for real-time applications.
So I thought one day to resume that little project. I started to do some research in order to verify the possibilities of making a web chat using Next.js, which is a framework I consider to have much potential in web performance due to SSR. That’s where I found a channel of a software developer from Germany. The channel is "Josh tries coding" and had a video on how to make a real-time chat with Next.js.
Making a project following a tutorial is controversial because some people say that nobody learns by watching other people coding with no errors and have everything planned doesn’t give you any experience. But in my personal point of view, it would depend more on the creator’s structure of the content than the tutorial itself. In the case of Josh, he explains everything and why he is taking some actions, and during the video, he got errors and explained his failures. He makes diagrams and tries to teach the logic any project needs.
As engineers or developers, we need to have great planning before starting a project. Making a project from zero, changing and adding features through the development is not the best way to develop any application, and it’s one of the best lessons I took from the channel. The importance of previous planning, diagramming, and even the choice of the stack of technologies to be used is crucial to the correct behavior of our project.
I have enjoyed making this project and now I could amplify a little bit my tech stack because I learned about interesting technologies and services. One of them is Upstash, a serverless data platform to create a database with Redis API. I would lie if I said that now I’m a pro with Redis, but I finally had the chance to meet the technology and see its benefits and cons. Knowing the concepts behind Redis and why it’s so fast, it fits perfectly with the type of application that from the beginning had a performance focus due to being a web chat. The second technology I have a little bit of knowledge of is Pusher. Bi-directional hosted APIs that are flexible and could be scalable. I understood the decision of Joscha to use this and reside on the functionality of Next.js, that division between server and client side which Pusher works similarly to, communicating server and client information, creating an amazing real-time experience on this project. With all of that and some pretty cool styling, we could get a really good web application like this one.
I amplified my tech stack, I kept learning cool styling stuff and gaining experience as a front-end engineer using Next.js. I say this because, during the development of “MTBCHAT,” I had to do some research and adapt some things to the new version of Next.js. At the time of the video, the current version of Next.js was 13, and things like the app routing system file, the server actions, and other features were kind of new or experimental. Now the server actions are stable, and I found some errors due to Next.js interpreting client and server more strictly than at the time of the video. So things like the implementation of an authentication method with Auth.js are different. Some functionalities are now divided into server actions to make the code cleaner, and the styling was modified. Also, a dark mode switcher was added. Some performance changes were also made, all to make this a really professional project.
