🕵️‍♂️ MingleX - CipherStream

"What happens in the stream, stays in the stream."

MingleX (featuring CipherStream) is a next-generation, ephemeral real-time chat application designed for privacy-first, ad-hoc communication. It combines cyberpunk aesthetics with robust security features to provide a unique "burner" chat experience. No logs, no history, just the moment.

---

🚀 Unique Features

🔐 CipherStream & Ephemeral Rooms

• Self-Destructing Environments: Every chat room is temporary. Once the timer hits zero or the session ends, the room and all its contents are permanently wiped from the database (Redis).
• Zero-Knowledge Architecture: Messages are transient and only exist as long as the room is active.

👻 Stealth Typing Indicators

• "Encrypting a message...": Instead of the standard "User is typing...", MingleX uses a thematic typing indicator that mimics data encryption, enhancing the immersion.
• Real-time feedback using websockets without storing metadata.

🚨 Boss Key / Panic Mode

• Emergency Exit: A dedicated PANIC button prominently displayed in the interface.
• Instant Nuking: Clicking it immediately clears the DOM (visuals) and redirects the entire tab to Google.com, leaving no visual trace of the application on the screen.

🎨 Cyberpunk & Glassmorphism UI

• Visually Stunning: Built with framer-motion for smooth, cinematic animations.
• Dynamic Backgrounds: Floating, animated ambient blobs in deep neon colors.
• Interactive Elements: Glowing inputs, pulse effects, and responsive interaction feedback.

---

🏗️ Architecture

MingleX uses a high-performance, serverless-ready architecture to ensure low latency and scalability.

graph TD
    Client["User Client (Next.js)"] <--> Proxy["Next.js Middleware Proxy"]
    Proxy <--> Redis[("Upstash Redis DB")]
    Client <--> API["ElysiaJS API Routes (Edge)"]
    API <--> Redis
    Client <--> Realtime["Upstash Realtime (WebSockets)"]
    
    subgraph "Backend Services"
        Redis
        Realtime
    end

Loading

🛠️ Tech Stack

• Framework: Next.js 16 (App Router, Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS v4 & Framer Motion
• Backend API: ElysiaJS (running on Next.js Edge Runtime)
• Database & Realtime: Upstash Redis (Serverless Redis & WebSockets)
• State Management: TanStack Query
• Notifications: Sonner

---

⚡ Getting Started

Prerequisites

• Node.js 18+ installed.
• An Upstash account (for Redis and Realtime).

Installation

1. Clone the Repository

   git clone https://github.com/srikaran3004/MingleX.git
   cd MingleX

2. Install Dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory and add your Upstash credentials:

   UPSTASH_REDIS_REST_URL="your-upstash-redis-url"
   UPSTASH_REDIS_REST_TOKEN="your-upstash-redis-token"

4. Run Development Server

   npm run dev

   Open http://localhost:3000 with your browser.

---

🌍 Deployment

The easiest way to deploy MingleX is via Vercel.

1. Push your code to GitHub.
2. Import the project into Vercel.
3. Add the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN environment variables in the Vercel dashboard.
4. Deploy! 🚀

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.