Twitch Clone Chat App In ReactJs

Twitch Clone Chat App In ReactJs

Twitch Clone Chat App In ReactJs: A Gaming Chat App similar to Twitch¬†ūüéģBuilding on top of the Stream Chat API, the Stream Chat React component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box. A user can log in/log out, join a channel and can send pictures or videos in chat, send emojis and or react to a message with an emoji.

Tech Stack

  • Javascript
  • React
  • Node.js
  • Express
  • getStream.io

Sign up to getstream.io You need to sign up to getstream.io to get your secret, your key, and your id. Go into the client directory in your terminal. We will need to install the packages necessary to run the front end.

npm i

For this project I used:

stream-chat-react
axios
react-cookie
react-player
react-icons

Install all the packages you need by running the command in your terminal.

npm run start:frontend

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

Go into the server directory In a new tab in the terminal, go into the server directory. We will need to install the packages necessary to run the backend. For the backend I used:

npm i

bcrypt
cors
dotenv
express
getstream
nodemon
stream-chat
uuid
npm run start:backend

This will start the server on http://localhost:8000.

The page will reload if you make edits. You will also see any lint errors in the console.

Create a .env file with the following code and your personal keys, secrets, and ids, in the root of your project.

API_KEY={your_key}

API_SECRET={your_secret}

APP_ID={your_id}

Unresolved Issues

connecting to a database

User Roles and Permissions

Adding Features

Future Enhancements

Adding Features like the ability for the user to create and customize their own profile/have a profile picture. Better UI-implementing light/dark mode.

Download The Twitch Clone Chat App In ReactJs Project with Source Code For Free:
Click the Download Button Below to Start Downloading


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.