Uploaded April 2025 | Updated September 2026, 3 weeks ago
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 → 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: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
You can also support me by using my referral links:
- Get an exclusive 40% discount on CodeCrafters: app.codecrafters.io/join?via=betomoedano
- Get a 10% discount on Vexo Analytics with code "BETO10": 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: 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 → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/dbYfWFw862
Medium → medium.com/@betomoedano01
Figma → figma.com/@codewithbeto
⭐️ My apps & projects:
► Code With Beto: https://codewithbeto.dev/
► Eco Studios:https://www.ecostudios.dev/
⭐️ Contact: betomoedano@outlook.com
#reactnative #clerk #appwrite
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 → 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: github.com/sponsors/betomoedano
- Become a Code with Beto channel member: youtube.com/channel/UCh247h68vszOMA_OWpGEa5g/join
You can also support me by using my referral links:
- Get an exclusive 40% discount on CodeCrafters: app.codecrafters.io/join?via=betomoedano
- Get a 10% discount on Vexo Analytics with code "BETO10": 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: 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 → github.com/betomoedano
Linkedin → linkedin.com/in/betomoedano
Discord → discord.com/invite/dbYfWFw862
Medium → medium.com/@betomoedano01
Figma → figma.com/@codewithbeto
⭐️ My apps & projects:
► Code With Beto: https://codewithbeto.dev/
► Eco Studios:https://www.ecostudios.dev/
⭐️ Contact: betomoedano@outlook.com
#reactnative #clerk #appwrite
