Skip to content

Latest commit

 

History

History
125 lines (70 loc) · 3.99 KB

README.md

File metadata and controls

125 lines (70 loc) · 3.99 KB

Messaging App

Description

This is a React-based messaging application that provides users with a seamless experience for managing and interacting with their conversations. The application leverages Zustand for state management, React Context for authentication, and integrates several UI components for a smooth chat experience.

Live Demo

You can view the live demo of this project https://chat-application-aa8d.onrender.com

Feel free to explore the app and see its features in action!

Features

  • User Authentication: Users can log in and authenticate using their credentials.
  • Conversation Management: Users can select, view, and manage their conversations.
  • Real-Time Messaging: Utilizes Socket.IO for real-time bidirectional communication.
  • Message Input and Display: Real-time messaging capabilities with an intuitive input field and message display area.
  • Responsive Design: Ensures a good user experience across different screen sizes and devices.

Technologies Used

  • React: JavaScript library for building user interfaces.
  • Zustand: State management library for managing conversation states.
  • React Context: Provides a way to pass data through the component tree without having to pass props down manually at every level.
  • Tailwind CSS: Utility-first CSS framework for styling the application.
  • React Icons: Icon library for adding icons to the UI.
  • Socket.IO: Library for real-time, bidirectional, and event-based communication.

Installation

To get started with this project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/manushukla2/Chat-Application.git

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm start

  4. Open your browser and go to:

    http://localhost:3000

Usage

  • Authentication: Users need to log in to access the chat functionality.
  • Conversation Selection: Click on a conversation from the list to view and send messages.
  • Message Input: Type your message in the input field and press enter to send.
  • Real-Time Communication: Messages are sent and received in real-time using Socket.IO.

Screenshots

Below are some screenshots of the application in action:

Signup Screen

Screenshot 2024-08-30 231413

Login Screen

Screenshot 2024-08-30 231726

Chat Window

Screenshot 2024-08-30 231913

Bi-Directional Chat Window

Screenshot 2024-08-30 233741

No Conversation Selected

Screenshot 2024-08-30 232746

Search Conversation

Screenshot 2024-08-30 233537

Components

  • MessageContainer: Displays the selected conversation, header with back navigation, messages, and message input.
  • MessageInput: Provides a text field for users to type and send messages.
  • Messages: Displays the list of messages in the selected conversation.
  • NoChatSelected: Displays a welcome message when no conversation is selected.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes. Please open an issue on the GitHub repository for bug reports and feature requests.

Acknowledgments

  • React and React Icons for providing powerful tools for UI development.
  • Zustand and React Context for state management solutions.
  • Tailwind CSS for a fast and flexible way to style the application.
  • Socket.IO is used to enable real-time communication features.