Added realtime chat where you can send and receive text messages with almost no latency to/from your friends on MemeBoard!
The base layout of all the chat pages has a sidebar of the left that displays all your friends, and clicking on them takes you to the different direct message channels
On each chat channel page, you can see your friend’s profile picture, username, and number of followers/following at the top, similar to TikTok’s chat
Your friend’s messages show up on the left while yours are highlighted and on the right, similar to texts, and each message has a timestamp
Integrated a Redis database for quick message retrieval, caching, and ease of use for the Upstash realtime library that uses Web Socket under the hood to push realtime updates/events to send and update messages in realtime
I already made a much simpler chat app but with a slightly different backend stack a while ago, so it wasn’t that difficult rewriting everything in Next.js and adding additional features
There are actually a lot of considerations and logic that go into making a chat app that you normally wouldn’t think of unless building your own chat, so this was an interesting and fun experience coming up with solutions for unexpected problems
Updated schema and types
I’ll actually optimize the site and implement responsive design after the main app is finished, so the current layout looks terrible on small screens and I apologize for the terrible layout in the video
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.