How to Build a Chat App With Next.js & Firebase
In this tutorial, we will guide you through building a simple chat application with Next.js and Firebase.
The surge in usages of telehealth apps has exploded since the Covid-19 pandemic shocked the world in early 2020. The CDC reported a 154% increase in telehealth visits during the last week of March 2020 compared with the same period in 2019, and it was then estimated that over 1 billion telehealth virtual “visits” would be completed by the end of 2020, with 900 million or more directly tied to the fight against COVID-19. (See our article on telehealth trends for more fascinating stats surrounding the fast, widespread adoption of telehealth usage.)
Experts predict that the widespread adoption of telehealth apps is here to stay. So if you're planning on building one, there's no better time.
One critical thing to consider when building a telehealth app is HIPAA compliance. What does that mean?
For more information, see our article Everything You Need to Know About HIPAA Compliance in 2021.
CometChat makes it easy to add HIPAA compliant chat, voice and video calling to your telehealth app. In this step-by-step tutorial, we'll show you how easy it is.
For this tutorial, we'll be building a clone of OhMD, a telehealth app that allows doctors and patients to voice, video and text chat with each other. The OhMD app looks like this...
We would be trying to replicate the screens and the user flow of this app.
We’ll start with a new project and go step by step from adding and configuring CometChat and Firebase components for the back-end to building our OhMD clone.
Let’s get into the code and I’ll show you how CometChat’s ready structure makes this development a breeze.
To implement the patient invite logic like OhMD, we need to have a back-end in place along with CometChat. We would be using Firebase for our back-end database storage needs as well as for user authentication. Let’s setup Firebase and CometChat in our app…
If you are new to Firebase, I’d recommend exploring the suite of products that Firebase provide for the app developers. In this app, we would be using 2 of the Firebase products. Firebase Auth for user registration and sign-in. Firebase Cloud Firestore to store our doctors and patients in a cloud database.
In an actual production application, the back-end database would be very vast comprising of a lot of tables. But we’ll keep it simple for this tutorial. We would be needing 3 tables viz. users, doctors & patients.
Firebase Auth will provide us with a users table. So in Cloud Firestore, we’ll just implement the Doctors and Patient Tables. Now, keep in mind - Firebase Cloud Firestore is a No-SQL DB, hence the terms & features are different. Instead of a table, we’d be calling them as Collections. So, it would be doctors collection and patients collection. Each entry within a collection is called a document.
The parameters that we’d be saving in doctors and patients document would be -
Doctors - [id, name, mobile, email, referral_code]
Patients - [id, name, mobile, email, invite_code]
The “id” parameter would contain the user ID from the Firebase Auth. This will help us fetch appropriate entries from the doctor and patient collections based on the Auth user id.
We won’t be going deep into setting up the entire Firebase Auth and Cloud Firestore from scratch here. Instead, I’ll share the official documentation links which will help you configure yours.
For Firebase Auth, we’ll be using Email-Password based authentication. Here are the links which will help you set up your app on Firebase and enable Auth and Cloud Firestore.
When I first started building apps with CometChat, I got stuck at various place unaware about the basic working and concepts how CometChat works. Don’t be like me
Before starting with CometChat, I’d recommend you to take a look at the Key Concepts page. The concepts help you make decisions concerning your application’s flow.
Before diving into the code, we’ll need to setup CometChat in our application. CometChat Quick Start document does a wonderful job explaining the steps in detail.
We’ll outline the steps from the above document -
Once you have added all the dependencies in your project, you’d need to initialize CometChat in your AppDelegate file. You can do it using the below code -
The first screen of our app would be a user selection screen. Wherein we would be asking the users to define whether they would be signing up as Doctors or Patients, just like OhMD app.
We’ll first see the Doctor registration and login flow.
Here’s the outline and explanation of the steps we would be implementing for our Doctor Signup.
Let’s have a look at the code which implements the above-discussed points.
Note: Validations and Error handling have been skipped for the tutorial purpose. In the production application, we would need to handle these gracefully with alerts.
Once the doctor or the patient registers, they would be taken to the “All Chats” screen. Here, there would be a list of all the conversations.
Doctors would be able to see their conversations with all their patients. Patients would be able to see their active conversation with the doctor who invited them.
This conversations list would be fetched from CometChat.
Now, since we want our custom UI, we wouldn’t use CometChat’s ready-made Conversations Screen available in its UI Kit like we did in our previous tutorials. We’ll use CometChat’s SDK methods to fetch the conversation list and display them in our table view.
We’ll be doing 2 things here-
Let’s check the code…
You can view the final updated Conversations View Controller here.
For doctors, this screen would contain a list of all the patients, a doctor would choose from to chat with. For Patients, they would see the list of doctors they would be able to chat with.
We would be fetching this user list from CometChat.
This page would also have a button “Invite Patient.” We would hide and show this button based on the user type. If the user is a doctor, we would be showing this button, else we would hide it.
Now, since we want our custom UI, we wouldn’t use CometChat’s ready-made Users Screen available in its UI Kit. We’ll use CometChat’s SDK methods to fetch the user list and display them in our table view.
We’ll be doing 2 things here-
Let’s check the code…
You can view the final updated Users View Controller here.
This screen would be visible only for doctors. The doctor would be adding the patient’s name, email and mobile for inviting them.
We would be showing an SMS prompt with a predefined message. Doctors can send that SMS from their device itself.
The logical flow on this screen would be -
Let’s see the entire flow in code…
We would be reusing our Registration View Controller to implement Patient Signup. The flow would be managed based on a user type flag which would be passed from the app’s initial user type selection screen. Ideally, you would be saving this user type flag in UserDefaults so that it can be persisted and used later. For the tutorial purpose, we have just added the flag in AppDelegate.
Here’s the outline and explanation of the steps we would be implementing for our Patient Signup.
Let’s have a look at the code which implements the above-discussed points.
You can view the final updated Registration View Controller here.
This step is very interesting. With CometChat’s UIKit, we don’t have to build this screen at all! Yes, you heard it right. We can directly use CometChatMessageList View Controller which is available in the UI Kit. We would just need to pass the CometChat user object while initiating this View Controller. Rest everything is being taken care of by CometChat itself.
Need proof? See for yourself… This simple function does it all for us.
Did I mention Step 7 was interesting? This is one step ahead of that. But first, let me explain to you all the things that we’d have to do by ourselves if it wasn’t for CometChat -
Consider a scenario where User A places a call to User B →
There are 6 specific cases that we need to handle in a video or an audio chat app.
On top of handling these scenarios, we would also need to implement the UIs for these specific scenarios. For example -
Sounds like a lot of work, right? CometChat does this for us with this one line of code -
CometChatCallManager().registerForCalls(application: self)
We would need to add this in our CometChat’s initialization function which we have placed in AppDelegate -
Woah, we implemented a clone of OhMD app! We used Firebase Auth for our registration and signup, Firebase Cloud Firestore as a back-end database, CometChat SDK to fetch conversations, users, signup and login, CometChat UI Kit to ease the UI development and CometChat friend API to map doctors and patients as friends in CometChat for proper visibility control.
You can find the entire source code of this app on GitHub.
I hope you learnt something new from this use case tutorial. As you might have observed, CometChat is like a toolkit. We can pick the required features and shape our app as we require. Sign up for a FREE CometChat trial to try building your own HIPAA compliant telehealth app, and see how easily it can be done!
If you found this tutorial useful, we also recommend our tutorials for...
Nabil Kazi currently leads Android and iOS Development teams at an IT service based company. He has five years of experience in native app development, and a track record of successfully deploying apps in one of the Big 4 consultancy firms, India's top Banks, BFSI and Manufacturing domains. He loves sharing his knowledge with the developer community.
.svg)
.jpg)
.svg)
