Building a Voice Chat App Using React and the Agora SDK
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
- Empty React project set up
- Firebase project
- An Agora developer account (check: How to Get Started with Agora)
Folder structure
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.
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.
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
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.
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
- See the Agora API Reference docs for more information.
- Find the source code of the project here.
- You can find the live version of the app here.
