DEV Community: Akash Singh

UI Improvements and Bug Fixes

Akash Singh — Thu, 19 Dec 2024 23:06:22 +0000

I worked closely on UI to make the whole UI 100% compliant with mobile. This after fine-tuning layouts and components for responsiveness across different screen sizes. Additionally, I spent time fixing a handful of bugs that I ran into in the chat and login flow, such as the layout breaking the UI on smaller screen sizes or inconsistent behavior in UI.

The app now delivers a seamless, consistent experience across all devices using CSS media queries and component optimization. The chat and login pages are more intuitive and all interactions are fluid, so users have no trouble accessing the app, whether they’re on desktop or mobile. To enhance overall user experience further and ensure the app is ready for universal use, other improvements included:

Typing User Indicator (Bug Fixes and Optimization)

Akash Singh — Thu, 19 Dec 2024 23:03:59 +0000

I started out passing typing user IDs in a HashSet but this caused issues when dealing with multiple users in varying chat rooms. Despite the efforts, the data structure could not effectively manage typing states for different rooms, leading to problems like not tracking users correctly.

Where I used HashMaps instead, where the key was the room ID, and the value was a HashSet of user IDs typing in that room. Further That's the neatest: it organizes the code better, and reception of the typing indicators will be shown for each chat room.

Due to this update, the method of tracking the typing activity becomes more reliable and makes it a much better experience for users while eliminating any bugs experienced before. The new structure not only increased performance by minimizing checks that do not need to be done and kept typing data in memory per room, making the application more scalable and stable.

Image Sharing (UI Improvements and Bug Fixes)

Akash Singh — Thu, 19 Dec 2024 23:00:33 +0000

So, I added the Image Sharing feature and thought some aspects of the UI were lagging and there were some CSS issues. Images weren’t scaling correctly on different screen sizes from time to time they would overlap with text or other elements. To fix this, I re-refined the CSS styling to ensure that the images retained aspect ratio and showed up well on the browser. I implemented a lightbox overlay effect to allow users to see larger images without breaking the conversation.

I also sharpened state management on the frontend, better utilizing React's useState and useEffect hooks to allow us to handle image uploads and rendering. This ensured that images were displayed only after being successfully uploaded along with progress indicators for a better experience. This change was developed in parallel with significant improvements in UI consistency and performance of sharing on the specific image.

Video Sharing (Improvement and Bug Fixes)

Akash Singh — Thu, 19 Dec 2024 22:56:57 +0000

For the initial implementation of the Video Sharing feature, I realized that there were a couple of bugs and performance issues to solve. The delay with the video playback and UI freezing while uploading larger video files was the biggest issue. This was most pronounced in peak usage periods when several users were uploading multiple videos at the same time.

To fix it, I corrected the video upload handling to make it asynchronous and to optimize the backend logic for how the video is saved.Would love to hear some feedback on the overall structure of it. Frontend test, where I improved the video preview function: now, only the initial few frames of a video are loaded (made use of lazy loading) so that the UI does not freeze up while other elements are being processed.

I streamlined the design of the video messages so that they appeared consistently and were easily playable within the chat window. This was further improved, and now we have basic interactions of the video (play, pause, volume). These enhancements make the video sharing experience more seamless, reliable, and intuitive.

Auth to Improve Socket Connection Security

Akash Singh — Thu, 19 Dec 2024 22:48:54 +0000

I added authentication for higher proof of socket, to make the application more secure. io connections. Thus, only authenticated users can make a WebSocket connection to the server, making it impossible for unauthorized users to join the chat groups.

I integrated JWT tokens with NextAuth. js, which sends the token from the client to the server at the time of the WebSocket connection handshake. The token is verified on the server side which confirms if a user is actually authenticated and the request is valid and based on that user can connect to the respective chat group(s). If the token is missing or invalid, then refuse the connection.

Background verification introduced for users joining the chat rooms, and only verified users will be able to access them, which, protects private conversations and information. This also improves the security in the chat application and helps in protecting the anonymity and data of the users.

Video Sharing

Akash Singh — Thu, 19 Dec 2024 22:46:46 +0000

I also implemented Video Sharing capability in the chat application so that users can also send video files (MP4) in their message to enhance the user experience. Much like image sharing, the video upload process is also managed through Supabase Storage, and users can upload video files from the frontend directly.

After the upload, the URL is sent to the backend and saved to the PostgreSQL database with the message using Prisma ORM. The video is embedded in the chat UI on the frontend, which lets users click and play the video within the chat window directly.

It was built in a way that is scalable, so video uploads do not interfere with the performance of the real-time messaging system. By supporting both images and videos, it allows for a more rich communication that adds a different dimension to the chat experience by enabling users to share multimedia content with each other.

