https://github.com/ibrahimif/twitch-chat-clone
A twitch chat clone with React, Typescript, tailwindCSS and Socket.io
https://github.com/ibrahimif/twitch-chat-clone
random reactvitets twitch-chat
Last synced: 8 months ago
JSON representation
A twitch chat clone with React, Typescript, tailwindCSS and Socket.io
- Host: GitHub
- URL: https://github.com/ibrahimif/twitch-chat-clone
- Owner: IbrahimIF
- Created: 2024-06-05T15:31:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-25T23:24:49.000Z (12 months ago)
- Last Synced: 2025-06-25T23:30:04.302Z (12 months ago)
- Topics: random, reactvitets, twitch-chat
- Language: TypeScript
- Homepage: https://twitch-chat-clone-chi.vercel.app
- Size: 369 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This project is a real-time Twitch chat replica built using React + Vite and TypeScript, initially developed following a tutorial by @code-with-gionatha.
It provides a dynamic messaging board where users can engage with each other in real-time using socket.io, simulating the interactive environment found on a live Twitch stream. This allows for immediate communication and community interaction, similar to a live chat alongside a streaming broadcast. Beyond the tutorial, this project has been enhanced with various features to improve user experience and functionality, making it a more robust and interactive chat platform.
----
## Getting started:
To run this project locally, you'll need to have Node.js and npm installed on your computer. Once you have these installed, follow these steps:
1. Clone this repository to your local machine.
2. Navigate to the project directory using the command line.
3. Run npm install to install all dependencies.
4. Run npm run dev to start the Vite development server.
5. Open your web browser and navigate to http://localhost:5173 (or the port shown in the terminal) to see the website.
-----
## Features:
- **Real-time Message Delivery and Display**: Messages sent by users are displayed instantly within the chat window.
- **Username Customisation**:
- **User Input**: Users can enter their desired username upon joining the chat.
- **Colourful Display**: Usernames are displayed with randomised colours, mirroring the colour schemes used on usernames in actual Twitch Messages.
- **Emoji Support**: An integrated emoji picker allows users to easily add emojis to their messages, enriching expressions and interactions.
- **Easter eggs**: Special responses to certain phrases, Hidden commands.
- **User Badges**: Support for displaying user-specific badges next to usernames, adding a layer of identity and recognition within the chat.
- **Input Management**: Messages automatically clear from the input field once sent for a smoother user experience.
---
## Technologies and Tools Utilised:
-----
## Acknowledgment:
- [Build a twitch chat clone](https://www.youtube.com/watch?v=U2XnoKzxmeY)
- [Socket.io](https://socket.io/)
-----