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.
Table of Contents
- React, Next.js, TypeScript
Chat Component Breakdown
Imports & Preliminaries:
We start by importing necessary dependencies. We've also defined a
ChatMessagetype for better type checking and a delete alert message for user confirmation.
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.
Fetching and Displaying Messages:
getDatafunction retrieves messages for the current chat room.
setAvatarsBySenderIdsgathers avatars for the users.
- Messages, along with their avatars and timestamps, are rendered in a scrollable chat view.
handleSendfunction allows users to send messages, which are stored in the Supabase database.
We're using the
useEffecthook to subscribe to real-time changes in the chat messages database. As new messages arrive, they are appended to the local
messagesstate, ensuring real-time display without refreshing.
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.
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.
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.
For a more hands-on approach, follow the guide below.
This section remains the same as the original content unless you need updates here too.
- 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
First, clone the project using:
git clone https://github.com/owolfdev/chat-app-testbash
Navigate to the project directory:
Install the dependencies:
To create a new Git repository, first remove the existing
rm -rf .gitbash
Now, initialize a new Git repository:
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:
git remote add origin [URL_TO_YOUR_NEW_GIT_REPO] git add . git commit -m "Initial commit" git push -u origin masterbash
2. Setting Up Your Supabase Account
Navigate to Supabase and sign up for a free account.
Once signed in, create a new project.
Supabase will provide you with a
supabaseKey. Keep these credentials safe; you'll need them to interact with your backend from your React application.
3. Setting Up Supabase Tables
In the Supabase dashboard, go to the
New Tableand create a table named
chat_messages. This table could have columns like
Create a table named
avatar. Store the user's avatar image url in the
4. Setting Up Supabase Users (Authentication)
In the Supabase dashboard, navigate to the
Add profiles for each user in the profiles table.
Configure your preferred login method(s) (e.g., email/password, third-party providers).
In your React app, integrate Supabase's authentication module. Supabase provides React-specific libraries to make this step straightforward.
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
Install the necessary Supabase libraries:
npm install @supabase/supabase-jsbash
In your React app, initialize Supabase using the
supabaseKeyyou obtained earlier.
6. Deploying the App to Vercel
First, install the Vercel CLI:
npm install -g vercelbash
Navigate to your project's root directory and run:
Follow the prompts provided by the Vercel CLI.
Once deployment is complete, Vercel will provide you with a live URL to access your application.
Consider securing your Supabase functions with appropriate access controls, especially if dealing with sensitive data.
Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.