https://github.com/ertugrulsertaslan/real-time-chat

Realtime chat app made with ReactJS and socket.io.
https://github.com/ertugrulsertaslan/real-time-chat

cors express-js reactjs socket-io tailwindcss vite

Last synced: 9 days ago
JSON representation

Realtime chat app made with ReactJS and socket.io.

• Host: GitHub
• URL: https://github.com/ertugrulsertaslan/real-time-chat
• Owner: ertugrulsertaslan
• Created: 2024-05-30T11:46:56.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-08-21T14:18:11.000Z (3 months ago)
• Last Synced: 2024-08-21T16:09:39.143Z (3 months ago)
• Topics: cors, express-js, reactjs, socket-io, tailwindcss, vite
• Language: JavaScript
• Homepage:
• Size: 2.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Real Time Chat 💬

Realtime chat app made with ReactJS and socket.io.

### Screenshots 📸



    

    



## Features ✨

- ⚡ Real-Time Messaging: Instant delivery of messages using Socket.io.

- 🏠 Group Chat: Create and manage chat groups by room numbers.

- 📱💻 Responsive Design: Works on both desktop and mobile devices.

- 🔐 User Authentication: Join with a username and room number.

- 🤖 Guest Usernames: If no username is provided, a random guest name is assigned.

- 🚫 Unique Usernames: Prevents duplicate usernames in the same room.

## Technologies Used 💻

- 💻 [React.js](https://reactjs.org/) - JS library for crafting user interfaces 

- 📦 [Vite](https://vitejs.dev/) - Module bundler 

- 🎨 [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework

- 🚀 [Express.js](https://expressjs.com/) - Web framework for Node.js

- 📡 [Socket.io](https://socket.io/) - An event-driven library for real-time web applications

- 🌐 [Cors](https://www.npmjs.com/package/cors/) - Mechanism for integrating applications

## Installation 🛠️

Prerequisites

- Install Node.js ⚙️

- Clone the repo 🔄

 📦 After cloning the repo install dependecies with

3. Open up two terminal instances and run scripts below in directories `/server` and `/client`

- Server

 ```sh 

    npm i && node index.js

```

- Client

 ```sh 

    npm i && npm run dev

```

after running scripts go to `http://localhost:5173` with your browser to use the app. 🌐

## Usage 🚀

**1: Join a Room**

- Enter a username and room number to join. ✍️

- If no username is provided, a random guest name will be assigned. 🎲

**2: Start Chatting**

- Join existing chat groups or start a new conversation.💬

- Enjoy real-time messaging with other users. 😃

**Step 3: Rejoin Capability**

- Users can leave and rejoin the room using the same username and room number.🔄

## License 📄

[MIT](https://choosealicense.com/licenses/mit/)