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!
🚀 Build your own chat application with Stream for FREE: bit.ly/3y0WRd6
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.
2️⃣ Watch the second part here:
✅ Project Page: www.notjust.dev/projects/tele...
💻 Source Code: github.com/notJust-dev/Telegr...
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclas...
📚 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:
academy.notjust.dev/?...
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/d...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
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

[@notjustdev]

🚀 Build your own chat application with Stream for FREE: bit.ly/3y0WRd6

[@idckdolphins]

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

[@gabrielferrer7696]

Me too just 01:55 PM xD

[@olawaleyahaya1892]

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.

[@notjustdev]

You can do it!

[@TheStudyGuy1]

You’re amazing man ❤️🔥

[@francescopiscani3504]

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.

[@notjustdev]

Yes, that's true! That's also a reason why I love using Supabase

[@michelgerges2678]

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

[@user-pq9xy6yo4k]

Hey bro, when you apply on a job there saying just react native does this mean cli or expo, cause I used to use expo and I wanna switch to cli

[@marvinfok65]

Expo router give me headaches with all the folders with the same file name 'index!! I end up mixing up the files many times! I prefer putting the navigation into a main navigation file with tabs & stacks where I can easily differentiate the files by the name!

[@godwinchibyk639]

Keep up this good work. 👍 😊

[@aymenbachiri-yh2hd]

Thank you, helpful tutorials

[@notjustdev]

You're welcome!

[@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

[@shad-intech]

What theme are you using?

[@emporteme]

Good video Thanks for it

[@notjustdev]

You're welcome!🙌

[@MrSino31]

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 ?

[@ShafiulI]

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

[@sarvamseetohul7146]

amazing bro ❤

[@notjustdev]

Thanks 🔥

[@MrSupermars]

thank you very much

[@notjustdev]

You are welcome🙌

[@Varun-ms5iv]

Hey when I use npx create-expo-app@latest command it is giving me the expo with router navigation config not simple template like yours so I have to use npx create-expo-app --template to select the blank template to get files just like yours. Why is this happening?

[@notjustdev]

The new expo sdk 51 updated the default template. To use the previous blank template, you did it correctly, we should use the -template and select blank

[@Varun-ms5iv]

Thank you @notjustdev

[@bhojpuriyadesiboys1639]

I am also confusing

[@bhojpuriyadesiboys1639]

Do you know full command npx create-expo-app --template

[@ivan3584]

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

[@bhojpuriyadesiboys1639]

But now react native expo change

[@Yagama78]

:D

[@nurmuhammadhassan4573]

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 😢

[@Mossad84]

I prefer supabase over firebase.

[@Innesb]

Supabase uses standard Postgresql, not a proprietary database implementation like Firebase. Also, Supabase can be self-hosted as it’s open source. I’d recommend Supabase for most projects now.

[@nurmuhammadhassan4573]

@@Mossad84 that's is because you know it but 80% of people are not familiar with it

[@alexsumoski]

@@nurmuhammadhassan4573 then learn it

[@ibrahimkouma6751]

supabase is the future