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: 3 months 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-29T20:08:51.000Z (over 1 year ago)
- Last Synced: 2025-01-31T15:41:38.137Z (5 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 |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [](https://github.com/shikhu51197/)| [](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[](https://shikhu51197.github.io/) |[](https://wwwartificial-intelligence.blogspot.com/) |[](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 |
## Users Chat
| Route | Endpoint | Description | Features |
| --------------- | ------------------------------ | ----------------------------------------------------------- | -------------------------------------- |
| user chat page | /chat | chat with multiple users. | - Chat with login user |
---
# 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✨