Skip to content

Nahid4306053/React-realtime-chat-aplication-client

Repository files navigation

ChiChat - Realtime Private Chat Application

Overview

ChiChat is a real-time private chat application that enables secure communication between users. The application is built with a focus on simplicity, responsiveness, and real-time messaging using WebSocket technology.

Live Website Preview

Project Screenshot

Click to View Live Website

Features

  • User Authentication: The application includes a robust user authentication system. Users can sign up, log in, and securely manage their accounts.

  • Profile Editing: Users have the ability to edit their profiles, allowing them to customize their information and preferences.

  • Admin Panel: An admin panel is provided for administrators to manage users, ensuring a secure and controlled environment.

  • Real-time Messaging: ChiChat utilizes WebSocket technology, powered by Pusher, for real-time messaging. Users can send and receive messages instantly, providing a seamless chat experience.

  • Attachment Support: Users can share attachments along with their messages, enhancing communication by allowing the exchange of files, images, and more.

  • Buddy System: Users can create conversations with their buddies, facilitating private and focused discussions. The search buddy system allows users to find and connect with friends easily.

  • Responsive Design: The frontend is designed to be responsive, ensuring a consistent and user-friendly experience across various devices. Moment.js is used for displaying time in a human-readable format.

Technology Stack

Frontend

  • React.js: The frontend of ChiChat is built using React.js, providing a dynamic and interactive user interface.

  • HTML5, CSS, SCSS, Tailwind CSS: The application uses modern web technologies and styling approaches for a visually appealing and responsive design.

  • React Query: For efficient data fetching and management on the frontend.

Backend

  • Node.js and Express: The backend of ChiChat is built on Node.js and Express, providing a scalable and efficient server-side environment.

  • MongoDB and Mongoose: A MongoDB database is used to store user information and messages. Mongoose is employed for data modeling and interaction with the database.

  • Validation (Express Validator): Express Validator is used for server-side validation to ensure the integrity of user input.

  • WebSocket (using Pusher): Real-time communication is achieved through WebSocket technology, with Pusher facilitating seamless communication.

  • Data Upload (Express Multer): Express Multer is used for handling file uploads, supporting attachment functionality.