Talk to us
Talk to us

How to Build a Discord Clone Chat App

How to Build a Discord Clone Chat App

Discord is a popular communication platform that allows users to chat, voice chat, and video chat in real time. It is used by gamers, streamers, and other online communities. In this tutorial, we will show you how to build a Discord clone chat app using React Native and ZEGOCLOUD’s In-app Chat SDK.

What is A Discord Clone?

A Discord clone is a chat app that replicates the features and functionality of Discord. Discord is a popular chat app that is used by gamers, streamers, and other online communities. It allows users to communicate with each other in real time, using text, voice, and video chat.

Discord clones are typically built using web and mobile development technologies, such as React and React Native, Node.js, and MongoDB. These technologies allow developers to create chat apps that are highly scalable and reliable. Additionally, the use of chat SDKs can simplify the tech stack and complexity of building a Discord clone.

There are many benefits to building a Discord clone. First, it can be a great way to learn about web development technologies. Second, it can be a great way to create a chat app that meets the specific needs of your users. Third, it can be a great way to build a business.

If you are interested in building a Discord clone, there are many resources available to help you get started. Here is an excellent resource available to help you get started. Building a Discord clone can be a challenging project, but it can also be a very rewarding one. If you are up for the challenge, I encourage you to give it a try.

How Can I Clone Discord App?

If you’re interested in cloning the Discord app, there comes ZEGOCLOUD. One excellent solution is to utilize ZEGOCLOUD’s In-app Chat SDK for building an outstanding chat application. ZEGOCLOUD’s SDK is a robust tool that empowers you to create a Discord-like chat app effortlessly. It offers a wide range of features, including text chat, voice chat, video chat, and file sharing.

zegocloud adds chat feature

With its user-friendly interface and high scalability, ZEGOCLOUD’s In-app Chat SDK becomes an ideal choice for developers aiming to develop a Discord-inspired chat app. Discover the possibilities and ease of creating your own chat platform, similar to Discord, with ZEGOCLOUD’s In-app Chat SDK.


  • A ZEGOCLOUD developer account – Sign up
  • Activate In-app chat in the admin console
  • Install NodeJS
  • Fundamental understanding of web development

Upon meeting the specified requirements, you are ready to progress to the subsequent phases.

Integrate the SDK

Create a new project

  1. To initiate a new React Native project named Zego-zim-example, utilize the convenient command line utility provided. Simply employ the Node.js npx command to run the utility effortlessly, without the need for installation.
npx react-native init zego-zim-example
  1. To execute the project on iOS, open it in Xcode and navigate to Product > Run. You can as well use the following command:
yarn react-native run-ios
  1. To compile and execute the project on Android, simply execute the following command in your terminal:
yarn react-native run-android

Import the SDK

Prior to proceeding with the implementation of our Discord clone, it is essential to import the In-app Chat SDK. Follow these steps to import the SDK using NPM:

  1. To begin the installation process of the SDK, open a terminal window and navigate to the desired directory. Execute the following command to proceed:
npm install @zegocloud/zimkit-react-native
  1. Integrate the SDK into your project. Insert the codes below to your main JS file.
import { ZIMKiti18n } from '@zegocloud/zimkit-react-native';

Create a ZIM SDK instance

To enable client login and facilitate message exchange, both clients A and B need to initiate a ZIM instance using the create method. By utilizing the AppID obtained during the initial prerequisites, they can establish individual ZIM SDK instances for seamless communication between them.

By default, the ZIM SDK employs the AppSign authentication mode. To modify the authentication mode, either reach out to Technical Support for SDK 2.3.0 or later or make the change independently for SDK 2.3.3 or later.

To establish a ZIM SDK object, employ a static synchronized method and provide the AppID and AppSign. The create method generates a ZIM instance solely upon its initial invocation, returning null for subsequent usages.


ZIM.create({ appID: 0, appSign: '' });

// To avoid hot updates that return null multiple times, get a single instance of the ZIM SDK using the getInstance method.

var zim = ZIM.getInstance();

Set event callbacks

For customizing event callbacks, such as SDK error notifications or message-related notifications, invoke the on method prior to the client user’s login.

// Receive error codes by setting up a callback for the error event.

zim.on('error', function (zim, errorInfo) {
    console.log('error', errorInfo.code, errorInfo.message);

// Listen for connection status changes by setting up a callback for the event.

zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
    console.log('connectionStateChanged', state, event, extendedData);

// Receive one-to-one messages by setting up a callback for the message event.

zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);

Log in to the ZIM SDK

To enable message exchange and token renewal, both client A and client B must log in to the ZIM SDK. To do this, they must:

  1. Generate a user object using the ZIMUserInfo method.
  2. Call the login method with their respective user information and the Token obtained from the previous Prerequisites steps.
// User IDs should be limited to 32 characters and can consist of letters, numbers, and the special characters: ~!@#$%^&*()_+-=`;',.<>/\.

// userName must be limited to 1-64 characters.
var userInfo = { userID: 'xxxx', userName: 'xxxx' };


During the login process:

For Token-based authentication, provide the Token obtained from the [Guides - Authentication] document.
For AppSign authentication (default mode in SDK 2.3.0), leave the Token field empty.


zim.login(userInfo, '')
    .then(function () {
        // Login successful.
    .catch(function (err) {
        // Login failed.

Send messages

To send a message from client A to client B, utilize the sendMessage function with B’s user ID, content, and message type. This function returns a ZIMMessageSentResult and triggers onMessageAttached with a ZIMMessage. Prior to sending, you can utilize onMessageAttached to retrieve the message’s ID or local ID.

// To send a 1V1 message, set the ZIMConversationType to Peer.

var toUserID = 'xxxx1';
var config = { 
    priority: 1 // Set the message priority to one of three levels: low, medium, or high. Low is the default.

var type = 0; // The session type can be one-on-one (0), chat room (1), or group chat (2).

var notification = {
    onMessageAttached: function(message) {
        // todo: Loading

// Send a 1V1 text message. 

var messageTextObj = { type: 1, message: 'Text message content' };
zim.sendMessage(messageTextObj, toUserID, type, config, notification)
    .then(function ({ message }) {
        // Successful messages.
    .catch(function (err) {
        // Failed messages.

Receive messages

Upon client B’s login, the message sent by client A will be delivered to the callback function specified in the receivePeerMessage method.

// Register a callback to receive one-to-one messages.

zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);

Log out

To initiate the logout process for the client, simply utilize the logout method.


Destroy the ZIM SDK instance

To remove the ZIM SDK instance completely, invoke the destroy method.


Run a Demo

To gain a comprehensive understanding of the functionality of ZEGOCLOUD’s In-app Chat SDK, you can explore our sample demo.


Building a Discord clone chat app can be an exciting venture that allows you to create a customized communication platform tailored to your needs. By following the step-by-step process and leveraging the right tools and resources, you can develop a feature-rich app that facilitates seamless connections and collaboration among users.

Read more:

How to Build a Slack Clone App

How to Build a WhatsApp Clone App

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.