ChatLoop — Real-Time Chat Application by Ehan Siddique

ChatLoop is a full-featured real-time communication platform designed and developed by Ehan Siddique. I built the project from the ground up to explore what it takes to create a modern messaging experience similar to the communication applications people use every day.

The application combines instant messaging, voice notes, file sharing, audio and video calling, an AI assistant, friend management, user presence, reporting and moderation tools, and a complete administration dashboard.

Unlike a simple chat UI project, ChatLoop includes the infrastructure and security logic required to manage real users, conversations, calls, reports, suspensions and application activity.

Project Overview

I wanted ChatLoop to feel like a real communication product rather than a basic messaging demo.

Users can create accounts, find friends, send messages instantly, react to conversations, record voice messages, share files, make audio or video calls, see when friends are online and communicate with an integrated AI assistant.

Behind the user-facing experience is an administration system that provides visibility into users, conversations, reports, suspensions, announcements and application activity.

The application uses Firebase Authentication and Cloud Firestore as its authentication and real-time data infrastructure, Supabase Storage for uploaded files, WebRTC for peer-to-peer calls and Google's Gemini API for ChatLoop AI.

My Role

Role: Full-Stack Developer
Developer: Ehan Siddique
Project Type: Personal Full-Stack Project
Application: Real-Time Communication Platform

I designed and developed ChatLoop independently, including the user interface, application architecture, Firestore data structure, real-time communication flows, WebRTC calling system, moderation features, administration dashboard and security rules.

Core Features

Real-Time Messaging

ChatLoop supports one-to-one conversations with messages appearing instantly through Firestore real-time listeners.

The messaging experience includes:

• Instant real-time messages
• Read receipts
• Typing indicators
• Message editing
• Message deletion
• Message reactions
• Date separators
• Unread message indicators
• Notification sounds
• Optional desktop notifications
• Paginated message history

Only the newest messages stay in the active listener while older messages are loaded as the user scrolls upward, helping reduce unnecessary real-time database usage.

Voice Messages and File Sharing

Users can record and send voice notes directly from the chat interface.

Voice messages include an interactive waveform-style player, while the attachment system supports images and general files.

Users can also drag and drop files or paste screenshots directly into conversations.

Uploaded content is stored using Supabase Storage.

Audio and Video Calling

ChatLoop includes peer-to-peer audio and video calls powered by WebRTC.

The calling system supports:

• Audio calls
• Video calls
• Microphone mute/unmute
• Camera controls
• Screen sharing
• Incoming call interface
• Missed calls
• Declined calls
• Call history inside conversations
• Connection recovery
• ICE restart when the network changes

Firestore is used as the signalling layer for exchanging WebRTC offers, answers and ICE candidates.

Friends and User Discovery

Users can search for people using their name, username or unique four-digit identifier.

They can:

• Send friend requests
• Accept requests
• Decline requests
• Cancel requests
• Remove friends
• Search existing users

Friend relationships are synchronized through Firestore transactions and batch operations.

Presence System

ChatLoop displays user availability using online, away and last-seen states.

The presence system tracks application activity and periodically updates the user's status.

If a browser closes unexpectedly and cannot send an offline update, ChatLoop can detect outdated online states and display the user as offline.

Users can also disable their visible active status for additional privacy.

ChatLoop AI

ChatLoop includes an AI assistant powered by Google's Gemini API.

The assistant appears directly inside the conversation interface and maintains a separate conversation history for each user.

Recent messages are provided as conversation context so the AI can generate more relevant responses.

If the primary model becomes temporarily unavailable, ChatLoop can fall back to a lighter model.

Reporting and Moderation

Communication platforms require more than messaging features, so I also built reporting and moderation functionality.

Users can report:

• Individual messages
• Other users
• Accounts using their unique ID

Reports can include evidence from conversations and are sent to the administration dashboard for review.

Administration Dashboard

ChatLoop includes a separate administration interface with real application data.

Administrators can monitor:

• Total users
• Users currently online
• Active users
• Daily registrations
• Messages
• Conversations
• Friendships
• User reports
• Suspended accounts

Administrators can search users, edit selected profile information, suspend accounts, remove suspensions, review reports, delete reported messages and publish application-wide announcements.

A read-only guest administration account is also available so visitors can explore the real dashboard without being able to modify application data.

Security

Because ChatLoop does not use a traditional custom backend server, Firebase Security Rules act as an important part of the application's backend security model.

The rules are designed so that:

• Users can only modify permitted parts of their own profiles
• Private conversations are accessible only to their participants
• Messages can only be accessed by conversation participants
• Administrator permissions are checked separately
• Guest administrators cannot perform write operations
• Suspended accounts cannot create messages, calls or friend requests

