MENU

Fun & Interesting

Build a Modern Multi-User Chat App with React Native, Expo, Clerk & Appwrite (Real-Time)

Code with Beto 10,555 1 month ago
Video Not Working? Fix It Now

Learn how to build a real-time multi-user chat app using React Native and Expo with Clerk for Passkeys & Google Sign-In and Appwrite for the backend. Seamless auth, modern UI, real-time updates—everything you need to ship a production-ready chat app. 🔐 Clerk → https://go.clerk.com/Wt70O5j 🏎️ Appwrite → https://t.co/QT5J6j7yVZ 💻 Code → https://codewithbeto.dev/projects/modern-chat-app 👨🏻‍💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻‍💻 If you find this project helpful and want to support my work, the best way is by enrolling in one of my courses: - React Native Course → https://codewithbeto.dev/learn - React with TypeScript Course → https://codewithbeto.dev/learnReact - Git & GitHub Course → https://codewithbeto.dev/learnGit For other ways to support my work, please consider: - GitHub Sponsors: https://github.com/sponsors/betomoedano - Become a Code with Beto channel member: https://www.youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join You can also support me by using my referral links: - Get an exclusive 40% discount on CodeCrafters: https://app.codecrafters.io/join?via=betomoedano - Get a 10% discount on Vexo Analytics with code "BETO10": https://vexo.co Your support helps me continue creating amazing projects! ⌚️ Timestamps ⌚️ 00:00 Intro 00:51 Demo 05:15 Resources 05:40 Creating a New App 05:59 Resetting Project 06:55 Setting Dark Interface Style 07:33 Installing Dependencies 09:32 Setting Up Clerk 16:22 Adding Authentication Flow 27:11 Sign In Screen 41:20 Adding Chat Screens 49:20 Modeling Chat Data 52:48 Displaying Chatrooms with Dummy Data 59:04 Setting Up Appwrite 1:02:15 Creating a Database 1:07:45 Inserting Chatrooms 1:08:50 Configuring Appwrite in the App 1:12:47 Fetching Chatrooms 1:17:44 Creating Chatrooms 1:23:42 Chatroom Screen 1:26:08 Creating Messages 1:35:48 Fetching Messages by Chatroom ID 1:38:12 Customizing Messages List 1:40:08 Message Item Component 1:43:48 Adding Realtime Listener 1:45:59 Implementing Profile Screen 1:48:17 Displaying User Passkeys 1:50:09 Creating Passkeys 1:51:45 Conclusion 👯 Join the Discord: https://discord.gg/dbYfWFw862 ⭐️ If you want to learn more about me, check this links: Code With Beto → https://codewithbeto.dev 🦋 → https://bsky.app/profile/codewithbeto.dev X → https://x.com/betomoedano Github → https://github.com/betomoedano Linkedin → https://www.linkedin.com/in/betomoedano/ Discord → https://discord.com/invite/dbYfWFw862 Medium → https://medium.com/@betomoedano01 Figma → https://www.figma.com/@codewithbeto ⭐️ My apps & projects: ► Code With Beto: https://codewithbeto.dev/ ► Eco Studios:https://www.ecostudios.dev/ ⭐️ Contact: [email protected] #reactnative #clerk #appwrite

Comment