1. 🧱 Organize the Project Structure In your app/ directory:

Copy code app/ │ ├── layout.tsx ├── page.tsx ← Root page │ ├── components/ │ ├── Sidebar.tsx ← Left nav + chat list │ ├── ChatList.tsx │ ├── ChatWindow.tsx │ ├── ChatHeader.tsx │ ├── ChatMessages.tsx │ └── ChatInput.tsx │ ├── lib/ │ └── supabaseClient.ts ← Init Supabase │ └── chatService.ts ← All Supabase queries here │ └── types/ └── index.ts ← Chat, Message, User types (use Zod if needed) 2. 🔌 Integrate Supabase In lib/supabaseClient.ts:

ts Copy code import { createClient } from '@supabase/supabase-js'

export const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! ) Add .env.local:

env Copy code NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key 3. 📦 Build Supabase Query Functions In lib/chatService.ts:

ts Copy code import { supabase } from './supabaseClient'

// Get chats for a user export async function getUserChats(userId: string) { const { data, error } = await supabase .from('chat_participants') .select(chat_id, chats(id, title, updated_at, chat_participants(user_id, users(username)))) .eq('user_id', userId)

if (error) throw error

// Format as needed return data }

// Get messages export async function getMessages(chatId: string) { const { data, error } = await supabase .from('messages') .select('*, users!messages_sender_id_fkey(username)') .eq('chat_id', chatId) .order('created_at', { ascending: true })

if (error) throw error

return data }

// Send a message export async function sendMessage(chatId: string, senderId: string, content: string) { const { error } = await supabase.from('messages').insert({ chat_id: chatId, sender_id: senderId, content })

if (error) throw error } 4. ⚙️ Connect UI to Data (Minimal State) Use useEffect() in ChatList.tsx and ChatMessages.tsx to:

Fetch chats → highlight active chat

Fetch messages → scroll to bottom

Use useState minimally to manage:

currentChatId

currentUserId (from Supabase auth.getUser())

Use supabase.auth.getUser() in a layout effect to get the logged-in user ID.

5. 🔄 Enable Real-Time Messaging Use:

ts Copy code supabase .channel(chat-${chatId}) .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: chat_id=eq.${chatId} }, payload => { // Append to message state }) .subscribe()