Firebase Chat Adding chat feature to a React Native App with Firebase

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

Gurzu Confidential • Configured Firebase project. • Enabled Cloud Firestore and set up database security rules 3 Setting up Firestore

Gurzu Confidential 4

Gurzu Confidential 5 Structuring the Database Model • Firestore: NoSQL document based real-time database • Collections: conversations, messages and users

Gurzu Confidential • Users Collection • Stores user data: fullName, avatar • DocumentId: respective user’s userId 6 Structuring the Database Model

Gurzu Confidential • Conversations Collection • Stores conversation data: conversationName, conversationType, members, recentMessage • DocumentId: conversationId 7 Structuring the Database Model

Gurzu Confidential • Messages Collection • Stores message data: messageText, messageType, sender, images, conversationId 8 Structuring the Database Model

Gurzu Confidential • Used the Gifted Chat library for the chat interface 9 Building Chat UI

Gurzu Confidential 1 0 Implementing Chat Functionality

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

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

Gurzu Confidential • Starting new conversation • Creates a new document in the “conversations” collection 1 3 Storing and Rendering Chats

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

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

“ Gurzu Confidential Any Queries? 16

“ Gurzu Confidential Ichhya Amatya Thank You ! 17