Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adding Chat Feature to a React Native App with ...

Gurzu
September 01, 2023

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.

Gurzu

September 01, 2023
Tweet

More Decks by Gurzu

Other Decks in Programming

Transcript

  1. 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
  2. Gurzu Confidential • Configured Firebase project. • Enabled Cloud Firestore

    and set up database security rules 3 Setting up Firestore
  3. Gurzu Confidential 5 Structuring the Database Model • Firestore: NoSQL

    document based real-time database • Collections: conversations, messages and users
  4. Gurzu Confidential • Users Collection • Stores user data: fullName,

    avatar • DocumentId: respective user’s userId 6 Structuring the Database Model
  5. Gurzu Confidential • Conversations Collection • Stores conversation data: conversationName,

    conversationType, members, recentMessage • DocumentId: conversationId 7 Structuring the Database Model
  6. Gurzu Confidential • Messages Collection • Stores message data: messageText,

    messageType, sender, images, conversationId 8 Structuring the Database Model
  7. 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
  8. 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
  9. Gurzu Confidential • Starting new conversation • Creates a new

    document in the “conversations” collection 1 3 Storing and Rendering Chats
  10. 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
  11. 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