/plushcap/analysis/100ms/clubhouse-clone-react

Building a Clubhouse Clone in React

What's this blog post about?

In this tutorial, we will be building a Clubhouse clone in React using the 100ms React SDKs. The main features of our application include joining and leaving audio rooms, displaying participants' tiles with their respective roles, muting/unmuting audio for individual participants, changing participants' roles, and adding chat functionality. We will also be implementing AR filters in a future part of this tutorial series. To follow this tutorial, you should have a basic understanding of React. The code is available in the GitHub repository provided at the end of the article. The 100ms SDK provides us with a flux-based reactive data store layer over its core SDK, making state management easy. We will be using the following 100ms React SDKs libraries: - @100mslive/hms-video-react - @100mslive/hms-video We will create a custom app and roles in the 100ms Dashboard, which will be used to set up our application. After that, we will join the room using the hmsActions.join() function and display participants' tiles with their respective roles. We will also add functionality for leaving the room, toggling audio on/off, muting individual participants, changing participants' roles, and adding chat functionality. By following this tutorial series, you will be able to create a feature-rich video/audio conferencing application using React and 100ms SDKs.

Company
100ms

Date published
Oct. 21, 2022

Author(s)
Deepankar Bhade

Word count
2879

Hacker News points
None found.

Language
English


By Matt Makai. 2021-2024.