Real-Time Chat App in React

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
• Chat Component Breakdown
• Step-by-step guide to setting up the chat project

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:

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

2. Navigate to the project directory:

   bashCopy
   cd [PROJECT_DIRECTORY_NAME]
   

3. Install the dependencies:

   bashCopy
   npm install
   

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

   bashCopy
   rm -rf .git
   

5. Now, initialize a new Git repository:

   bashCopy
   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:

   bashCopy
   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:

   bashCopy
   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:

   bashCopy
   npm install -g vercel
   

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

   bashCopy
   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.