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

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.