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
16 июн 2024
