How to Build a Messaging Platform with Lovable

1Create a Slack-style messaging platform schema. Tables:
2
31. channels: id, name (text, unique within app), description (text), is_private (bool default false), created_by, last_message_at, created_at
4
52. channel_members: id, channel_id, user_id, last_read_at (default now()), role (text: owner|admin|member), joined_at, UNIQUE(channel_id, user_id)
6
73. dm_conversations: id, participant_a (references auth.users), participant_b (references auth.users), last_message_at, created_at, CHECK(participant_a < participant_b) to prevent duplicates
8
94. dm_participants: id, dm_conversation_id, user_id, last_read_at (default now()), UNIQUE(dm_conversation_id, user_id)
10
115. messages: id, channel_id (references channels, nullable), dm_conversation_id (references dm_conversations, nullable), thread_parent_id (references messages, nullable), user_id, body (text), metadata (jsonb default '{}'), created_at, edited_at, CHECK((channel_id IS NOT NULL) != (dm_conversation_id IS NOT NULL))
12
136. user_profiles: id (references auth.users), display_name, avatar_url, status_text (text), is_online (bool default false), updated_at
14
15RLS:
16- channels: SELECT all public channels; SELECT private only if in channel_members
17- channel_members: SELECT own rows; INSERT own rows for public channels
18- messages: SELECT if user is in channel_members (for channel messages) or dm_participants (for DMs)
19- dm_conversations: SELECT if participant_a or participant_b = auth.uid()
20
21Indexes: messages(channel_id, created_at DESC), messages(dm_conversation_id, created_at DESC), messages(thread_parent_id, created_at ASC)

1// src/contexts/SubscriptionContext.tsx
2import { createContext, useCallback, useContext, useEffect, useRef } from 'react'
3import type { RealtimeChannel } from '@supabase/supabase-js'
4import { supabase } from '@/lib/supabase'
5
6type SubscriptionMap = Map<string, RealtimeChannel>
7type MessageCallback = (payload: Record<string, unknown>) => void
8
9type SubscriptionContextValue = {
10  subscribe: (channelId: string, onMessage: MessageCallback) => void
11  unsubscribe: (channelId: string) => void
12  getChannel: (channelId: string) => RealtimeChannel | undefined
13}
14
15const SubscriptionContext = createContext<SubscriptionContextValue | null>(null)
16
17export function SubscriptionProvider({ children }: { children: React.ReactNode }) {
18  const subscriptions = useRef<SubscriptionMap>(new Map())
19
20  const subscribe = useCallback((channelKey: string, onMessage: MessageCallback) => {
21    if (subscriptions.current.has(channelKey)) return
22
23    const [type, id] = channelKey.split(':')
24    const table = 'messages'
25    const filter = type === 'channel' ? `channel_id=eq.${id}` : `dm_conversation_id=eq.${id}`
26
27    const channel = supabase
28      .channel(`msg:${channelKey}`)
29      .on('postgres_changes', { event: 'INSERT', schema: 'public', table, filter }, onMessage)
30      .subscribe()
31
32    subscriptions.current.set(channelKey, channel)
33  }, [])
34
35  const unsubscribe = useCallback((channelKey: string) => {
36    const channel = subscriptions.current.get(channelKey)
37    if (channel) {
38      supabase.removeChannel(channel)
39      subscriptions.current.delete(channelKey)
40    }
41  }, [])
42
43  const getChannel = useCallback((channelKey: string) => {
44    return subscriptions.current.get(channelKey)
45  }, [])
46
47  useEffect(() => {
48    return () => {
49      subscriptions.current.forEach((ch) => supabase.removeChannel(ch))
50      subscriptions.current.clear()
51    }
52  }, [])
53
54  return (
55    <SubscriptionContext.Provider value={{ subscribe, unsubscribe, getChannel }}>
56      {children}
57    </SubscriptionContext.Provider>
58  )
59}
60
61export const useSubscriptions = () => {
62  const ctx = useContext(SubscriptionContext)
63  if (!ctx) throw new Error('useSubscriptions must be used inside SubscriptionProvider')
64  return ctx
65}

