Realtime Chat App (Ephemeral & Secure)

A modern, high-performance realtime chat application built with Next.js 16, ElysiaJS, and Upstash Redis. Designed for ephemeral conversations with self-destructing rooms.

🚀 Features

• ⚡ Realtime Messaging: Instant message delivery using @upstash/realtime.
• 💣 Ephemeral Rooms: Rooms automatically self-destruct after a set TTL (Time To Live).
• 🔒 Secure & Private: No persistent history after room destruction.
• ⚡ High Performance: Powered by ElysiaJS (backend) and Next.js App Router.
• 🎨 Modern UI: Styled with Tailwind CSS v4, featuring a dark mode aesthetic.
• 🔗 Shareable Links: Generate unique room links instantly.

🛠️ Tech Stack

• Frontend: Next.js 16 (App Router), React 19, Tailwind CSS v4
• Backend: ElysiaJS (running via Next.js API Routes)
• Database & Realtime: Upstash Redis
• State Management: TanStack Query
• Validation: Zod
• Type Safety: End-to-end type safety with @elysiajs/eden.

📂 Project Structure

├── src/
│   ├── app/
│   │   ├── api/          # Backend API routes (Elysia entry point)
│   │   ├── room/[id]/    # Chat room page
│   │   └── page.tsx      # Landing page / Lobby
│   ├── components/       # Reusable UI components
│   ├── hooks/            # Custom React hooks (useUsername, etc.)
│   ├── lib/              # Utilities & Clients (Redis, Realtime, API Client)
│   └── styles/           # Global styles
├── public/               # Static assets
└── package.json          # Dependencies & Scripts

🏁 Getting Started

Prerequisites

• Node.js: v18 or likely v20+ (for Next.js 16)
• Upstash Account: You need a Redis database and Realtime enabled.

1. Clone the Repository

git clone https://github.com/your-username/realtime-chat-app.git
cd realtime-chat-app

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Configure Environment Variables

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 to see the result.

🔌 API Documentation

The backend is built with ElysiaJS and exposed via src/app/api/[[...slug]]/route.ts.

Method	Endpoint	Description
POST	/api/room/create	Create a new room
GET	/api/room/ttl?roomId={id}	Get remaining time for a room
GET	/api/messages?roomId={id}	Fetch message history
POST	/api/messages	Send a new message
DELETE	/api/room?roomId={id}	Destroy a room immediately

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature-name.
5. Submit a pull request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

This project was inspired by [joshtriedcoding].