👻 Ghost Chat

A private, self-destructing chat application with real-time messaging

Next.js • React • TypeScript • Elysia • Upstash

---

✨ Features

🔒 Privacy & Security

• Self-Destructing Rooms: All messages automatically expire after 10 minutes
• Anonymous Identity: Animal-based usernames for privacy
• No Logs: Messages are permanently deleted after expiration
• Room Capacity: Maximum 2 users per room for intimate conversations

💬 Real-Time Communication

• Instant Messaging: Real-time message delivery using Upstash Realtime
• Live Updates: Messages appear instantly without page refresh
• Room Sharing: Easy link sharing to invite others
• Manual Destruction: Option to destroy room immediately

🎨 Modern UI/UX

• Dark Theme: Beautiful technical aesthetic with dark backgrounds
• Responsive Design: Works seamlessly on desktop and mobile
• Smooth Animations: Polished interactions and transitions
• Status Indicators: Real-time connection and encryption status

---

🚀 Getting Started

Prerequisites

• Node.js 20+ (or Bun)
• Upstash Account (for Redis and Realtime)
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone https://github.com/adithpv/Ghost-chat-app
   cd ghost-chat-app

2. Install dependencies

   npm install
   # or
   bun install

3. Set up environment variables

   Create a .env.local file in the root directory:

   UPSTASH_REDIS_REST_URL=your_redis_rest_url
   UPSTASH_REDIS_REST_TOKEN=your_redis_rest_token

4. Run the development server

   npm run dev
   # or
   bun dev

5. Open your browser

   Navigate to http://localhost:3000

---

🛠️ Tech Stack

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• TanStack Query - Data fetching and caching
• Eden - Type-safe API client

Backend

• Elysia - Fast Bun web framework
• Zod - Schema validation

Infrastructure

• Upstash Redis - Serverless Redis for message storage
• Upstash Realtime - Real-time pub/sub for live messaging

Development

• ESLint - Code linting
• Prettier - Code formatting
• React Compiler - Automatic optimization

---

📖 How It Works

Room Creation

1. Enter the lobby and get assigned an anonymous animal-based username
2. Click "Create Secure Room" to generate a new chat room
3. Share the room link with another person
4. Start chatting in real-time!

Message Flow

1. Messages are sent to the Elysia backend API
2. Stored in Upstash Redis with automatic expiration
3. Broadcasted via Upstash Realtime to all connected clients
4. Displayed instantly in the chat interface

Self-Destruction

• Rooms automatically expire after 10 minutes of activity
• All messages are permanently deleted from Redis
• Users are redirected to the lobby with a destruction notification
• Manual destruction option available at any time

---

🏗️ Project Structure

ghost-chat-app/
├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── api/                # API routes (Elysia backend)
│   │   ├── room/[roomId]/      # Chat room page
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home/lobby page
│   ├── components/
│   │   ├── lobby/              # Lobby components
│   │   │   ├── LobbyHeader.tsx
│   │   │   ├── LobbyAlert.tsx
│   │   │   ├── LobbyControls.tsx
│   │   │   ├── LobbyVisual.tsx
│   │   │   └── LobbyStatusPanel.tsx
│   │   └── providers/          # React context providers
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utilities and clients
│   ├── schemas/                # Zod schemas
│   └── utils/                  # Helper functions
├── public/                     # Static assets
└── package.json

---

🎯 Key Features Explained

Anonymous Usernames

Users are assigned random animal-based usernames (cat, dog, elephant, etc.) stored locally in the browser. This ensures privacy while maintaining a fun, memorable identity.

Room Capacity

Each room supports exactly 2 users to ensure intimate, private conversations. If a third person tries to join, they'll see a "Room Full" error.

Real-Time Updates

Using Upstash Realtime's pub/sub system, messages are instantly broadcasted to all connected clients without polling or manual refresh.

Automatic Expiration

All rooms have a TTL (Time To Live) of 10 minutes. After expiration, all messages are permanently deleted from Redis, ensuring no data persistence.

---

📝 Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format code with Prettier

---

🔐 Environment Variables

Variable	Description	Required
UPSTASH_REDIS_REST_URL	Upstash Redis REST API URL	✅
UPSTASH_REDIS_REST_TOKEN	Upstash Redis REST API Token	✅

---

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

Ghost Chat can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• Render
• Fly.io
• AWS Amplify

Make sure to set all required environment variables in your deployment platform.

---

🤝 Contributing

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

1. Fork the repository
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

---

🙏 Acknowledgments

• Next.js for the amazing framework
• Elysia for the fast backend
• Upstash for serverless Redis and Realtime
• Tailwind CSS for the styling system

---

Report Bug · Request Feature