Typing User Indicator

Akash Singh — Thu, 19 Dec 2024 22:43:42 +0000

I added a Typing User Indicator to the chat application to allow a better real time interaction. It helps us see when someone is writing a message in the chat. It More interactive and responsive experience.

I utilized Socket.io to emit typing events between users in a chat room. When the user starts typing, it emits typing event to the server which then broadcasts to all other connected clients in chat group. On the frontend, a little "User is typing...” indicator appears next to the name of the user in the chat interface. The indicator disappears when the user stops typing or sends the message.

The working of this feature is based on a very small time slot to see if typing is happening, all this works seamlessly else the system will never update anything and put itself with a heavy load pressure on the network. This feature makes it feel more alive and interactive, similar to modern messaging applications which are expected to be real-time.

Image Sharing

Akash Singh — Thu, 19 Dec 2024 22:37:25 +0000

As user engagement increased I added the Image Sharing functionality to personalize the chat environment; so the end-users can send images with their chat messages Firstly, this process begins with users to upload an image from the frontend. I used Supabase Storage for image uploads, where images are kept in separate buckets based on a naming convention with group Id, user Id, and timestamp.

Once the image is uploaded, the URL is sent to the backend and saved with chat message in the database. The frontend takes images and retrieves their URLs and embeds them in the chat messages. It greatly improves user experience and allows images to be handled accordingly as images can be stored on Supabase which has most scalable storage. The system implements highly performant image handling, supporting uploads of multiple images — all at once — while keeping the chat highly responsive. This adds a dynamic, feature-rich aspect to the chat app.

Online/Offline User Detection

Akash Singh — Thu, 19 Dec 2024 22:33:41 +0000

Added Online/Offline User Detection to chat application to engage users and show real time status. This feature uses Socket. io and Redis to monitor and share user activity among all connected clients.

During connection / disconnection, the user's status is updated to the PostgreSQL database using Prisma ORM and then broadcasted to chat groups. In addition, I added a Redis cache to limit the database fetching, managing this real-time user status.

On the frontend, we added visual indicators (e.g., green dots for online users) to chat group and user lists. Through these updates, users are well a where that who all are active in chat groups currently, bringing interactive, fun and engaging feel to using chat feature. It also allows for future rollout of additional real-time features like typing indicators and user action logs.

Kafka Setup for Scaling

Akash Singh — Thu, 19 Dec 2024 22:30:29 +0000

Next, I added Kafka to the chat application architecture in order to improve scalability and reliability. Kafka is a distributed event-streaming platform, allowing techniques for distributed messages on servers. Messages sent via Socket. Into Kafka: Kafka streams and topics Therefore, all messages from socket.io is now published into Kafka topics with durability and fault tolerance guarantee.

Backend has been modified to add Kafka producers to publish messages and consumers to process those messages. This means messages can be reliably distributed and stored, and even survive high traffic or server outages. More so that, we can use Kafka in a way that also allows us to plug and play certain features: imagine analytics where we process the chat data, for example. Kafka decouples the real-time messaging logic from the storage and processing layers, ensuring that the app can scale easily and maintain performance as the user base grows. This is a critical step towards making the app enterprise-ready and able to scale up for large-volume traffic without breaking a sweat.

Chat UI & API

Akash Singh — Thu, 19 Dec 2024 22:27:44 +0000

As the real-time feature was already created, I was now able to develop the Chat UI and its API to enrich the user experience. React and Material-UI were utilized to create the Chat UI that provides a decent way to send and view messages. These are some of the key components of a messaging UI: message input box, scrollable message display area, typing/active indicators, etc.

My backend consisted of APIs with which messages were stored and retrieved. Messages are sent via WebSocket for real-time delivery, and they are stored through Prisma ORM in PostgreSQL database for persistence. The API got pagination to load the chat history efficiently. The above combined with real-time updates using sockets, promise to deliver a seamless experience using the messaging platform, and APIs that scale well for further features and increased incoming and outgoing traffic.

Socket.io and Scaling

Akash Singh — Thu, 19 Dec 2024 22:26:12 +0000

To support real-time messaging, I also added Socket. Integrate the chat app with socket io, a WebSocket library, in order to enable client-server communication using WebSockets. It allowed users to directly send messages in real time in their chat. I made the back end in such a way that multiple connections could be handled, thereby I can scale it.

I implemented Redis as a message broker for communication between multiple Socket to scale up io instances across servers. This allows you to create some level of scale so that the app can handle more and more users and traffic without compromising performance. I also established methods to publish events such as new messages or actions taken by users to all clients connected to a chat room. If you optimize for this, you make the chat app stable and ready for the scale of adding more features, like typing indicators and online/offline status tracking.