A Full-Stack Chat Application: Integrating Convex, Supabase, Clerk,Pusher.js and LiveKit

Published on
Arnab Mondal-
5 min read

Overview

Screenshots

Below are some screenshots showcasing key features of the chat application. From real-time messaging to video and audio calls, these visuals highlight the seamless integration of Next.js, Convex, Supabase, Clerk, and LiveKit.You can check out the live version of the chat app here.

image image

Authentication with Clerk

For authentication, I integrated Clerk to handle user sign-up, login, and session management seamlessly. Clerk provides a robust and secure authentication solution, which allowed me to implement user authentication without building it from scratch. I integrated Clerk with Convex for user authentication and storing the user data in the Convex database.

  • Clerk Integration: For authentication, I integrated Clerk to handle user sign-up, login, and session management seamlessly. Clerk provides a robust and secure authentication solution, which allowed me to implement user authentication without building it from scratch.[1][2]
  • Integrating Clerk with Convex: Thanks to the awesome docs of Convex auth/Clerk it did not take much time . The process involves wrapping your layout with ConvexProviderWithClerkand ofcourse ClerkProvider . [1].
  • Setting the Webhook: Setting up the webhook was one of the most challenging parts. Debugging the webhook was a nightmare, but I was able to process the events based on the event type and perform some Internal Mutation to add and update user data in the database. [1][2]

Convex Logic for Messaging

In this section, I implemented the core messaging logic using Convex, which handles real-time communication and data management for the chat application. Below are the key features I integrated:

  • Messaging Functionality: Utilizing Convex, I set up a system for users to send and receive messages in real-time. This includes individual and group chats, ensuring that all users can communicate seamlessly. The backend logic ensures that messages are stored securely and can be fetched efficiently.

  • Sending Friend Requests: The application allows users to send friend requests to one another. When a user sends a request, it triggers a mutation in Convex that adds the request to the recipient's friend request list. Users can view pending requests and take action accordingly.

  • Accepting Friend Requests: Once a friend request is received, the recipient can choose to accept or reject it. Accepting a request involves updating the Convex database to establish a mutual friendship, allowing both users to see each other in their friends list.

  • Uploading Images and PDFs: To enhance the messaging experience, I implemented functionality to send images and PDF files. Users can upload files directly from their devices, which are then stored in a Supabase storage bucket. This involves:

    • Uploading the file to Supabase.
    • Sending a message containing the file's URL to the recipient.
    • Ensuring that file access is secured and permissions are managed correctly.

Adding Typing Indicator with Pusher.js and Next.js Route Handlers

To enhance user experience during conversations, I integrated a typing indicator feature using Pusher.js alongside Next.js route handlers. This functionality allows users to see when their friends are typing a message, providing real-time feedback in the chat interface.

Implementation Steps

  1. Setting Up Pusher.js: First, I configured Pusher.js in the application to handle real-time events. This involved creating a Pusher instance and subscribing to a channel for chat events.

  2. Triggering Typing Events: When a user starts typing, an event is triggered to notify other users in the same chat. This is handled in the front-end component, where I listen for input changes.

  3. Creating a Next.js Route Handler: I set up a route handler in Next.js to manage the typing events. This handler receives requests when a user starts or stops typing and broadcasts these events to other connected clients.

  4. Updating the UI: When the typing event is received on the client side, I update the chat UI to display the typing indicator, showing that the specified user is currently typing.

Real-Time Video and Audio Calls with LiveKit

For video and audio calls, I integrated LiveKit, a powerful real-time communication platform that provides the infrastructure for high-quality calls. With LiveKit, users can initiate video and audio calls directly from the chat application, enhancing the overall user experience.

Key Features

  • Initiating Calls: Users can start a call with their friends by clicking on the call button in the chat interface. This triggers a request to the LiveKit server to establish a connection between the participants.

  • Joining Calls: When a call invitation is received, users can join the call by accepting the request. LiveKit handles the connection setup and media streaming, ensuring a smooth calling experience.

  • Video and Audio Quality: LiveKit offers high-quality video and audio streaming, providing clear communication between users. The platform optimizes media transmission for low latency and minimal packet loss.

  • Call Controls: During a call, users have access to controls for muting/unmuting audio, enabling/disabling video, and ending the call. These features enhance the user experience and allow for seamless communication.

Conclusion

In conclusion, this chat application exemplifies the power of combining various modern technologies to create a seamless communication experience. By integrating Next.js, Convex, Supabase, Clerk, LiveKit, and Pusher.js, I built a robust platform that supports real-time messaging, file sharing, and video/audio calls. Each component plays a crucial role in ensuring a smooth and engaging user experience, showcasing the capabilities of these innovative tools.

For further exploration, you can check out the GitHub repository and experience the live application here.