Chat Application

A sophisticated chat application that enables one-on-one as well as group messaging with real-time capabilities. This platform demonstrates how modern technologies can be integrated to offer a secure and scalable communication experience.

Check out the Demo Video

Table of Contents

• Features
• Technologies Used
• Tools Used
• Architecture
  • Frontend
  • Backend
• Development
• License

Features

• Authentication
  Secure login and registration using email and password with JWT stored in cookies for session management.

• Search Users
  Search functionality to find users via username or email.

• Profile Image Management
  Users can upload profile images stored and served via Supabase Storage.

• Real-time Messaging
  Built using socket.io to support instant messaging across devices.

• One-on-One Chat
  Initiate private conversations between two users.

• Group Chat
  Chat with multiple users in a shared group space.

  • Create Group: Add users and name the group.
  • Add Members: Invite new participants.
  • Remove Members: Remove existing participants.
  • Rename Group: Edit group name.
  • Exit Group: Leave the group.

• UX Enhancements

  • Loading indicators to show ongoing actions.
  • Proper error handling with meaningful messages.
  • UI messages for empty states and unavailable data.
  • Form validation using Formik and Yup.
  • Fully responsive across devices.

Technologies Used

Frontend

• React.js
• Chakra UI / Tailwind CSS
• Formik & Yup (Form handling & validation)
• Axios (HTTP requests)
• Socket.io-client

Backend

• Node.js
• Express.js
• MongoDB (Database)
• Mongoose (ORM)
• Socket.io
• Supabase Storage
• JSON Web Tokens (JWT)
• Cookie-parser
• Bcrypt (Password hashing)

Tools Used

• VS Code - Development environment
• Postman - API testing
• Render / Vercel - Deployment
• GitHub - Version control

Architecture

Frontend

• Built using React.js
• Socket connection initialized once and shared via context
• State management with hooks and context API
• Axios interceptors for authenticated API requests
• Modular structure with reusable components

Backend

• REST API built with Express.js
• Socket.io server for real-time communication
• Secure authentication with JWT and cookies
• Modular routes and middleware for scalability
• MongoDB models to manage user and chat data

Development

To run this project locally:

Navigate to the respective repositories to find the instructions to run this application

License

This project with a MIT license giving permissive usage. For more information, refer to the LICENSE file