Home/blog/about/contact

Real-Time Chat App in React

2023-08-05
By: O. Wolfson

Overview of a Real-Time Chat Component in React

Today, I'd like to dive deep into building a real-time chat component using React and Supabase, a robust open-source alternative to Firebase.

View the live demo of the chat component.

Get source code.

Table of Contents

Tech Stack

  • React, Next.js, TypeScript
  • Supabase

Chat Component Breakdown

  1. Imports & Preliminaries:

    We start by importing necessary dependencies. We've also defined a ChatMessage type for better type checking and a delete alert message for user confirmation.

  2. State Management:

    • messages: To store chat messages.
    • currentMessage: Keeps track of the current message being typed.
    • avatars: A mapping of user IDs to their respective avatars.
    • chatId: Static ID representing the chat room.
    • hoveredMessageId: Keeps track of which message is being hovered over for contextual UI actions.

  3. Fetching and Displaying Messages:

    • The getData function retrieves messages for the current chat room.
    • setAvatarsBySenderIds gathers avatars for the users.
    • Messages, along with their avatars and timestamps, are rendered in a scrollable chat view.

  4. Sending Messages:

    • The handleSend function allows users to send messages, which are stored in the Supabase database.

  5. Real-Time Functionality:

    We're using the useEffect hook to subscribe to real-time changes in the chat messages database. As new messages arrive, they are appended to the local messages state, ensuring real-time display without refreshing.

  6. Message Deletion:

    Senders can hover over their messages to see a delete option, which prompts for confirmation using an alert. Upon approval, the message gets deleted from both the UI and the database.

  7. UI Components:

    The chat interface is streamlined with input fields for typing messages and a button for sending. It also provides hover-based UI actions, like deleting messages.

Conclusion

React combined with Supabase offers a potent duo for crafting real-time chat apps. The modular nature of the code presented means you can readily incorporate more features if needed.

View the entire code on GitHub.

For a more hands-on approach, follow the guide below.

Step-by-step guide

This section remains the same as the original content unless you need updates here too.

Step-by-step guide

Prerequisites

  • A Supabase account. You need to have a basic understanding of how to use Supabase's real-time features, row level security, and authentication.
  • A Vercel account. You need to have a good understanding of how to deploy a React application to Vercel.
  • Node.js and npm installed on your machine.
  • A basic understanding of React and Next.js.
  • A basic understanding of TypeScript.
  • A basic understanding of git and github.

1. Cloning the Project & Setting Up Your Own Git Repository

  1. First, clone the project using:

    bash
    git clone https://github.com/owolfdev/chat-app-test

  2. Navigate to the project directory:

    bash
    cd [PROJECT_DIRECTORY_NAME]

  3. Install the dependencies:

    bash
    npm install

  4. To create a new Git repository, first remove the existing .git directory:

    bash
    rm -rf .git

  5. Now, initialize a new Git repository:

    bash
    git init

  6. Create a new repository on GitHub (or your preferred Git hosting service). Then link your local repository to this new remote repository and push your code:

    bash
    git remote add origin [URL_TO_YOUR_NEW_GIT_REPO]
git add .
git commit -m "Initial commit"
git push -u origin master

2. Setting Up Your Supabase Account

  1. Navigate to Supabase and sign up for a free account.

  2. Once signed in, create a new project.

  3. Supabase will provide you with a supabaseUrl and supabaseKey. Keep these credentials safe; you'll need them to interact with your backend from your React application.

3. Setting Up Supabase Tables

  1. In the Supabase dashboard, go to the Table Editor.

  2. Click New Table and create a table named chat_messages. This table could have columns like chat_id, content, id, sender_id, sent_at, and updated_at.

  3. Create a table named profiles with columns user_id and avatar. Store the user's avatar image url in the avatar column.

4. Setting Up Supabase Users (Authentication)

  1. In the Supabase dashboard, navigate to the Authentication section.

  2. Add users.

  3. Add profiles for each user in the profiles table.

  4. Configure your preferred login method(s) (e.g., email/password, third-party providers).

  5. In your React app, integrate Supabase's authentication module. Supabase provides React-specific libraries to make this step straightforward.

  6. Examine the source code for some guidance. You may well need to do some of reading on supabase authentication to get these steps right.

5. Integrating Supabase with the React Project

  1. Install the necessary Supabase libraries:

    bash
    npm install @supabase/supabase-js

  2. In your React app, initialize Supabase using the supabaseUrl and supabaseKey you obtained earlier.

6. Deploying the App to Vercel

  1. First, install the Vercel CLI:

    bash
    npm install -g vercel

  2. Navigate to your project's root directory and run:

    bash
    vercel

  3. Follow the prompts provided by the Vercel CLI.

  4. Once deployment is complete, Vercel will provide you with a live URL to access your application.

Final Thoughts

Consider securing your Supabase functions with appropriate access controls, especially if dealing with sensitive data.