1Build a global Command palette at src/components/CommandPalette.tsx.
2
3Requirements:
4- Trigger with Cmd+K (or Ctrl+K on Windows): use a useEffect with a keydown listener
5- Use shadcn/ui CommandDialog wrapping a Command component
6- Three CommandGroups: 'Channels', 'Direct Messages', 'Recent Messages'
7- Search logic (debounced 200ms, fires when input.length >= 2):
8  - Channels: supabase.from('channels').select().ilike('name', `%${query}%`).limit(5)
9  - Users: supabase.from('user_profiles').select().ilike('display_name', `%${query}%`).neq('id', userId).limit(5)
10  - Messages: supabase.from('messages').select('id, body, channel_id, created_at').ilike('body', `%${query}%`).limit(5)
11- Channel result: shows # icon, channel name, member count. Selecting navigates to that channel.
12- User result: shows Avatar, display name, online indicator dot. Selecting opens or creates a DM conversation.
13- Message result: shows first 60 chars of body, channel name, and timestamp. Selecting navigates to the channel and scrolls to that message.
14- Show Skeleton placeholders while searching
15- Show keyboard shortcut hint: 'Press Enter to open, Esc to close'

1// src/hooks/useTypingIndicator.ts
2import { useEffect, useRef, useState } from 'react'
3import { supabase } from '@/lib/supabase'
4import { useSubscriptions } from '@/contexts/SubscriptionContext'
5import { useAuth } from '@/hooks/useAuth'
6
7export function useTypingIndicator(channelKey: string | null) {
8  const { user } = useAuth()
9  const { getChannel } = useSubscriptions()
10  const [typingLabels, setTypingLabels] = useState<string[]>([])
11  const timeout = useRef<ReturnType<typeof setTimeout>>()
12  const presenceChannel = useRef<ReturnType<typeof supabase.channel> | null>(null)
13
14  useEffect(() => {
15    if (!channelKey || !user?.id) return
16
17    const ch = supabase.channel(`presence:${channelKey}`)
18    presenceChannel.current = ch
19
20    ch.on('presence', { event: 'sync' }, () => {
21      type P = { user_id: string; name: string; typing: boolean }
22      const state = ch.presenceState<P>()
23      const typing = Object.values(state)
24        .flat()
25        .filter((p) => p.typing && p.user_id !== user.id)
26        .map((p) => p.name)
27      setTypingLabels(typing)
28    })
29    .subscribe()
30
31    return () => { supabase.removeChannel(ch) }
32  }, [channelKey, user?.id])
33
34  const onType = async () => {
35    if (!presenceChannel.current || !user?.id) return
36    clearTimeout(timeout.current)
37    await presenceChannel.current.track({
38      user_id: user.id,
39      name: user.email?.split('@')[0] ?? 'Someone',
40      typing: true,
41    })
42    timeout.current = setTimeout(async () => {
43      await presenceChannel.current?.track({
44        user_id: user.id,
45        name: user.email?.split('@')[0] ?? 'Someone',
46        typing: false,
47      })
48    }, 3000)
49  }
50
51  const label = typingLabels.length === 0 ? null
52    : typingLabels.length === 1 ? `${typingLabels[0]} is typing...`
53    : `${typingLabels.slice(0, 2).join(' and ')} are typing...`
54
55  return { typingLabel: label, onType }
56}

1Build the messaging sidebar at src/components/MessagingSidebar.tsx.
2
3Requirements:
4- Two sections: 'Channels' (hash icon) and 'Direct Messages' (person icon)
5- Fetch channels: joined channels from channel_members + user's profile for each. For each channel, calculate unread_count = messages created after current user's last_read_at in that channel.
6- Fetch DMs: dm_conversations where participant_a or participant_b = user.id. Join other participant's user_profile. Calculate unread count the same way.
7- Sort both sections by last_message_at DESC
8- Each row: icon/avatar, name, last message preview (40 chars), relative timestamp, unread Badge
9- Unread Badge: show when count > 0, format as number up to 99 then '99+'
10- Active channel/DM: highlighted row with bg-muted
11- Subscribe to postgres_changes INSERT on messages for all channels in the list (use the SubscriptionRegistry). When a message arrives for a non-active channel, increment its local unread count.
12- When the user clicks a channel/DM, reset its local unread count to 0 and update last_read_at in Supabase.
13- Add keyboard navigation: arrow keys move between conversations, Enter opens the selected one