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

Пікірлер: 44

  • @notjustdev
    @notjustdev29 күн бұрын

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

  • @idckdolphins
    @idckdolphins11 күн бұрын

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

  • @gabrielferrer7696

    @gabrielferrer7696

    9 күн бұрын

    Me too just 01:55 PM xD

  • @olawaleyahaya1892
    @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

    @notjustdev

    Ай бұрын

    You can do it!

  • @francescopiscani3504
    @francescopiscani350429 күн бұрын

    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

    @notjustdev

    27 күн бұрын

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

  • @TheStudyGuy1
    @TheStudyGuy1Ай бұрын

    You’re amazing man ❤️🔥

  • @michelgerges2678
    @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

    @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

    @marvinfok65

    22 күн бұрын

    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
    @godwinchibyk639Ай бұрын

    Keep up this good work. 👍 😊

  • @shad-intech
    @shad-intechАй бұрын

    What theme are you using?

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd28 күн бұрын

    Thank you, helpful tutorials

  • @notjustdev

    @notjustdev

    27 күн бұрын

    You're welcome!

  • @emporteme
    @emportemeАй бұрын

    Good video Thanks for it

  • @notjustdev

    @notjustdev

    29 күн бұрын

    You're welcome!🙌

  • @TheMarcopoloscurse
    @TheMarcopoloscurse28 күн бұрын

    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.

  • @MrSupermars
    @MrSupermars14 күн бұрын

    thank you very much

  • @notjustdev

    @notjustdev

    10 күн бұрын

    You are welcome🙌

  • @GodBeast_FireOnHell
    @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

  • @sarvamseetohul7146
    @sarvamseetohul714624 күн бұрын

    amazing bro ❤

  • @notjustdev

    @notjustdev

    24 күн бұрын

    Thanks 🔥

  • @ShafiulI
    @ShafiulI16 күн бұрын

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

  • @MrSino31
    @MrSino3125 күн бұрын

    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
    @Varun-ms5iv28 күн бұрын

    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

    @notjustdev

    28 күн бұрын

    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

    @Varun-ms5iv

    28 күн бұрын

    Thank you @notjustdev

  • @bhojpuriyadesiboys1639

    @bhojpuriyadesiboys1639

    27 күн бұрын

    I am also confusing

  • @bhojpuriyadesiboys1639

    @bhojpuriyadesiboys1639

    27 күн бұрын

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

  • @ivan3584
    @ivan358428 күн бұрын

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

  • @bhojpuriyadesiboys1639
    @bhojpuriyadesiboys163927 күн бұрын

    But now react native expo change

  • @nurmuhammadhassan4573
    @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

    @Mossad84

    Ай бұрын

    I prefer supabase over firebase.

  • @Innesb

    @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

    @nurmuhammadhassan4573

    Ай бұрын

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

  • @alexsumoski

    @alexsumoski

    Ай бұрын

    @@nurmuhammadhassan4573 then learn it

  • @ibrahimkouma6751

    @ibrahimkouma6751

    Ай бұрын

    supabase is the future

  • @Yagama78
    @Yagama78Ай бұрын

    :D

Келесі