UI restrictions are not treated as security. Firestore rules remain responsible for enforcing database permissions even if someone attempts to bypass the interface.

Real-Time Architecture

ChatLoop uses Cloud Firestore listeners to synchronize application state.

When a message is sent, the message and associated conversation information are updated together so conversation previews, timestamps and unread counters stay synchronized.

Firestore's local write behavior allows messages to appear immediately while the remote write is still being confirmed.

Instead of listening to every message in every conversation, the main dashboard listens primarily to conversation metadata. This reduces unnecessary active listeners while still allowing unread indicators and notifications to update in real time.

WebRTC Architecture

Audio and video communication is handled through WebRTC.

The call service manages the call lifecycle, including:

Calling → Active → Ended

as well as states such as:

Missed and Rejected

Firestore stores the signalling information required to establish the peer connection.

The WebRTC service manages:

• Local media streams
• Remote media streams
• ICE candidates
• Offers and answers
• Screen sharing
• Camera controls
• Microphone controls
• Connection recovery
• Peer connection cleanup

Technology Stack

Frontend

• React 18
• Vite
• JavaScript
• Tailwind CSS
• Framer Motion
• React Router
• React Icons

Authentication

• Firebase Authentication
• Email/password authentication
• Google authentication
• GitHub authentication

Database

• Cloud Firestore
• Firestore real-time listeners
• Firebase Security Rules

Storage

• Supabase Storage

Communication

• WebRTC
• Firestore signalling

Artificial Intelligence

• Google Gemini API

Deployment

• Vercel
• Firebase Hosting compatibility

Firestore Data Architecture

ChatLoop organizes application data into separate collections for users, friendships, conversations, messages, typing status, calls, AI conversations, reports and application configuration.

Important structures include:

• users/{uid} — user profile and account information
• friendRequests/{id} — friendship requests and status
• chats/{chatId} — conversation metadata
• messages/{chatId}/messages/{id} — conversation messages
• typing/{chatId} — typing indicators
• calls/{callId} — call lifecycle information
• aiChats/{uid}/messages/{id} — AI conversation history
• reports/{id} — moderation reports
• appConfig/announcement — application announcements
• appConfig/stats — application statistics

Engineering Highlights

One of the most important parts of this project was separating database logic from UI components.

Components do not directly manage Firestore operations. Database reads and writes are organized into dedicated Firebase service modules, creating clearer boundaries between presentation and application data logic.

Other engineering considerations included:

• Reducing unnecessary database listeners
• Handling dropped call connections
• Preventing duplicate call-ending events
• Keeping unread counters synchronized
• Protecting administrative actions through Firestore rules
• Handling suspended accounts at both the UI and database level
• Paginating large conversations
• Managing real-time user presence
• Keeping uploaded media separate from application database records

Responsive Design

ChatLoop is designed to work across desktop and mobile devices.

The interface adapts its layout for smaller screens while preserving the main messaging, calling and account-management functionality.

Particular attention was given to mobile inputs, conversation layouts and calling interfaces so the application feels natural on phones as well as desktop browsers.

Current Limitations

ChatLoop currently focuses on one-to-one communication and does not yet support group conversations.

User discovery currently works well for smaller datasets, but a significantly larger user base would benefit from a dedicated search indexing solution.

Reliable WebRTC connectivity across restrictive networks can also require a dedicated TURN server.

These limitations provide clear opportunities for future development and scaling.

Future Improvements

Possible future improvements include:

• Group conversations
• Group audio and video calls
• Dedicated user-search indexing
• Push notifications
• Improved media processing
• Message encryption improvements
• More advanced moderation tools
• Enhanced AI functionality
• Improved analytics
• Scalable backend services for larger user volumes

Developer Guide

To run ChatLoop locally, Node.js 18 or newer is required.

git clone https://github.com/Fehan999/Chat-Loop.git
cd Chat-Loop
npm install
npm run dev

The development application runs locally using Vite.

Available commands include:

npm run dev
npm run build
npm run preview
npm run lint
npm run format

Environment variables can be configured for Gemini AI and TURN server connectivity.

Before deploying changes, the application should successfully pass both the lint and production-build processes.

About the Developer

I'm Ehan Siddique, a full-stack web developer focused on building modern web applications with technologies including React, JavaScript, Firebase, real-time systems and modern frontend development tools.

ChatLoop is one of my larger personal projects and was designed and developed end-to-end as a practical exploration of real-time communication, WebRTC, Firebase architecture, application security and product-level administration systems.

Explore though my other projects: Projects