LiveChat

A real-time chat application with channels, typing indicators, and emoji reactions. Built with Next.js and designed to connect to Supabase Realtime.

Live Demo

Currently runs as a client-side demo using BroadcastChannel API for cross-tab sync. Add Supabase credentials to enable full real-time messaging across users.

Features

• Multiple chat channels (General, Random, Tech Talk)
• Real-time message delivery (cross-tab sync in demo mode)
• Typing indicators
• Emoji reactions on messages
• Online user presence
• Dark theme (Discord/Slack inspired)
• Responsive design with collapsible sidebars

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Real-time: BroadcastChannel API (demo) / Supabase Realtime (production)

Getting Started

npm install
npm run dev

Open multiple tabs to see real-time sync in action.

Connecting to Supabase Realtime

1. Create a Supabase project
2. Create a messages table with columns: id, channel, username, content, reactions, created_at
3. Enable Realtime on the messages table
4. Add credentials to .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key