https://github.com/shashankgupta10/chatroom
https://github.com/shashankgupta10/chatroom
chat expressjs node-js reactjs socket-io
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shashankgupta10/chatroom
- Owner: ShashankGupta10
- Created: 2024-02-13T11:03:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-13T11:48:13.000Z (over 1 year ago)
- Last Synced: 2024-02-14T13:43:38.279Z (over 1 year ago)
- Topics: chat, expressjs, node-js, reactjs, socket-io
- Language: TypeScript
- Homepage: https://chatroom-sg-frontend.vercel.app/
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chatroom Web App
This is a simple chatroom web application built using React, Express, and Socket.IO.
## Instructions to Run the Application:
1. **Clone the Repository:**
- Clone this repository to your local machine using the following command:
```
git clone github.com/ShashankGupta10/ChatRoom
```
2. **Navigate to the Project Directory:**
- Move into the project directory by running:
```
cd ChatRoom
```
3. **Install Dependencies:**
- Install the necessary dependencies for the server (Express) by running:
```
cd server
npm install
```
- Open a new terminal and install the dependencies for the client (React) by running:
```
cd client
npm install
```
4. **Start the Server:**
- Start the Express server by running:
```
cd server
npm start
```
5. **Start the Client:**
- In a new terminal window, navigate to the client directory and start the React development server:
```
cd client
npm start
```
6. **Access the Application:**
Once the server and client are running, you can access the chatroom web application by opening your web browser and navigating to [http://localhost:3000](http://localhost:3000).
## Application Features:
- **Real-time communication:** Messages are sent and received in real-time using Socket.IO.
- **Simple interface:** The chatroom interface provides a minimalistic and intuitive design for ease of use.
- **Systematic message display:** Messages sent by the user are displayed on the right side, while messages from other users are displayed on the left side.
## Technologies Used:
- **React:** Frontend JavaScript library for building user interfaces.
- **Express:** Web application framework for Node.js.
- **Socket.IO:** JavaScript library for real-time, bidirectional communication between web clients and servers.
- **Tailwind CSS:** Styling the Web Application.