React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

<title>Chat App</title>

Chat App

A real-time chat application built with modern web technologies. This project showcases the use of React, Material-UI, Node.js, Express.js, Socket.IO, and Redux Toolkit to create a feature-rich and scalable chat platform.

---

Features

• Real-time messaging using Socket.IO.
• User authentication for secure access.
• Modern UI/UX powered by Material-UI.
• Global state management using Redux Toolkit.
• RESTful API for backend services with Express.js.
• Typing Indicator: Displays when a user is typing in a chat.
• File Sharing: Enables users to send images or documents.
• Group Chats: Supports multiple users chatting in a single room.
• Notifications: Push notifications for new messages or updates.

---

Tech Stack

Frontend

• React: For building the user interface.
• Material-UI: For pre-designed and responsive components.
• Redux Toolkit: For managing global state effectively.

Backend

• Node.js: For server-side logic.
• Express.js: For handling API endpoints.
• Socket.IO: For real-time communication between client and server.

---

Installation

Follow these steps to get the project up and running locally:

Prerequisites

Node.js and npm installed on your machine.

Clone the repository:

    
      git clone https://github.com/MITHU9/realtime-chat-app.git
      cd chat-app
    
  

Install dependencies:

Backend

    
      cd server
      npm install
    
  

Frontend

    
      cd client
      npm install
    
  

---

Usage

Start the Backend Server:

    
      cd server
      npm start
    
  

Start the Frontend Development Server:

    
      cd client
      npm run dev
    
  

The live link https://chat-app-by-mithu9.netlify.app/

---

Project Structure

Frontend (React)

• src/components: Reusable UI components.
• src/pages: Pages for routing (e.g., Login, Chat Room).
• src/store: Redux store and slices for state management.
• src/styles: Custom styles and theme configurations.

Backend (Node.js + Express)

• routes/: API route definitions.
• controllers/: Business logic for each route.
• models/: Database models (if applicable).
• socket/: Socket.IO event handlers.

---

Key Concepts

1. Real-Time Communication: The app uses Socket.IO to provide a seamless real-time messaging experience.
2. State Management: Redux Toolkit is utilized to manage global state, ensuring that user data and messages are efficiently synced across the app.
3. Material Design: Material-UI components give the application a polished and professional look.

---

Future Improvements

• Performance Optimization: Improve overall app performance for better scalability and responsiveness.

---

Contributing

Contributions are welcome! If you have suggestions or find bugs, feel free to create an issue or submit a pull request.

---

---

Contact

For any inquiries or feedback, reach out to me at kmmithu2015@gmail.com.

---

Happy coding! 🚀