🔥 Real-Time Ephemeral Chat System

A secure, real-time chat application with self-destructing rooms built using Next.js, TypeScript, and Upstash services.

🌟 Features

• 🔒 Ephemeral Messaging: Chat rooms automatically destroy themselves after use
• ⚡ Real-time Communication: Powered by Upstash Realtime
• 🛡️ Anonymous Chat: No user registration required - temporary identities
• 📱 Responsive Design: Works seamlessly across all devices
• 🎨 Modern UI: Clean, dark-themed interface with Tailwind CSS
• 📦 Type Safety: Full TypeScript support throughout
• ⚡ Fast Performance: Optimized with Next.js 16 and React Server Components

🚀 Tech Stack

• Frontend: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: React Query
• Real-time: Upstash Realtime
• Data Storage: Upstash Redis
• API Framework: Elysia.js
• Validation: Zod

📋 Prerequisites

• Node.js 18+ or Bun
• npm, yarn, pnpm, or bun package manager
• Upstash account (for Redis and Realtime services)

🗝️ Environment Variables

This project requires several environment variables to function properly. These variables configure connections to external services and control various aspects of the application.

Required Services

1. Upstash Redis - For storing chat room data and session information
2. Upstash Realtime - For real-time messaging functionality

Setting up Environment Variables

1. Create a .env.local file in the project root directory
2. Add the following variables:

# Upstash Redis Configuration
UPSTASH_REDIS_REST_URL=your_redis_rest_url
UPSTASH_REDIS_REST_TOKEN=your_redis_rest_token

# Upstash Realtime Configuration  
UPSTASH_REALTIME_URL=your_realtime_url
UPSTASH_REALTIME_TOKEN=your_realtime_token

# Application Settings
NEXT_PUBLIC_APP_URL=http://localhost:3000
ROOM_EXPIRY_TIME=3600  # Room expiry time in seconds

How to Obtain Service Credentials

Upstash Redis

1. Sign up at Upstash Console
2. Create a new Redis database
3. Copy the REST URL and token from the database dashboard
4. Add them to your environment variables as UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN

Upstash Realtime

1. In your Upstash console, navigate to the Realtime section
2. Create a new Realtime database
3. Copy the URL and token from the database dashboard
4. Add them to your environment variables as UPSTASH_REALTIME_URL and UPSTASH_REALTIME_TOKEN

Note: Never commit your .env.local file to version control. It's already included in the .gitignore file.

🛠️ Installation

1. Clone the repository

   git clone https://github.com/x0lg0n/Real-Time-Ephemeral-Chat-System
   cd real-time-ephemeral-chat-system

2. Install dependencies

   # Using npm
   npm install
   
   # Using yarn
   yarn install
   
   # Using pnpm
   pnpm install
   
   # Using bun
   bun install

3. Environment Setup

   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
   
   # Upstash Realtime Configuration
   UPSTASH_REALTIME_URL=your_realtime_url
   UPSTASH_REALTIME_TOKEN=your_realtime_token
   
   # Application Settings
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   ROOM_EXPIRY_TIME=3600  # Room expiry time in seconds

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

5. Open your browser Navigate to http://localhost:3000

📖 Usage

1. Create a Chat Room

   • Visit the homepage
   • Your temporary identity will be generated automatically
   • Click "CREATE SECURE ROOM" to start a new chat session

2. Share the Room

   • Copy the room URL and share it with participants
   • Anyone with the link can join the chat

3. Chat Features

   • Real-time messaging between participants
   • Messages are encrypted in transit
   • Room automatically expires after the set time period
   • All messages are permanently deleted when the room expires

4. Room Expiry

   • Rooms automatically self-destruct after the configured time
   • All data is permanently removed from the system
   • No data retention beyond room lifetime

🏗️ Project Structure

real-time-ephemeral-chat-system/
├── src/
│   ├── app/                    # Next.js app router
│   │   ├── api/                # API routes
│   │   ├── room/[roomId]/      # Room page
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home page
│   ├── components/             # React components
│   ├── hooks/                  # Custom hooks
│   └── lib/                    # Utility libraries
├── public/                     # Static assets
├── elysia/                     # API server (separate)
├── README.md
└── package.json

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🎯 Contributing

We welcome contributions from the community! Here's how you can help make this project better:

🚀 Getting Started

1. Fork the Repository

   • Click the "Fork" button at the top right of this repository
   • Clone your forked repository to your local machine git clone https://github.com/x0lg0n/real-time-ephemeral-chat-system.git cd real-time-ephemeral-chat-system

2. Set Up Development Environment

   • Install dependencies: bun install
   • Create your .env.local file (see Environment Variables section)
   • Start the development server: bun run dev

3. Create a Feature Branch git checkout -b feature/your-feature-name Use descriptive branch names like:

   • feature/add-user-authentication
   • bugfix/fix-room-expiry-issue
   • enhancement/improve-ui-components

📝 Development Guidelines

Code Quality Standards:

• ✅ Use TypeScript for all new code
• ✅ Follow the existing ESLint configuration
• ✅ Write clear, descriptive commit messages
• ✅ Include tests for new functionality
• ✅ Ensure all existing tests pass before submitting

Commit Message Format:

type(scope): brief description

Detailed explanation of changes (optional)

• Specific changes made
• Reason for changes
• Impact on functionality

Resolves: #issue-number (if applicable)

Commit Types:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• style: Code style changes (formatting, etc.)
• refactor: Code refactoring
• test: Adding or modifying tests
• chore: Maintenance tasks

🔄 Submission Process

1. Before Pushing:

   • Run code quality checks

        bun run lint
        bun run build

   • Ensure all tests pass

        bun test

2. Push Your Changes:

      git push origin feature/-your-feature-name

3. Create Pull Request:

   • Go to your fork on GitHub
   • Click "New Pull Request"
   • Select your feature branch
   • Provide a clear title and detailed description
   • Link any related issues

🎯 What We're Looking For

Areas for Contribution:

• 🐛 Bug fixes and performance improvements
• ✨ New features and enhancements
• 📚 Documentation improvements
• 🎨 UI/UX enhancements
• 🧪 Test coverage expansion
• 📱 Mobile responsiveness improvements

Good First Issues: Check our GitHub Issues for issues labeled good first issue or help wanted.

🤝 Community Guidelines

• Be respectful and inclusive
• Provide constructive feedback
• Help others learn and grow
• Follow our Code of Conduct
• Ask questions in our Discussions

📋 Pull Request Review Process

1. Initial Review: Maintainers will review your PR within 48 hours
2. Feedback: Address any requested changes
3. Approval: Once approved, your PR will be merged
4. Celebration: 🎉 Your contribution is now part of the project!

🆘 Need Help?

• Check our Documentation
• Join our Discord Community
• Create a GitHub Discussion
• Contact maintainers via email

Thank you for contributing to make this project amazing! 🚀

Code Quality Standards

• Use TypeScript for all new code
• Follow ESLint configuration
• Write meaningful commit messages
• Include tests for new functionality
• Ensure all existing tests pass

📄 License

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

📞 Support

For support, questions, or feature requests:

• Create an issue in the GitHub Issues
• Contact the maintainer via email

💙 Acknowledgements

• Next.js - React framework
• Upstash - Redis and Realtime services
• Tailwind CSS - Styling framework
• React Query - Server state management
• Elysia.js - API framework

---

Made with ❤️ and ☕