Team Chat Box
Editor.tsx - IDEKIT
Explorer
components
VibeEditor.tsx
Sidebar.tsx
app
tsVibeEditor.tsx
1import React from "react";
2
3export function VibeEditor() {
4return (
5<div className="vibe-station">
6Hello World
7</div>
8);
9}
main*0 errorsLn 5, Col 24UTF-8TypeScript React

Included Snippets

Realtime Subscription

Listen for new messages in a channel.

supabase-sub
1useEffect(() => {
2 const channel = supabase
3 .channel(`room:${roomId}`)
4 .on('postgres_changes', {
5 event: 'INSERT',
6 schema: 'public',
7 table: 'messages',
8 filter: `room_id=eq.${roomId}`
9 }, (payload) => {
10 addMessage(payload.new);
11 })
12 .subscribe();
13
14 return () => supabase.removeChannel(channel);
15}, [roomId]);
PRO KITby IdeKit

Team Chat Box

A self-hosted team communication platform similar to Slack. Features real-time messaging, threads, emoji reactions, and file sharing using Supabase Realtime and Next.js 14.

Tech Stack
Next.js 14Supabase RealtimeZustandFramer Motion
$99
One-time payment
Availability
30 / 30 left

Secured by Stripe