What is Lobby Chat?
Tags: javascript, react, node, supabase
Published: 2021-06-18 01:30:38

I have always been an extremely ambitious person, I won't deny that, but when I started developing Lobby Chat, I had no idea what it would grow to be. What was supposed to be a small side project to learn new tech quickly became a grand vision and roadmap for a large platform. A VOIP, instant messaging, and content sharing platform for gamers. If that sounds familiar, that's because it's a competitor to discord. That's right, for my first endeavor of launching a platform I decided, initially as a solo developer, to go up against one of the most popular apps on the market. I told you I was ambitious!



##Features

While we have a roadmap with a list of features a mile long, the goal right now is MVP with the core features being fast, smooth, and reliable. I will cover those below. We are also always open to feature ideas so feel free to let us know what you would like to see in Lobby Chat.

### Instant Messaging

Instant messaging has been done a million times, and thousands of different ways. We are not looking to reinvent the wheel here, just to make the wheel go as fast and smoothly as possible. our instant messaging will be used in private direct messages, private group messages, and in public chats within a lobby. This means we need them to be as fast and smooth as possible and allow the users to properly express themselves. A robust system of reactions, quoting, and nested replying will allow just that.



### Content Sharing

Existing platforms tend to have a content-first or conversation first mentality. Whether it be a Reddit like platform that puts the content first with conversation behind that or a discord like platform that puts conversation first with the content being shoved in the middle of the conversation. Lobby Chat will take a hybrid approach, allowing content such as a video, news article, or image to be shared within a conversation but also host its own conversation within the content object. Users will be able to nest their conversations about a piece of content shared within a channel. Moderators or owners of lobbies will also be able to set a channel to be a content-only channel. This we'll set the top-level conversation to only be shared content and all chats will have to be nested inside the content object.



### VOIP

Voice chat lobbies are the most technically exhausting feature coming to early access Lobby Chat. Again, we are not looking to reinvent voice over IP chats just to deliver a smooth snappy experience for our users.



### Gaming Integration

Core to this idea will be our gaming features which include listing your gaming library with a rating system on how frequently you play games and to what degree you are looking for friends to play them with you. Another gaming feature will be a schedule/calendar system to coordinate with your squads of friends, your streaming community, or your competitive eSports team.



## Tech Stack

I'm sure most of you are reading this article for this exact section. Well, buckle up because I am about to nerd out and take you into the weeds of the tech we are using here at Lobby Chat!



### Front End

Front end is my bread and butter. This is where I started in web development and still where I prefer to spend most of my time. Typescript React is the front end of choice here at Lobby Chat. Initially, we were using TailwindCSS for styling but after discovering Chakra UI we fell in love. We quickly dropped Tailwind and implemented Chakra throughout the entire app. I cannot give enough love to Chakra. If you have not tried it, I strongly encourage you to do so! We are using React Router for routing, and Apollo GraphQL for our data fetching that does not need to be updating real-time. For our data that does need to be real-time we are using Socket.io and Supabase. I will give Supabase plenty of praise in the backend section, but even if you want to stay in front end only, try it! Lastly, I want to mention redux. Yeah, currently we are using it. That being said we do not see a long future for redux in Lobby Chat.

Now, I know you are thinking "That's all just web app tech." and you are correct. Currently, the main development focus is on the web app. The development of the desktop and mobile apps are starting soon but we feel we can deliver a web app that does anything and everything a desktop or mobile app can do, maybe even more!



### Back End

At first, I wanted the backend for Lobby Chat to be one monolith and everything to flow through that single point. We quickly learned that not only would that be a headache for us but it wouldn't result in the best product for our users. For our database, we are using a Postgres database in the cloud. Postgres was our choice at first simply because it was open source and pretty popular. Then we discovered why it was so popular... because it's awesome! For our data that does not need to be updating real-time we are using Prisma and Nexus to build our strictly typed graphql backend. For our data that is updated real-time we are using Supabase. Their WebSocket real-time updates are amazing and very simple to use, we love it! I must also not forget that our entire backend is in typescript and strictly typed from top to bottom!



## Gamers Promise

One of the major principles at FiveXFive is that it is a platform for gamers, by gamers. We are not out looking to be a general-purpose chat application and water down our product to appease those outside the gaming community to raise our companies value. We know and respect our audience and believe if we deliver the best product for those users we will be more valuable in the end, especially morally.



## Early Access

We are looking for testers for our closed early access coming soon. If you are interested in being part of the first-round testers for FiveXFive please contact me!



Thank you for reading, I hope you enjoyed it and hope you have a great day! And as always, never stop playing!