Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shikhu51197/socket.io-chatapp

This project is a simple real-time chat application built using Socket.io, React, and CSS. It allows users to join chat rooms, enter a username, and engage in real-time chat with multiple users.
https://github.com/shikhu51197/socket.io-chatapp

cors css3 expressjs nodejs react-bottom-scroll react-router-dom reactjs socket-io socketio-client

Last synced: 6 days ago
JSON representation

This project is a simple real-time chat application built using Socket.io, React, and CSS. It allows users to join chat rooms, enter a username, and engage in real-time chat with multiple users.

Host: GitHub
URL: https://github.com/shikhu51197/socket.io-chatapp
Owner: shikhu51197
Created: 2024-02-06T14:10:56.000Z (almost 1 year ago)
Default Branch: main
Last Pushed: 2024-02-29T20:08:51.000Z (11 months ago)
Last Synced: 2024-05-28T23:49:49.139Z (8 months ago)
Topics: cors, css3, expressjs, nodejs, react-bottom-scroll, react-router-dom, reactjs, socket-io, socketio-client
Language: JavaScript
Homepage: https://socket-io-chat-app-p1dy.vercel.app/
Size: 247 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        > 💻 PROJECT NAME ✨ => 💻  :  Socket.io Live Chat with React and CSS 🧑‍🏫






---

## 🔗 Profile Links✨

| Resume | Github                                                                                                                                   | Linkedin                                                                                                                                                            | Portfolio                                                                                                                                    | Blogger                                                                                                                                                           | Medium                                                                                                                                    |

| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

| [![Resume](https://img.shields.io/badge/my_Resume-E75480?style=for-the-badge&logo=ko-fi&logoColor=white)](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [![github](https://img.shields.io/badge/github-1DA1F2?style=for-the-badge&logo=github&logoColor=white)](https://github.com/shikhu51197/)| [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[![portfolio](https://img.shields.io/badge/my_portfolio-18A303?style=for-the-badge&logo=ionic&logoColor=white)](https://shikhu51197.github.io/) |[![Blogger](https://img.shields.io/badge/Blogger-FE5A1D?style=for-the-badge&logo=Blogger&logoColor=white)](https://wwwartificial-intelligence.blogspot.com/) |[![Medium](https://img.shields.io/badge/Medium-000?style=for-the-badge&logo=Medium&logoColor=white)](https://medium.com/@sg780060) |  

---

# Overview✨ :-

This project is a simple real-time chat application built using Socket.io, React, and CSS. It allows users to join chat rooms, enter a username, and engage in real-time chat with multiple users.

---

# installed on your machine:

    Node.js

    npm (Node Package Manager)

## Deployed Link Frontend

```bash

  https://socket-io-chat-app-p1dy.vercel.app/

```

## Deployed Link Backend

```bash

   https://chatapp-7jhb.onrender.com/

```

# Folder Structure

     /server: Contains the Socket.io server code.

    /client: Contains the React client code.

    /public: Public assets.

    

---

## Key Features :-

- **User Authentication**: Users can enter a unique username on the homepage before accessing the chat application.

- **Real-time Chat**: Engage in live chat with multiple users in real-time.

---

## Tech Stack

- Frontend: Socket.io React CSS3

- Backend: Node.js, Express.js

## Getting Started

### Installation

1. Clone the repository:

   ```

   git clone https://github.com/shikhu51197/Socket.io-ChatApp.git

   ```

   

2. Go to Backend Directory

   ```

   cd Backend

   ```

3. Install Dependencies:

   ```

   npm install 

   ```

4. Application Start

   ```

   npm start

   ```

5. Go to Frontend Directory

   ```

   cd Frontend

   ```

6. Open With Live Server

7. Enter a username on the homepage and click on the "Login" button.

8. Navigate to the chat page to engage in real-time chat with multiple users.

## Environment Variables Backend

You will need to set the following environment variables in a `.env` file:

```ini

PORT=`YOUR_REQUIRED_PORT`

MONGO_URL=`YOUR_MONGO_ATLAS_URL`

```

## Endpoints Reference

For detailed information on how to use our API, please refer to the [API documentation](Backend/docs/ApiDocs.md).

## Welcome Users Route

| Route           | Endpoint | Description                            | Features          |

| --------------- | -------- | -------------------------------------- | ----------------- |

| Welcome Message | POST /    | Provides a welcome message to the API and Authenticate. | - Welcome message & user login  |

![Screenshot (1962)](https://github.com/shikhu51197/Socket.io-ChatApp/assets/107506646/6cadc0e7-0065-4c6b-ba7e-c0ecf3a1e6c8)

## Users Chat

| Route           | Endpoint                       | Description                                                 | Features                               |

| --------------- | ------------------------------ | ----------------------------------------------------------- | -------------------------------------- |

| user chat page     |  /chat               |  chat with multiple users.                                          | - Chat with login user        |

![Screenshot (1963)](https://github.com/shikhu51197/Socket.io-ChatApp/assets/107506646/b3cfe2d5-fbd2-4259-8349-29e1825c2184)

--- 

# Package.json(Dependency)✨:-

 | Serial No  | Backend  |  Frontend     |

| ----------- | ---------|-------------- |

| 1 | nodemon  | socket.io-client|

| 2 | socket.io  | react-bottom-scroll |

| 3 | cors  | react |

| 4 | express | react-router-dom |

---

    

Contributing

     💻 Contributions are welcome! Please follow the standard guidelines for contributing.

---

✨Thank You✨