Skip to content
Building a Voice Chat App Using React and the Agora SDK featured

Building a Voice Chat App Using React and the Agora SDK

By Author: Manitej Pratha In Developer

Manitej Pratha is a passionate student developer, ReactJS lover, and Javascript enthusiast who also has vivid interest in Web, Android, and Azure Cloud. Know more about Manitej at manitej.rocks!


The current buzz in the market is all about audio streaming apps and podcasts. Though apps like Clubhouse started the trend, big players like Twitter and Discord were quick enough to bring out their own versions of this app and catch up to the competition. The pandemic has definitely brought a big change to how people spend their time.

Luckily, we don’t need to reinvent the wheel to create something useful. There are many services that help us make our tasks way easier and build in less time without compromising on security and features. In this tutorial, let’s see how we can build an app that is similar to these audio streaming apps in minutes.

Tech stack

  • React (front end)
  • Firebase (database)
  • Agora SDK (server)
  • Geist UI (styling)

Prerequisites

Folder structure

Building a Voice Chat App Using React and the Agora SDK 1

Root file structure

In this file, we imported the react-router components and wrapped up all the routes under the authContext

We have three routes:

  • Login page
  • Page to show all rooms
  • Join room page

Login route

In this route, we allow users to create an account in our app using Firebase’s Google OAuth authentication.

Show all rooms route

When the users register on the app, we redirect them to the main page of the app, where we display all the public rooms. Clicking a room will take them to the join room route.

Join room route

In this route, we allow the user to join a room and listen and talk.

Only logged-in users can access rooms and join room routes so we need to protect them. We will store the current user in authContext.js using Context API.

Protected route component

There are some routes in our app that are accessible only to a logged-in user. If there is no active logged-in user, we need to ask them to log in first. To do this, we create a component that checks for the current user. If there is a user logged in, then it’ll give access to the private route. Otherwise, it will redirect the user to the login page.

Auth context

This file is used as a global store for the user info. All components can access the user state from this component. It uses the firebase’s onAuthStateChanged method and stores the current user info in the currentUser state, It passes this state to all components. every time the user’s state changes firebase automatically triggers the onAuthStateChanged method and updates the state to all components.

Login component

Only logged-in users can create rooms and join them. we will be using firebase google login for user auth. We display a button to the user, clicking on which will start the firebase google login, on successful login we push the user to a new route using the useHistory hook from react-router-dom. If the user is already logged in we automatically redirect him to the route.

Building a Voice Chat App Using React and the Agora SDK 2
login button

Displaying all the rooms

In this component (Home.js), we fetch all the rooms from the Firestore in real-time and render them on the / route. The Create Room button is used to create rooms.

The Rooms component is used to get all the rooms from the database and display them. When the user clicks the Trash button on the card, we call the deleteRoom method, which will delete the room from the database using the document ID. When the user clicks the Join Room button, we redirect them to a new route, where they can join the room.

Building a Voice Chat App Using React and the Agora SDK 3
all rooms

Creating a room

The Create Room component is used to create rooms. We display a modal to get the information required to create a room, such as a room name and visibility status. When the user clicks the Create Room button, we add a new document to the Cloud Firestore database using the addDoc method

Building a Voice Chat App Using React and the Agora SDK 4
create room

Join room component

We use the Join Room component to join a room. After the user clicks the Join Room button, we add the current user to the stream. We first make an API call to a server to generate an auth token for the current user. The API response gives us the token that we can use to join a stream. Once the user joins the room, we add their info to the Cloud Firestore database of the respective document of the room. Finally, we start the Agora stream in the div tag with id me, using the play() method from the Agora SDK.

Testing the final project

Start the dev server, click on create room and create a room with any details and join the room. Open another browser and navigate to the website. Now you can see the earlier created room(if it’s public). Click on join room. now you will see 2 participants on the screen. At the bottom of the screen, you’ll have controls like muting audio, changing audio stream quality, input and output devices. That’s it. below are screenshots attached for the same.

Building a Voice Chat App Using React and the Agora SDK 5
join room
Building a Voice Chat App Using React and the Agora SDK 6
in room
Building a Voice Chat App Using React and the Agora SDK 7
audio profiles

Conclusion

That’s all there is to it! With the power of technologies like the AgoraSDK, we can build a full-fledged, production-grade web app. Agora takes care of all the work required in the back end so that we don’t need to worry to handle all the complicated stuff. And Agora gives us 10,000 free minutes per month.

Other resources


Want to build Real-Time Engagement apps?

Get started with 10,000 free minutes today!

If you have questions, please call us at 408-879-5885. We’d be happy to help you add voice or video chat, streaming and messaging into your apps.