Skip to content

Latest commit

 

History

History
188 lines (135 loc) · 5.88 KB

README.md

File metadata and controls

188 lines (135 loc) · 5.88 KB

Chat Application MERN-Stack Web Application.

Visitor count

Macbook-Air-Iphone-13

Project Overview

A real-time Chat application built using the MERN stack (MongoDB, Express, React, Node.js) and styled with Tailwind CSS. It supports user authentication, group chats, and instant messaging with real-time updates via Socket.IO. The application is fully responsive and provides smooth communication with features like notifications and state management using Redux.

Technologies & Packages Used

  • MongoDB: NoSQL database for flexible and scalable data storage.
  • Express.js: Web application framework for Node.js, providing robust features for web and mobile applications.
  • Node.js: JavaScript runtime for server-side development.
  • React.js: A JavaScript library for building reusable UI components and efficient single-page application views.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Socket.IO: Enables real-time, bidirectional and event-based communication.
  • JWT (JSON Web Tokens): Securely transmits information between parties as a JSON object.
  • Redux: A Predictable State Container for JavaScript Apps.
  • React-Toastify: A JavaScript library for providing toast notifications in React.

Key Features

  • User Authentication: SignIn, SignUp, and Logout functionality.
  • Real-time Chat: Users can send and receive messages in real-time.
  • Group Chat: Create and participate in group chats.
  • Message Notifications: Get notified of new messages with sound and visual alerts.
  • State Management: Manage application state efficiently using Redux.
  • Responsive Design: Tailwind CSS for a responsive and modern user interface.

How to Install

Follow these steps to set up and run the project locally:

  1. Clone the Repository:

    git clone https://github.com/akashdeep023/Chat_App.git
cd Chat_App

  2. Install Dependencies: Frontend Folder :

    cd frontend
npm install

    Backend Folder :

    cd backend
npm install

  3. Set Up Environment Variables:

    Configure the following environment variables by creating a .env file in the root of Forntend and Backend Folder:

    Frontend Folder :

    VITE_BACKEND_URL=http://localhost:9000

    Backend Folder :

    FRONTEND_URL=http://localhost:5173
MONGODB_URI=mongodb://127.0.0.1:27017/chat-app
PORT=9000
JWT_SECRET=secret-kvndkvdlkajkhkJkBiu6JJNjkbhkvnskcmhLJ5dKbkjsamnv

    Replace the values with your specific configurations.

  4. Run the Application:

    Frontend Folder :

    npm run dev

    Backend Folder :

    npm run dev

  5. Open in Your Browser:

Open http://localhost:5173 in your web browser.

Project Structure

├── frontend
│   ├── public
│   ├── src
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   ├── redux
│   │   ├── socket
│   │   ├── utils
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── index.html
│   ├── tailwind.config.js
│   ├── .env
│   └── package.json
├── backend
│   ├── config
│   ├── controllers
│   ├── middlewares
│   ├── models
│   ├── routes
│   ├── server.js
│   ├── .env
│   └── package.json
└── README.md

Author

Akash Deep
Email: [email protected]
LinkedIn : https://www.linkedin.com/in/akashdeep023/

Images

Profile Macbook-Air-localhost

Group Create Macbook-Air-localhost (5)

Chat & Group Overview Macbook-Air-localhost (2)

Chat & Group Members Macbook-Air-localhost (3)

Chat & Group Setting Macbook-Air-localhost (4)

Add User in Group (Admin Access) Macbook-Air-localhost (1)

Remove User in Group (Admin Access) Macbook-Air-localhost (6)

User Search & Chat Macbook-Air-localhost (7)

Notification Box Macbook-Air-localhost (8)

Notification Alert Screenshot 2024-07-22 231334

Shimmer image

Footer Screenshot 2024-07-22 154954

Thank You

Thank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