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

--- ## 🔗 Profile Links✨

Resume	Github	Linkedin	Portfolio	Blogger	Medium

---

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

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

Deployed Link Backend

   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:

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.

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✨