Tlkr 💬

Chat for the moment, not for the record.

A real-time, self-destructing chat application built with Next.js 16. Create temporary chat rooms that automatically expire after 10 minutes, leaving no trace behind.

🔗 Live Demo: https://tlkr.onepieceweb.tech/

✨ Features

• 🔥 Self-Destructing Rooms - All chat rooms automatically expire after 10 minutes
• ⚡ Real-time Messaging - Instant message delivery using Upstash Realtime
• 🔒 Privacy First - No message history, no logs, just ephemeral conversations
• 👥 Two-Person Rooms - Private 1-on-1 conversations with room capacity of 2 users
• 🎯 Simple UX - Create a room, share the link, start chatting
• 📱 Responsive Design - Works seamlessly across all devices
• ⏱️ Live Countdown - Real-time timer showing when the room will self-destruct
• 💣 Manual Destruction - Destroy your room instantly with the "DESTROY NOW" button
• 👤 Anonymous Identity - Auto-generated usernames (e.g., anonymous-wolf-abc12)
• 🔗 Link Preview Support - Bot detection allows social media link previews without authentication

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• State Management: TanStack Query (React Query)
• Backend: Elysia.js API routes
• Database: Upstash Redis for message storage
• Real-time: @upstash/realtime for WebSocket connections
• Validation: Zod schemas
• ID Generation: nanoid
• Code Quality: Biome for linting and formatting
• Deployment: Vercel

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Upstash Redis database (Create one free)
• Upstash Realtime instance

Installation

1. Clone the repository

   git clone https://github.com/yourusername/tlkr.git
   cd tlkr

2. Install dependencies

   bun install

3. Set up environment variables

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

   UPSTASH_REDIS_REST_URL=your_redis_url
   UPSTASH_REDIS_REST_TOKEN=your_redis_token

4. Run the development server

   bun run dev

5. Open http://localhost:3000

📁 Project Structure

tlkr/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── [[...slugs]]/   # Elysia.js API routes (room & messages)
│   │   │   │   ├── auth.ts     # Token-based auth middleware
│   │   │   │   └── route.ts    # Room creation, TTL, destruction & messaging
│   │   │   └── realtime/       # Upstash Realtime WebSocket handler
│   │   ├── room/[roomId]/      # Dynamic chat room page
│   │   ├── layout.tsx          # Root layout with providers
│   │   └── page.tsx            # Landing page (lobby)
│   ├── components/
│   │   └── providers.tsx       # React Query & Realtime providers
│   ├── hooks/
│   │   └── use-username.ts     # Anonymous username generator
│   ├── lib/
│   │   ├── client.ts           # Eden Treaty API client
│   │   ├── realtime-client.ts  # Realtime hook for client components
│   │   ├── realtime.ts         # Realtime instance with Zod schemas
│   │   └── redis.ts            # Redis client configuration
│   └── proxy.ts                # Room access middleware (auth & capacity)
└── public/                     # Static assets

🎮 How It Works

1. Create a Room: Click "CREATE SECURE ROOM" to generate a new chat room with a unique ID
2. Share the Link: Copy and share the unique room URL with one other person
3. Join with Token: Each user receives an auth token (stored in cookies) to access the room
4. Start Chatting: Both participants can send and receive messages in real-time
5. Auto-Destruction: After 10 minutes, the room and all messages are permanently deleted
6. Manual Destruction: Either participant can click "DESTROY NOW" to immediately delete the room

🔐 Security Model

• Token-Based Access: Users receive an HTTP-only cookie (x-auth-token) when joining a room
• Room Capacity: Maximum of 2 users per room prevents unauthorized access
• No Persistence: Messages are stored only in Redis with automatic TTL expiration
• Bot Detection: Social media crawlers (WhatsApp, Discord, etc.) bypass auth for link previews only

🔧 Available Scripts

bun run dev       # Start development server
bun run build     # Build for production
bun run start     # Start production server
bun run lint      # Run Biome linter
bun run format    # Format code with Biome

🌟 Key Implementation Details

• Message TTL: Redis keys automatically expire after 10 minutes (600 seconds)
• Real-time Updates: WebSocket connections via Upstash Realtime for instant message delivery
• Type Safety: End-to-end type safety with Elysia + Eden Treaty + Zod schemas
• React 19: Leveraging the latest React features including the React Compiler
• Next.js 16: Using the App Router with React Server Components
• Validation: All API inputs validated with Zod (max 100 chars for username, 1000 for messages)

📝 License

MIT

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

---

Built with ⚡ by a developer who values privacy and ephemeral conversations.