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:

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

Create a new Supabase project
Sign up for a Stream trial account
Rename .env.local.example to .env.local
Update the values for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from your Supabase project's API settings
Update the values for NEXT_PUBLIC_REACT_APP_STREAM_KEY and REACT_APP_STREAM_SECRET from your Stream project's dashboard
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

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

YasinYA/fullstack-nextjs-whatsapp-clone