Onyx

Real-time encrypted chat — AES-256, end-to-end, always.

Onyx is a production-ready MERN + Socket.io chat app where all messages are encrypted on the client before they ever leave your device. The server stores and relays only ciphertext — it never sees your plaintext.

• AES-256 encryption — all messages encrypted/decrypted in the browser via crypto-js
• Server stores only ciphertext; plaintext never hits the backend
• XSS protection on all rendered Markdown via DOMPurify
• Server-side API key proxying — Groq API key is never exposed to the client

Type @cipher in any normal or couples room to invoke an in-room AI powered by Groq's LLaMA 3.3 70B. Chat context is decrypted locally before being sent — the server only proxies already-assembled plaintext and never persists it. Responses are only visible to you.

Cipher is disabled in Ghost rooms for maximum privacy.

• Read receipts — single tick (delivered) / double ticks (seen), with a "Seen by" tooltip showing each viewer and timestamp
• Typing indicators — multi-user aware, e.g. "Priya and Rahul are typing…"
• Edit messages within a 20-minute window (encrypted in-flight)
• Delete for everyone — instantly removes from DB and all connected clients
• Markdown rendering — bold, inline code, code blocks, tables, blockquotes, lists
• File sharing — up to 50 MB, chunked binary transfer via WebSockets (no third-party storage)
• QR code invite — scan to auto-join a room with the password pre-filled
• Recently joined rooms — quick-rejoin list stored in localStorage, auto-purged when rooms no longer exist

• Creator can permanently delete a room and all its messages for everyone
• Non-creator can send a deletion request; the creator can approve or reject it in real time
• Ghost rooms self-destruct automatically when the last participant leaves

• Dark / Light theme toggle, persisted in localStorage
• Couples theme — optional pink color palette for Couples rooms, toggled via a heart button in the header
• Interactive particle vortex on the login screen (scales down on mobile/low-memory devices)
• Animated security radar background on the room selection screen (orbit dots, matrix rain, scan lines — all GPU-accelerated, disabled on mobile for 60 fps)
• Spring-physics animations throughout: message bubbles, send button pop, toast bounce-in, system message expand
• Fully responsive — hamburger + slide-in sidebar drawer on mobile
• Custom scrollbar styling, prefers-reduced-motion respected everywhere

Client — React 19, Vite 7, Socket.io-client, crypto-js, Firebase Auth, marked, DOMPurify, react-qr-code

Server — Node.js, Express 5, Socket.io 4, Mongoose, Helmet, express-rate-limit

Services — MongoDB Atlas (storage), Firebase Auth (Google sign-in), Groq API (Cipher AI via LLaMA 3.3 70B)

Browser                        Server                        External
──────────────────────         ──────────────────────────    ──────────────
 plaintext message             receives ciphertext only
      │                               │
      ▼                               │
 AES-256 encrypt (crypto-js)          │
      │                               │
      └──── Socket.io ───────────────►│──── MongoDB Atlas (ciphertext)
                                      │
 @cipher command                      │
      │                               │
      ▼                               │
 decrypt context locally              │
      └──── HTTP POST ───────────────►│──── Groq API (transient plaintext)
                                      │     (never stored)

• The VITE_SECRET_KEY used for AES encryption lives only in the browser environment. All participants in a room share the same key (set via env var).
• Cipher context is assembled and decrypted client-side; only the resulting plaintext prompt travels to the server proxy — it is never written to any database.
• File transfers are chunked (256 KB chunks) and relayed through the Socket.io server in RAM. No file data is ever written to disk or a database.

• Node.js ≥ 18
• MongoDB Atlas cluster (free tier works)
• Firebase project with Google Auth enabled
• Groq API key (free at console.groq.com)

git clone https://github.com/hrithik18k/chupchat.git
cd chupchat

cd server && npm install

Create server/.env:

PORT=5000
MONGO_URI=your_mongodb_connection_string
GROQ_API_KEY=your_groq_api_key

npm run dev

cd client && npm install

Create client/.env:

VITE_SECRET_KEY=any_long_random_string

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

npm run dev

App runs at http://localhost:5173 — both server and client must be running.

Note: All room participants must use the same VITE_SECRET_KEY to decrypt each other's messages. In production, this key is baked into the deployed client bundle.

chupchat/
├── client/
│   ├── public/
│   │   └── onyx-logo.png
│   └── src/
│       ├── components/
│       │   ├── ChatRoom.jsx        # Core chat UI, all socket event handlers, file transfer
│       │   ├── login.jsx           # Google + Guest auth screen
│       │   └── ParticleCanvas.jsx  # Reusable canvas particle system (full / ambient variants)
│       ├── utils/
│       │   └── cipher.js           # @cipher command parser, prompt builder, Groq proxy client
│       ├── firebase.jsx            # Firebase init + Google sign-in helper
│       ├── App.jsx                 # Root: theme state, mouse-follower gradient, routing
│       ├── App.css                 # Full design system, animations, responsive rules
│       └── index.css               # Base resets
│
└── server/
    ├── models/
    │   ├── Message.js              # Encrypted message schema (roomCode, sender, encryptedMessage, seenBy)
    │   └── room.js                 # Room schema (code, password, roomType, users[], createdByName)
    └── index.js                    # Express app, Socket.io handlers, Cipher proxy, file relay

• Google Sign-In via Firebase OAuth popup
• Guest Mode — generates an anonymous Guest#### identity stored in localStorage; no account needed

• File transfer RAM — files are buffered in server RAM during relay. The free-tier Render instance (512 MB) may struggle with multiple concurrent large file transfers.
• Shared encryption key — AES-256 is symmetric; all room participants share the key embedded in the client build. This protects data at rest and in transit from the server, but participants themselves can decrypt all messages by design.
• No message pagination — all past messages for a room are fetched on join. Large rooms with many messages may have slower load times.

1. Fork → create branch → commit → PR against main
2. Commit format: feat: add voice messages, fix: ghost room cleanup

Open source. See LICENSE for details.