Real-time chat with admin features

Attempt at making an event chat (MD support) with realtime features via Zero and admin features (Timeout, slow mode, blocked words, ...). Currently still a work in progress

🍁 Overview

This project is an attempt at a real-time chat application designed for events, communities, and live discussions. It leverages the power of Rocicorp Zero for seamless real-time data synchronization and optimistic UI updates, ensuring a fluid user experience. The application provides a rich set of features for users, including Markdown support and message replies, coupled with robust admin capabilities for event management and chat moderation (EX: Slow mode, user timeouts, blocked words). Still WIP

💻 Technolgoies

• Language: Typescript
• Backend: Next.js 16 + NeonDB with Drizzle. Upstash
• Frontend: Next.js 16 + UI Components via shadcn/ui + Tailwind
• Others: Zero (Rocicorp), drizzle-zero, Auth.js, pg, zod, react-hook-form, remark, frimousse, lexical and more

🚀 Features

• 💬 Real-Time Messaging: Experience instant message delivery and updates powered by Rocicorp Zero's optimistic UI. Along with markdown (limited) support and emoji picker (frimmouse)
• 📱 Responsive Design: Enjoy a seamless chat experience on desktop, tablet, or mobile devices.
• 🎨 Light/Dark Mode: Switch between light and dark themes for your viewing comfort.
• 🔐 Role-Based Access Control: Differentiated experience for regular users and administrators.
• 🗓️ Event Management: Admins can create, activate, and manage chat events (WIP).
• ⏳ Slow Mode: Admins can enable/configure slow mode for the chat, limiting how often users can send messages (WIP).
• 🧵 Threaded Replies: Reddit-style replies with compact previews in the main feed and a full thread dialog for deep/nested replies.
• 🚫 Blocked Words Filter: Admin-managed blocked words list (in-chat UI) with server-side enforcement.
• ⏲️ User Timeout/Mute: Admins can temporarily mute or timeout users.
• 📈 Rate Limiting: Per-user and global message rate limiting via Upstash (server-side enforced).

🤝 Usage

1. Chat
   1. In the application login/signup
   2. Then you can join the active events (Currently, it just pushes to /chat)
   3. Here you'll see a familiar chat interface with intuitive buttons
   4. Right-click (or long-press on mobile) on a message to reply or view its timestamp.
2. Admin
   1. If your account has admin privileges you can access admin dashboard and do suer and event management (WIP)
   2. Otherwise in the chat interface you can delete message via the context menu, see blocked words, timeout or mute users and much more (Partial)
   3. You have more functionality in chats as well

⚙️ Setup

• Get Node (v22+ used) and pnpm (v10.x).
• Setup upstash and neon
• Clone the project and take .env.example and rename to .env (Zero didn't pick up .env.local) and set it up
• Run the following commands

pnpm db:generate
pnpm zero:generate-schema
pnpm dev
# If you want to build then instead of zero: just do pnpm build -> pnpm start

📱 Screenshots

(Rest are still WIP)

📄 Additional Notes

• See LICENSE (GPLv3)
• Feel free to raise issues if you notice anything wrong

• Full implementation of Slow Mode controls per user and global.
• User timeout/mute functionality for admins.
• Comprehensive blocked words filter.
• Better markdown implementation and reply system (Threaded replies)
• Blocked words admin UI + enforcement
• User presence indicators.
• Sound notifications for new messages.
• More detailed admin analytics.
• Customizable user profiles.
• Support for multiple chat rooms/events simultaneously and event details/categories.
• Polls or Q&A features within chat.
• Image link shows as actual image