Adding Chat Feature to a React Native App with Firebase | Ichhya Amatya | Gurzu

Recently, while working on a social media application at Gurzu, we built a chat feature as part of its ecosystem. With time constraints, we quickly needed a simple chat system for the users with little to none time left to spare for building an entire server-side code. Already having an authentication system in place, we decided to integrate Firebase with our existing system and leverage Firebase’s real-time features, such as Realtime Database or Cloud Firestore, while still using our own authentication infrastructure.

In this episode of knowledge ketchup, Ichhya talked about how they built this chat feature.

Transcript

1. Firebase Chat Adding chat feature to a React Native App with Firebase
2. Gurzu Confidential • Added chat feature to one of the apps we developed at Gurzu. • With time constraints, opted for Firebase integration with existing authentication feature. • Leveraged Firebase real-time features, Cloud Firestore 2 Introduction
3. Gurzu Confidential • Configured Firebase project. • Enabled Cloud Firestore and set up database security rules 3 Setting up Firestore
4. Gurzu Confidential 4
5. Gurzu Confidential 5 Structuring the Database Model • Firestore: NoSQL document based real-time database • Collections: conversations, messages and users
6. Gurzu Confidential • Users Collection • Stores user data: fullName, avatar • DocumentId: respective user’s userId 6 Structuring the Database Model
7. Gurzu Confidential • Conversations Collection • Stores conversation data: conversationName, conversationType, members, recentMessage • DocumentId: conversationId 7 Structuring the Database Model
8. Gurzu Confidential • Messages Collection • Stores message data: messageText, messageType, sender, images, conversationId 8 Structuring the Database Model
9. Gurzu Confidential • Used the Gifted Chat library for the chat interface 9 Building Chat UI
10. Gurzu Confidential 1 0 Implementing Chat Functionality
11. Gurzu Confidential • Cloud Firestore Documentation: Firestore methods for querying, reading, writing, updating and removing chat data • Queries firestore to get user’s conversations 1 1 Storing and Rendering Chats
12. Gurzu Confidential • Sending a new message • Creates a new document in the “messages” collection • Defines the messageType and updates the referenced conversation details • Deleting message • Removes message document from collection 1 2 Storing and Rendering Chats
13. Gurzu Confidential • Starting new conversation • Creates a new document in the “conversations” collection 1 3 Storing and Rendering Chats
14. Gurzu Confidential • Firebase integration enhanced user engagement. • Real-time capabilities with Firebase facilitated quick setup. • Gifted Chat library saved development time with customizable UI components. • Firebase Cloud Functions and Cloud Messaging enabled efficient push notifications. • Result: Seamless messaging, real-time user connections, and interactions. 1 4 Conclusion
15. Gurzu Confidential • React-native-firebase docs • Cloud Firestore Usage • Gifted Chat Library • Build a Chat App with Firebase and React Native • Add A Chat To Your React Native App With Firebase And Firestore References
16. “ Gurzu Confidential Any Queries? 16
17. “ Gurzu Confidential Ichhya Amatya Thank You ! 17