🔒 Private Chat - Real-time Self-Destructing Chat Rooms

A modern, real-time chat application built with Next.js 16 that creates private, self-destructing chat rooms. Share a room link and chat securely with automatic message deletion after 10 minutes.

✨ Features

• 🔐 Private Chat Rooms - Create secure, temporary chat rooms with unique IDs
• ⏱️ Self-Destructing - Rooms automatically expire after 10 minutes
• 👥 User Limits - Configure room capacity (1-20 users)
• ⚡ Real-time Messaging - Instant message delivery using Upstash Realtime
• 🎨 Modern UI - Beautiful interface with dark/light theme support
• 🌈 Theme Colors - Customizable theme colors with smooth transitions
• 💣 Manual Destruction - Option to destroy rooms immediately
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices

🛠️ Tech Stack

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• shadcn/ui - UI component library
• TanStack Query - Data fetching and state management
• React Hook Form - Form handling
• Zod - Schema validation

Backend

• Elysia.js - Fast web framework for API routes
• Upstash Redis - Serverless Redis for data persistence
• Upstash Realtime - Real-time pub/sub messaging
• Eden Treaty - Type-safe API client

📋 Prerequisites

• Node.js 18+ or Bun runtime
• Upstash Account - For Redis and Realtime services
  • Create a Redis database at Upstash Console
  • Get your REST URL and token

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/vishkx/nextjs16_realtime_chat.git
cd nextjs16_realtime_chat

2. Install Dependencies

Using Bun (recommended):

bun install

Or using npm:

npm install

3. Environment Variables

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

# Upstash Redis Configuration
UPSTASH_REDIS_REST_URL=your_redis_rest_url
UPSTASH_REDIS_REST_TOKEN=your_redis_rest_token

# Optional: Custom API URL (for production)
NEXT_PUBLIC_API_URL=https://your-domain.com

Get your Upstash credentials:

1. Go to Upstash Console
2. Create a new Redis database
3. Copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN

4. Run Development Server

Using Bun:

bun run dev

Or using npm:

npm run dev

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

📖 Usage

Creating a Chat Room

1. Enter your username (auto-generated if not set)
2. Set the maximum number of users (1-20)
3. Click "CREATE SECURE ROOM"
4. Share the room link with others

Joining a Chat Room

1. Open the shared room link
2. You'll automatically join if the room has available slots
3. Start chatting in real-time!

Room Features

• Self-Destruct Timer - Countdown shows remaining time (10 minutes)
• Copy Link - Easily share the room URL
• Destroy Now - Manually destroy the room and all messages
• Theme Toggle - Switch between light and dark modes
• Color Themes - Customize theme colors

📁 Project Structure

nextjs16_realtime_chat/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (app)/              # Main app routes
│   │   │   ├── page.tsx        # Home page (room creation)
│   │   │   └── layout.tsx      # App layout
│   │   ├── room/
│   │   │   └── [roomId]/      # Dynamic room route
│   │   │       └── page.tsx    # Chat room interface
│   │   └── api/                # API routes
│   │       ├── [[...slugs]]/   # Elysia API handler
│   │       └── realtime/       # Realtime WebSocket handler
│   ├── components/
│   │   ├── custom/             # Custom components
│   │   │   ├── theme-color-toggle.tsx
│   │   │   └── animated-theme-toggler.tsx
│   │   └── ui/                 # shadcn/ui components
│   ├── lib/
│   │   ├── client.ts           # Eden Treaty API client
│   │   ├── redis.ts            # Upstash Redis client
│   │   ├── realtime.ts         # Realtime server setup
│   │   └── realtime-client.ts  # Realtime client hooks
│   ├── hooks/                  # Custom React hooks
│   └── context/                # React context providers
├── public/                     # Static assets
├── package.json
├── tsconfig.json
└── next.config.ts

🔧 Development

Available Scripts

# Start development server
bun run dev

# Build for production
bun run build

# Start production server
bun run start

# Run linter
bun run lint

Key Implementation Details

• Room Management: Rooms are stored in Redis with a 10-minute TTL
• Authentication: Token-based auth using HTTP-only cookies
• Real-time Updates: Upstash Realtime for instant message delivery
• Message History: Messages stored in Redis lists, synced with room TTL
• User Tracking: Connected users tracked per room with max capacity

🌐 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables:
   • UPSTASH_REDIS_REST_URL
   • UPSTASH_REDIS_REST_TOKEN
4. Deploy!

Other Platforms

The app can be deployed to any platform supporting Next.js:

• Netlify
• Railway
• Render
• AWS Amplify

Make sure to set the environment variables in your deployment platform.

🔒 Security Features

• Token-based Authentication - HTTP-only cookies for secure room access
• Room Capacity Limits - Prevents unauthorized access
• Automatic Expiration - Rooms and messages auto-delete after TTL
• No Persistent Storage - All data is temporary and ephemeral

🤝 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

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Upstash for Redis and Realtime services
• shadcn/ui for beautiful UI components
• Elysia.js for the fast API framework
• Next.js team for the amazing framework

📧 Contact

For questions or suggestions, please open an issue on GitHub.

---

Made with ❤️ using Next.js 16 and Upstash