Skip to content

Latest commit

 

History

History
151 lines (123 loc) · 4.85 KB

README.md

File metadata and controls

151 lines (123 loc) · 4.85 KB

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:

<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! 🚀