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.
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:
- Clone this repository to your local machine.
- Navigate to the project directory using the command line.
- Run npm install to install all dependencies.
- Run npm run dev to start the Vite development server.
- Open your web browser and navigate to http://localhost:5173 (or the port shown in the terminal) to see the website.
- 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.