Twitch Clone Chat App with React
Twitch Clone Chat App
Introduction
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 is able to login/logout, join a channel and have the ability to 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
Getting Started on this project
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 neccesary to run the frontend.
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 the 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 neccesary 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