In this comprehensive tutorial, we will guide you through the process of building a real-time chat application using the powerful MERN stack and integrating SuprSend for seamless notifications. By combining the robust features of MongoDB as our database, Express.js for server-side development, React.js for building a dynamic user interface, and Node.js as our runtime environment, we'll create a highly scalable and efficient chat app.
Additionally, we'll leverage the capabilities of SuprSend, a versatile notification platform, to enhance user engagement and provide real-time updates. Some of the business use cases for a real-time chat app are as follows:
- Instant customer support
- Efficient team collaboration
- Quick decision-making
- Real-time project updates
- Streamlined internal communication
- Enhanced customer engagement
- Seamless sales and lead generation
- Effective remote team coordination
- Interactive live events and webinars
- Personalized user experiences.
Github Repo: SuprSend-NotificationAPI/Chatting-App (github.com)
Deployed Link: Chirpy Chat (mychttingapp.netlify.app)
Setting up the backend:
Let's start Setting up the backend. We install the necessary dependencies in the server directory.
Install Nodemon. Nodemon is a Node.js tool that automatically restarts the server after detecting file changes, and Socket.io allows us to configure a real-time connection on the server.
Configure Nodemon by adding the start command to the list of scripts in the package.json file. The code snippet below starts the server using Nodemon.
We can now run the server with Nodemon by using the command below.
If you are not using nodemon, either run the server with the command "node index.js" or modify the script by adding the start command to the list of scripts in the package.json file as shown below
Modify package.json to make index.js an ECMAScript Module by adding "type": "module".
Enter the following code in index.js:
Setting up the frontend:
Navigate into the frontend folder via your terminal and create a new React.js project.
Install Socket.io client API and React Router. React Router is a popular routing library for React applications. It allows us to handle navigation and routing in a declarative manner within the React components.
We'll also use react toastify and emoji-mart here. Emoji mart is a npm package used to include emojis in chats.
Cleaning up unnecessary data:
Delete the redundant files such as the logo and the test files from the React app, and update the App.js file to display Hello World as below. Run npm start to verify the app is working fine.
The following is the CSS code for index.css:
Building the frontend:
Register & Login page:
Let's create Register & Login page:
Also, create a folder named pages in src and inside it, create chatpage.js. This page, as the name suggests, is incharge of handling the appearance and functionalities of chatting in app.
We’ll write code in it after a while,
Lets's add the routes and react-toastify imports in app.js. We'll add the routes using Browser Router.
Using Context API:
We will use context api for keeping authentication and user information. Create a folder named context in src, and create context.js inside it.
Protecting the routes:
Now to protect our chatpage route from unauthorized access, we will create a protected route component.
Above part ensures that only a logged in user can navigate to chat page.
Now the App.js will be modified to redirect to chatpage when a user is logged in. If an unauthorised user tries to access the chatpage route, he will be redirected to login page.
Now, we’ll complete login and register components. Let’s modify login and register components to setup the useNavigate hook and handle login and register functionalities:
Completing the ChatPage:
Let's create chatpage for the app. Put the following code in pages/chatpage.js:
Now, create Chatcontainer.js, Mychats.js,Groupchatmodal.js, Scrollablechat.js, singlechat.js, sidebar.js, updategroupchatmodel.js, userbadgeitem.js and userlistitem.js files inside components folder.
Also create a .env file in the root directory( the parent directory containing public,src etc ) and add the following content
Since our basic frontend part is ready, let's move on to the backend.
In this app, we’ll use jwt for authentication and authorization.
Including Mongodb, Mongoose, JWT:
Install mongodb driver, mongoose and jsonwebtoken.
* Add the following code in index.js of backend.
Creating database schemas and models:
Let's create the models now. Create a folder models. Inside models, create user.js, chat.js, message.js to create schemas for user details, chat details and message and their respective models.
Firstly install validator package. Validator package provides many functions to validate different types of data, such as URLs,emails,, dates, and mobile phone numbers, among others. You can also use it to sanitize data.
Now put the following code in models/user.js:
Creating the controllers:
Create a folder named controllers in backend. This folder will contain three files:
- auth.js: this file has the code for login,register and search functions.
- chat.js : this file has the code for various functions pertaining to chats, group chats etc.
- message.js: This file has the code for message related functions like sending a message and getting all messages
Put the following code in controllers/auth.js. We are also including the code for creating a jwt.
Add the details like JWT_SECRET and JWT_LIFETIME in the .env file. JWT_SECRET is a secret message which can be a string used for encryption and JWT_LIFETIME denotes the time for which jwt is valid. It can have values like 30m,10d etc for 30 minutes, 10 days.
Enter the following code in the controllers/chat.js file:
Creating Routes in backend:
Now let's create routes in backend for register, login, message and chat. We'll use express router for this. Create a folder named routes in root directory and create 3 files auth.js, chat.js and message.js inside routes.
Since we are using jwt so will also have to verify the jwt of any user attempting to access the routes. Let’s create a folder named middleware in the parent directory of the project. Inside it, create a file named auth.js. Put the below code inside it.
Completing the frontend:
Let’s go back to frontend to create the necessary components.
ChatContainer.js is the main chat window where messages will be visible and it has the following code:
Displaying list of chats:
The MyChats.js file has the list of all chats of a user. Put the following code in it.
Write the code given below in components/singlechat.js, which handles the functionalities of the chat window and includes the styling for various components like messages,input bar etc. Note that here we will be using socket.io and handling various aspects to ensure real time communication. Also, I have used 2 svg icons here. You can use your own preferred icons and adjust the code accordingly.
Handling the search functionality:
Put the following code inside sidebar.js. This component enables a user to search for any other user and add people for messaging.
The component scrollable chat is the part of chat window where the messages are present. Put the below code in components/scrollablechat.js
Creating a Group:
Now let’s create the components for group chat.The Groupchatmodal component is used to create a group. Inside components/groupchatmodel.js, put the following code:
After that you'll need to update the group details.
Finishing the Backend:
Congrats. We have completed the frontend for our chat app. Let’s complete the backend code also. We’ll firstly import Server from socket.io, then add it to cors, and finally establish the connection with frontend. Then we’ll handle all the aspects of chatting using socket.io. Open index.js and add the code for socket.io and various events related to it.
So, finally our app looks something like this:
After logging in:
After sending and receiving messages:
Chatting in group:
After Admin renamed and added more people to group:
Implementing Suprsend Notifications:
By leveraging SuprSend's powerful push notification capabilities, your chat app can deliver instant alerts and updates directly to users' devices, even when they are not actively using the app. This ensures that your users stay connected and informed, fostering better communication and user engagement.
The benefits of using SuprSend for push notifications in chat apps are numerous. Here are a few key advantages:
- Real-time Communication: SuprSend enables instant delivery of push notifications, allowing users to stay connected and engaged with their chat conversations in real-time.
- Increased User Engagement: By leveraging push notifications, you can keep users informed about new messages, mentions, or important updates, encouraging them to actively participate in conversations.
- Personalized Experiences: SuprSend offers the ability to segment users and send personalized notifications, ensuring that users receive relevant and tailored messages based on their preferences and behaviors.
- Retention and Re-engagement: Push notifications serve as a powerful tool to re-engage users and bring them back to your chat app. You can remind users about ongoing conversations, invite them to join groups, or notify them about new features, fostering app retention.
- Seamless Integration: SuprSend provides easy-to-use APIs and SDKs that seamlessly integrate with popular chat app frameworks, making it effortless to incorporate push notifications into your existing infrastructure.
NOTE: Make sure your website uses https protocol.
Creating a template:
Create a template for web push notifications on suprsend platform.
Creating a workflow:
After the template, create a workflow on the suprsend platform.
The Event Name will be needed for sending notifications in the code.
Suprsend SDK Installation:
Add service worker file in your client. Create a file named serviceworker.js inside public folder(it has to be publicly accessible) and put the following content inside it:
Initializing the SDK:
Initialize the Suprsend SDK. Make sure to initialize it before calling other methods of it. Since we are using create-react-app, initialize it on top of App class in App.js. For initializing SDK, you need WORKSPACE KEY and WORKSPACE SECRET and VAPID KEY. SuprSend creates a Vapid key when your account is created. You can find this key on the Vendors page on SuprSend dashboard. Go to Vendors > Web Push > VAPID Keys page, copy the public VAPID key and paste it here in vapid key object value
Replace WORKSPACE_KEY and WORKSPACE_SECRET with your workspace values. You will get both the tokens from the Suprsend dashboard (Settings page -> "API keys" section).
Registering for Web Push notifications:
Register for webpush notifications. Suprsend SDK provides method to register service worker which enables your website to prompt notification permission to your users, if not enabled already.
Check for permission:
You can check if the user has granted permission to show push notifications using the below method
This will return a string representing the current permission. The value can be:
- granted: The user has granted permission for the current origin to display notifications.
- denied: The user has denied permission for the current origin to display notifications.
- default: The user's decision is unknown. This will be permission when user first lands on website.
Create/Identify a new user
You can identify a user using suprsend.identify() method.
Call this method as soon as you know the identity of user, that is after login authentication.
Sending Events to SuprSend:
Once the workflow is configured, you can pass the Event Name (NEW_MSG in our case) defined in workflow configuration from the SDK and the related workflow will be triggered. Variables added in the template should be passed as event properties
You can send Events from your app to SuprSend platform by using suprsend.track() method
Here property_obj is object (optional). Additional data related to the event (event properties) can be tracked using this field.
After implementing notifications, you will get a notification like this:
Github Repo: SuprSend-NotificationAPI/Chatting-App (github.com)
Deployed Link: Chirpy Chat (mychttingapp.netlify.app)
Throughout the tutorial, you have learned how to set up a React project, implement user authentication, create chat components, handle messages and notifications, and integrate SuprSend for seamless push notification delivery. These skills and concepts can be extended and customized to fit your specific chat app requirements and preferences.
Remember, push notifications play a crucial role in enhancing user engagement, facilitating real-time communication, and providing a personalized chat experience. By harnessing the capabilities of SuprSend, you can take your chat app to the next level and ensure that your users stay connected and informed at all times.
Now it's time to apply what you have learned, unleash your creativity, and build amazing chat applications that deliver exceptional user experiences. Keep exploring the vast possibilities of React, SuprSend, and other tools available to you, and never hesitate to dive deeper into the world of chat app development.
Happy coding, and may your chat app flourish with seamless push notifications powered by SuprSend!