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