Building a Telegram Clone with React Native, Expo, Stream and Supabase

Learn how to build a chat application like Telegram, using React Native, Expo and Stream!

In this tutorial, we'll use the powerful capabilities of React Native and Expo to build a fully-functional realtime messaging app complete with complete chat functionalities using Stream SDK. We will walk through designing the UI layout of the app, structuring everything in components, and putting everything together. We will also implement navigation between screens, header bars, and tab bar, and will implement a custom database using Supabase. This is a perfect opportunity to follow along and build this application together with us then add it to your portfolio.

📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- React Native setup with Expo
- Implementing Stream Chat for messaging functionality
- Integrating Stream Video SDK for audio and video calls
- Simple User Interface(UI) design for a chat application
- Build a Custom Database using Supabase

📚 Enroll NOW in *The Full-Stack Mobile Developer course* and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:

*💬 Join the notJust Development gang and let's build together:*

Timecodes:
0:00 Intro and Project Overview
3:29 Short Demo of the Application
5:58 Setting up a Fresh New Expo Project
8:45 Enabling Typescript in our Application
11:39 Setting up Expo Router using Navigation
35:05 Installing the Stream Chat SDK
33:38 Creating the Chat Client UI using Stream
1:17:19 Setting up the Stream Chat Provider
1:26:54 Implementing Authentication with Supabase
1:57:33 Uploading a Profile Picture Functionality
2:03:06 Connecting the Supabase User to Streamchat User
2:18:03 Connecting the User avatar to stream chat
2:24:38 Building the List of Users Screen
2:36:48 Starting a Channel with a User Functionality
2:58:02 Creating Realtime Chats with Live Viewers
3:07:45 Tokens and Authentication using Stream
3:09:46 Creating a Local Supabase Database
3:19:30 Supabase Edge Function for Server-Side Stream Token Generation
3:46:32 Installing Optional Dependencies and Packages
3:56:04 Outro

Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #telegram #reactnative

[olawaleyahaya]

I love your videos, I love that you build new projects constantly. I'm inspired, I hope to be better one day, I'm trying.

[francescopiscani]

From the little that I know from Supabase, one thing so far that I like very much is that batteries are included. Is nice to see that it doesn't force the user to download a zillion separate packages. This will give it a head start in many projects vis-a-vis other libraries.

[idckdolphins]

I woke up at 6 am to this... xD gotta love youtube algorithm

[TheMarcopoloscurse]

Vadim thank you for your tutorial, it was great. I ran into a problem where the code works but it always redirects me to the index page. this happened once I was already authenticated. Being that the home index page did not have a back button as I was following your tutorial step by step I did not think to add a back button because you didn't do it in your video tutorial. Now I am stuck because being that I am already authenticated it bypasses the login page and I cannot get out of the page. Everytime I reload it bypasses login and it goes back to the index page. Please do you have any ideas.

[GodBeast_FireOnHell]

Hello sir, I'm having a little issue while rendering DP of other users in tabs index
I don't know why my tabs index where all channels are visible, I am not able to see the user profile photo.

I'm using a expo in my android physical device
any suggestion why this is happening?

Thanks for this good lecture

[ShafiulI]

I faced a problem which is "cant read property token of null". What should I do to fix it?

[MrSino]

hello Sir , since i installed expo sdk 51, my app crashes directly on ios, and for the android : it works fine for about 30 secondes, then no backend call works, can you help me please ?

[matheusspinosa]

I'm think so much in buy a membership of your channel now

[aliza.aslam]

how is your code working without downloading the stream-chat-expo beacause code is not working without that dependency installed

[michelgerges]

Everything is good your tutorials and videos are amazing but i don't know if it's just me or anybody else i used to work with react native cli for 2 years and now i feel expo is a hassle especially with expo router i got used to react navigation and the react native cli env i know that expo is easier and the community is moving towards it but let's see if its going to replace react native cli in terms of production apps

[ivan]

When i install the app using your command i get 1000 files and folders...

[Proximity_Bondage]

why dont i have App.js when i make project...
i have this problem

[voila_az]

вот со стримами у меня пока беда. Никак не научусь их делать. спасибо за видео и за ваши труды!

[nurmuhammadhassan]

I don't know why you choose to use supabase many people are not familiar with it, and alot would like to implement the video calling functionality in their app, now it's means if you really need to implement this tutorial in your real world app u have to learn superbase which is discouraging, u should have used something like firebase 😢

[danielzaniewski]

Welcome,
I have problem with env file and process.env EXPO_PUBLIC with api key and supabase.
I have request to You @notjustdev.
Could You explain it ? How correct implement and config env please?
Thank You