Ethereal Chat 💬✨

A modern, full-stack real-time chat application featuring a premium dark glassmorphism UI. Built to provide a seamless messaging experience, Ethereal Chat allows users to connect with friends, join public rooms, and chat in real-time.

Live Preview

---

🌟 Overview

Ethereal Chat is more than just a messaging app; it's a carefully crafted platform designed for fluid communication. Whether you want to have a private conversation with a friend or hang out in public chat rooms, this application provides a robust and visually stunning environment. With features like real-time typing indicators, online status tracking, and a comprehensive friend request system, it brings people closer together instantly.

✨ Features

• 🔐 Secure Authentication: User registration and login using JWT tokens and bcrypt password hashing.
• 👥 Comprehensive Friend System: Search for users, send, accept, or decline friend requests with ease.
• 💬 Real-Time Private Messaging: Instant direct messages with friends powered by Socket.IO.
• 🏠 Public Chat Rooms: Create new topics or join existing public rooms to chat with multiple people.
• 🟢 Live Online Status: Instantly see who is online and who is offline.
• ⌨️ Typing Indicators: Know exactly when someone is typing a message to you.
• 🔔 Instant Notifications: Real-time alerts for incoming friend requests and new messages.
• 🎨 Premium Glassmorphism UI: A sleek, dark-themed, responsive design with smooth animations.

🛠️ Technologies Used

Frontend:

• React (v19.x)
• Vite
• React Router DOM (v7)
• Custom CSS (Glassmorphism design)
• Socket.IO Client
• Axios
• React Hot Toast & Emoji Picker

Backend:

• Node.js
• Express.js
• Socket.IO (for WebSocket communication)
• MongoDB & Mongoose
• JSON Web Tokens (JWT) & bcryptjs

🚀 The Process (How I Built It)

Building Ethereal Chat was a modern, AI-driven development journey. Instead of writing every line of code manually, I heavily utilized advanced AI coding assistants to bring my vision to life quickly and efficiently:

• Stitch: Used for initial project scaffolding and to rapidly design the overarching architecture and user interfaces.
• Antigravity: Functioning as an agentic pair-programmer, Antigravity helped seamlessly weave the frontend and backend logic together, debug complex Socket.IO event flows, and refine the custom glassmorphism CSS.
• Claude: Consulted for best practices, database schema design validation, and generating sophisticated boilerplate logic.

By orchestrating these powerful AI tools, I was able to focus on high-level system design, user experience, and feature direction, while delegating the heavy lifting of code generation to the AI.

🧠 What I Learned

• AI-Driven Development: Mastered the art of prompting, orchestrating, and pair-programming with multiple AI tools (Stitch, Antigravity, Claude) to build a full-stack application from scratch.
• Prompt Engineering: Learned how to clearly communicate complex architectural requirements (like real-time Socket.IO events and custom CSS glassmorphism) to AI agents to get the exact output needed.
• Code Review & Integration: Improved my ability to read, review, and integrate AI-generated code blocks into a cohesive, working MERN stack architecture.
• Rapid Prototyping: Discovered how drastically AI can reduce the time-to-market, allowing me to iterate on the UI/UX and feature set at an incredible speed.

🔮 How can it be improved

While Ethereal Chat is fully functional, there's always room for growth:

• Media Sharing: Adding support for image, audio, and file attachments in chats.
• Read Receipts: Implementing "seen" or "read" indicators for messages.
• Voice/Video Calls: Integrating WebRTC for real-time audio and video communication.
• Group DMs: Allowing private group chats beyond public rooms.
• Push Notifications: Integrating web push notifications for offline users.

💻 Running the project

Prerequisites

• Node.js (v18+)
• MongoDB (Local instance or MongoDB Atlas)

Setup Instructions

1. Clone the repository

   git clone <your-repo-url>
   cd "Chat Application"

2. Setup the Server

   cd server
   npm install

   Create a .env file in the server directory:

   PORT=5000
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLIENT_URL=http://localhost:5173

3. Setup the Client

   cd ../client
   npm install

4. Start the Application Open two terminals:

   Terminal 1 (Server):

   cd server
   npm run dev

   Terminal 2 (Client):

   cd client
   npm run dev

5. Open in Browser Navigate to http://localhost:5173

---