Fullstack WhatsApp clone using Next.js, Vercel and Supabase

This project contains all the code to run the FullStack WhatsApp clone using Next.js and Supebase. The codebase was developed for an article series published on Stream's blog:

• Intro: Building a WhatsApp Clone with NextJS & Supabase
• Part 1: WhatsApp Web Clone Tutorial: User Authentication & Chat
• Part 2:WhatsApp Web Clone Tutorial: Adding Video Call Functionality
• Part 3: Code Tutorial: Deploying Our WhatsApp Web Clone Project

The purpose of this repository is to demonstrate below:

• Implementing UI elements by customizing existing Stream Chat and Stream Video components.
• How to implement authorization using Supabase.
• How to integrate Stream Video in a Stream Chat implementation.

To run this code, you need to have an active Stream and Supabase account.

How to use

1. Create a new Supabase project
2. Sign up for a Stream trial account
3. Rename .env.local.example to .env.local
4. Update the values for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from your Supabase project's API settings
5. Update the values for NEXT_PUBLIC_REACT_APP_STREAM_KEY and REACT_APP_STREAM_SECRET from your Stream project's dashboard
6. Run npm run dev to start the local development server

Deploy your own instance

Make sure you have the Supabase and Stream credentials available when you want to deploy to Vercel. The deployment will ask for these environment values:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• NEXT_PUBLIC_REACT_APP_STREAM_KEY
• REACT_APP_STREAM_SECRET

Calling.mov

🛥 Stream Chat SDK

Fullstack WhatsApp clone using Next.js and Vercel is built with Stream Chat SDK for React to implement messaging systems. And Stream Video SDK for React to implement video calling. If you’re interested in adding powerful In-App Messaging to your app, check out the React Chat Messaging Tutorial! And for video, check out the React Video Tutorials!

Related Information

• Stream Chat SDK
• Stream Video SDK
• Supabase Auth and the Next.js App Router
• Next.js Auth Helpers Docs

🤝 Contribution

Anyone can contribute and improve this project following the Contributing Guideline.

Find this repository useful? 💙

Support it by joining stargazers for this repository. ⭐
Also, follow maintainers on GitHub for our next creations! 🤩

License

Copyright 2022 Stream.IO, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.