https://github.com/shuddha2021/reactchat

ReactChat is a real-time chat application with a React frontend and a Node.js backend. Using Socket.IO for seamless communication and Redux for state management, it provides an intuitive and responsive messaging experience. Users can engage in dynamic conversations with real-time message updates and timestamped interactions.
https://github.com/shuddha2021/reactchat

back-end-development front-end-development nodejs react reactjs real-time-chat-app redux responsive-design socket-io state-management websocket

Last synced: 6 days ago
JSON representation

ReactChat is a real-time chat application with a React frontend and a Node.js backend. Using Socket.IO for seamless communication and Redux for state management, it provides an intuitive and responsive messaging experience. Users can engage in dynamic conversations with real-time message updates and timestamped interactions.

• Host: GitHub
• URL: https://github.com/shuddha2021/reactchat
• Owner: shuddha2021
• Created: 2024-06-07T19:43:35.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-07T19:51:02.000Z (7 months ago)
• Last Synced: 2024-11-06T19:50:20.248Z (about 2 months ago)
• Topics: back-end-development, front-end-development, nodejs, react, reactjs, real-time-chat-app, redux, responsive-design, socket-io, state-management, websocket
• Language: JavaScript
• Homepage:
• Size: 1.75 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ReactChat

ReactChat is a robust and efficient real-time chat application designed with React for the frontend and Node.js for the backend. Utilizing Socket.IO for communication and Redux for state management, ReactChat offers a smooth and responsive user experience for messaging.

## Features

- **Real-time Messaging**: Instant message sending and receiving using Socket.IO.

- **Message Timestamps**: Each message is timestamped to show when it was sent.

- **State Management**: Efficient state management with Redux.

- **User-friendly UI**: Clean and intuitive user interface designed with React.

- **Responsive Design**: Optimized for both desktop and mobile screens.

## Technologies Used

- **React**: The primary framework for building the user interface.

- **Redux**: For managing the application state.

- **Socket.IO**: For real-time communication between the client and server.

- **Node.js**: For the backend server implementation.

- **Express**: For setting up the server and handling API requests.

- **CSS**: For styling the application.

## Core Logic

### Socket Manager

- **Socket Connection**: Manages the connection to the Socket.IO server.

- **Event Handling**: Listens for incoming messages and broadcasts outgoing messages.

- **Message Handling**: Adds timestamps to messages and emits responses.

### State Management

- **Redux Store**: Manages the application state, including messages and user input.

- **Actions**: Defines actions for adding messages to the store.

- **Reducers**: Updates the state based on actions dispatched.

### Screenshot





## Project Structure

### Backend

- `server.js`: Sets up the Express server and Socket.IO.

- `package.json`: Lists the dependencies for the backend.

### Frontend

- `App.js`: The main React component containing the chat interface.

- `actions.js`: Defines Redux actions for managing messages.

- `reducers.js`: Contains Redux reducers to handle state changes.

- `store.js`: Sets up the Redux store.

### Styles

- `App.css`: Contains the CSS styles for the application.

## Getting Started

### Prerequisites

- **Node.js**: Ensure Node.js is installed on your machine.

### Installation

1. Clone the repository.

   ```bash

   git clone https://github.com/yourusername/react-chat.git

2. Navigate to the project directory.

   cd react-chat

3. Install the dependencies for both the backend and frontend.

   npm install

   cd client

   npm install

   

### Running the Application

1. Start the backend server.

     npm run server

2. Start the frontend application.

     cd client

     npm start

   

### Usage

1. Open the application in your web browser.

2. Enter your message in the input field and press Enter or click Send.

3. View the real-time messages with timestamps in the chat window.

   

### Why This Project Is Useful

This project demonstrates how to build a real-time chat application using modern web development technologies. It showcases the use of React for the frontend, Node.js and Express for the backend, Socket.IO for real-time communication, and Redux for state management.

### Contributing

Contributions to this project are welcome. Please fork the repository and create a pull request with your changes.

### License

This project is licensed under the MIT License.