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

Рет қаралды 30,162

Күн бұрын

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

Пікірлер: 44

@notjustdev 21 күн бұрын

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

@idckdolphins 3 күн бұрын

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

@gabrielferrer7696 2 күн бұрын

Me too just 01:55 PM xD

@michelgerges2678 25 күн бұрын

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 25 күн бұрын

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 14 күн бұрын

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!

@TheStudyGuy1 26 күн бұрын

You’re amazing man ❤️🔥

@francescopiscani3504 22 күн бұрын

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 20 күн бұрын

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

@olawaleyahaya1892 26 күн бұрын

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 26 күн бұрын

You can do it!

@shad-intech 25 күн бұрын

What theme are you using?

@TheMarcopoloscurse 20 күн бұрын

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.

@godwinchibyk639 26 күн бұрын

Keep up this good work. 👍 😊

@aymenbachiri-yh2hd 20 күн бұрын

Thank you, helpful tutorials

@notjustdev 20 күн бұрын

You're welcome!

@emporteme 25 күн бұрын

Good video Thanks for it

@notjustdev 21 күн бұрын

You're welcome!🙌

@ShafiulI 8 күн бұрын

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

@GodBeast_FireOnHell 23 күн бұрын

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

@MrSupermars 6 күн бұрын

thank you very much

@notjustdev 2 күн бұрын

You are welcome🙌

@sarvamseetohul7146 16 күн бұрын

amazing bro ❤

@notjustdev 16 күн бұрын

Thanks 🔥

@MrSino31 18 күн бұрын

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 ?

@Varun-ms5iv 21 күн бұрын

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 21 күн бұрын

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 20 күн бұрын

Thank you @notjustdev

@bhojpuriyadesiboys1639 19 күн бұрын

I am also confusing

@bhojpuriyadesiboys1639 19 күн бұрын

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

@ivan3584 21 күн бұрын

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

@bhojpuriyadesiboys1639 19 күн бұрын

But now react native expo change

@nurmuhammadhassan4573 25 күн бұрын

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 25 күн бұрын

I prefer supabase over firebase.

@Innesb 25 күн бұрын

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 25 күн бұрын

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

@alexsumoski 23 күн бұрын

@@nurmuhammadhassan4573 then learn it

@ibrahimkouma6751 22 күн бұрын

supabase is the future