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.
As we all know, information sharing is a vital resource for getting accurate information quickly for making informed decisions globally. In today’s interconnected world, information sharing gave the rise of platforms like youtube the ability to provide enormous support for content sharing and event performance to people wherever they are. In this tutorial, we will be building a similar platform, which can provide individuals with the ability to manage their youtube live events, provide a live chat feature for members using our eloquent and robust CometChat APIs along with components that will give room for smooth automation on the proposed platform.
Thus, we will be using reactjs as our frontend to enable us handle our design and integration to CometChat and for our backend, we will be using Nodejs/express.
After initializing a new react application, we will setup our CometChat SDK. To do that, navigate to the application folder and run the code below to install the SDK
To install SDK, Run the command below:
npm install @cometchat-pro/chat --save
After installing our dependency, we need to initialize it by incorporating it at the initial stage of our application. To do this, open the "index.js" file and add the following content to the file.
NOTE: Don’t forget to replace the APP_ID and REGION placeholders with your credentials.
The first step to accessing an application is to be authenticated. In our case, navigate to your src folder and create a folder called “pages” (this is where all our components will be stored).
Once you have that done, the next step is to create a login component “Login.js”; and paste the following code:
The login function handles the logic behind creating and logging in a user. We first initiate the CometChat function for creating a user CometChat.createUser(), this function also checks if the user exists before creating a new user. Upon successful creation of a user, the CometChat.login() is called, which then indicates if the user already exists. Hence, they will automatically be authenticated.
NOTE: we created an assets folder to save all our images and also a constant folder which contains the “constant.js”, to set our constants.
The image below shows the login and registration interface.
For our styling, we used the bootstrap sdk and also styled component for react.
The next step after login is to create our events, to do that, we navigate to the pages folder and create a file called Create_event.js and paste the code below into this newly created file.
In our create_event.js file, we are handling the create events by sending our input values (title, description, stream) to our backend express. We then call the createEvent() on submitting the form, this function as mentioned earlier, handles the call to the backend. Hence, a call is made to the Cometchat API in order to create a group. We then initiate a new group by setting our parameters in the new CometChat.Group(GUID, groupName, groupType, password) function. Thus, we pass it onto the CometChat.createGroup() for the cometchat API to create a new group and return the value of the newly created group.
To view all created events and also manage a single event, navigate to pages folder and create Programs.js file, paste the following code in the programs file.
Upon mounting this component, we send a request to the backend to retrieve all created events and display them, we also have an attend button that redirects us to the single event page.
The image below displays the list of all events and allows us to attend any event.
In order to view a single event and chat, we will first create a component by navigating to the pages folder, then we create Live_event.js file. Here, we paste the following code in the file created.
This component handles most of our logic. On mount of this component we send a request to the backend with the parameter id of the event to retrieve that particular event, after retrieving, we automatically join the user to the CometChat group we’ve already created. To join the CometChat group, we initiate the CometChat.joinGroup(GUID, groupType, password) and pass the necessary parameters to the function, we also call the function below to retrieve all our chats.
We first build our request by using the new CometChat.MessagesRequestBuilder() and set the GUID and limit, this will then return the list of chats. We also need to receive real-time messages, and to do that, we have to include the following code into our component.
This CometChat function opens a channel “UNIQUE_LISTENER_ID”. This is a unique listener id, that will receive any real-time message sent to the group.
The image below display our single event.
Lastly, we will update our “app.js ”, Open your app.js file and paste the following code.
To setup our express backend, create a folder called backend and navigate to it. The next step is to initialize npm and to do that, run the code below.
NOTE: This creates our package.json file in the folder.
We will need to install some packages that will help us access our database and also enable us to run our code smoothly, to do that paste the following code into our backend package.json file.
NOTE: We used nodemon package for development to help with running our application continuously. Although, this should not be used in production.
After the above, run the code below:
After installing our packages, the next step is to set up our backend entry point. The entry point will contain our express server connection, some of the necessary setup (like initializing bodyparser and cors) and our API path. Then we create a server.js file and paste the code below:
As stated in our prerequisite, we need to be able to install MySQL on our machine and set the necessary configurations (username, password, and port). Furthermore, we need to create a database called events and also a table called events in our database.
The next step is to set up database connection, to do that create a database/db.js file and paste the code below:
We are using sequelize to setup our database with our backend. Replace the database name, username, password, and port with the parameters in the new Sequelize() function.
The next step is to set up our events database models, create models/event.js file and paste the code below:
Thus, this is where we define our database tables in our application and any other relationships.
The express routes handles our CRUD operation for the events which involves creating and retrieving of events. Create routes/events.js file and paste the following code:
We used the express.route() to define our API path and to also initialize the database model in order to have access to the database.
To test our application, we will have to run two(2) commands for both the frontend and backend. run the following command to start up our frontend engine:
npm run start
This will run our application on port 3000. Navigate to your browser and open http://localhost:3000 to access the application.
For our backend, navigate to the backend folder and run the command below
npm run dev
This will run our backend on port 5000 as indicated in our “server.js” f.
With a lot of implementations to cover, I believe setting up a virtual event site will not be a problem, especially with the CometChat API which aids us with the chat and authentication section of the application.
Hope you find this tutorial helpful and don’t forget to check the official documentation of CometChat to explore further and add more features to your app. The complete source code to this tutorial is available on GitHub.
The most robust suite of cloud-hosted text, voice and video solutions on the market. CometChat seamlessly integrates onto websites and apps quickly and securely, powering digital communities across the globe.