Build a Real-Time Chat App with Remix and Supabase

Database Schema Design

A well-designed database schema forms the foundation of any scalable chat application. The schema must efficiently represent the relationships between users, conversations, and individual messages while supporting the query patterns your application needs.

Core Tables Structure

-- Users table extends Supabase auth.users
create table public.profiles (
 id uuid references auth.users not null primary key,
 username text unique,
 avatar_url text,
 created_at timestamptz default now()
);

-- Chats table represents conversations between users
create table public.chats (
 id uuid default gen_random_uuid() primary key,
 created_at timestamptz default now()
);

-- Chat participants junction table
create table public.chat_participants (
 id uuid default gen_random_uuid() primary key,
 chat_id uuid references public.chats on delete cascade not null,
 user_id uuid references public.profiles on delete cascade not null,
 joined_at timestamptz default now(),
 unique(chat_id, user_id)
);

-- Messages table stores individual messages
create table public.messages (
 id uuid default gen_random_uuid() primary key,
 chat_id uuid references public.chats on delete cascade not null,
 sender_id uuid references public.profiles on delete cascade not null,
 content text not null,
 created_at timestamptz default now()
);

-- Indexes for efficient querying
create index idx_messages_chat_id_created on public.messages(chat_id, created_at desc);
create index idx_chat_participants_user on public.chat_participants(user_id);

This schema separates concerns while enabling efficient queries. The junction table for chat participants allows for group chats with more than two participants. The composite index on messages ensures that fetching conversation history performs efficiently even with large message histories.

Row Level Security

Supabase's Row Level Security (RLS) policies are essential for protecting user data:

-- Messages: participants can view messages in their chats
create policy "Participants can view messages"
 on public.messages for select
 using (
 exists (
 select 1 from public.chat_participants
 where chat_id = messages.chat_id
 and user_id = auth.uid()
 )
 );

-- Messages: authenticated users can insert messages
create policy "Authenticated users can insert messages"
 on public.messages for insert
 with check (auth.role() = 'authenticated');

For a complete implementation reference, see the LogRocket guide on building a Remix Supabase real-time chat app. Building secure, real-time applications requires careful attention to both database design and access control patterns. Our web development services team specializes in architecting scalable backend solutions.

Supabase Configuration

Project Setup and Environment Variables

Properly configuring your Supabase project and managing environment variables is crucial for both development workflow and production security.

Supabase provides both a development key (anon key) and a service role key. The anon key can be safely used in client-side code because RLS policies will still enforce data access rules. The service role bypasses RLS entirely and should never be exposed to clients.

// lib/supabase.ts - Client-side Supabase client
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// lib/supabaseAdmin.ts - Server-side admin client (bypasses RLS)
export const supabaseAdmin = createClient(
 process.env.SUPABASE_URL!,
 process.env.SUPABASE_SERVICE_ROLE_KEY!,
 { auth: { autoRefreshToken: false, persistSession: false } }
);

Enabling Realtime Features

Supabase realtime must be explicitly enabled for tables that should broadcast changes. You also need to configure broadcast authorization through policies on the realtime.messages table.

-- Allow authenticated users to receive broadcasts
create policy "Authenticated users can receive broadcasts"
 on realtime.messages for select
 to authenticated
 using (true);

The combination of RLS on data tables and realtime authorization ensures users can only receive updates for data they're authorized to access. Learn more about realtime subscriptions in the Supabase Documentation on Realtime Subscriptions. Our team has extensive experience integrating Supabase with modern web frameworks to build secure, scalable applications.

Building the Remix Application

Route Structure

Remix's file-based routing naturally maps to chat application patterns:

app/
├── routes/
│ ├── _index.tsx # Landing page
│ ├── login.tsx # Authentication
│ ├── chats.tsx # Chat list layout (requires auth)
│ ├── chats._index.tsx # List of user's conversations
│ ├── chats.$chatId.tsx # Individual chat conversation
│ └── api.messages.tsx # Message-related action handlers

Authentication Integration

Authentication combines Remix's session management with Supabase's auth system:

// services/auth.server.ts
export async function requireUser(request: Request) {
 const supabase = createServerClient(/* ... */);
 const { data: { user }, error } = await supabase.auth.getUser();

 if (error || !user) {
 throw redirect('/login');
 }

 return user;
}

Loading Conversation Data

Loader functions fetch the initial data with cursor pagination:

export async function loader({ request, params }: LoaderFunctionArgs) {
 const user = await requireUser(request);
 const { chatId } = params;
 const url = new URL(request.url);
 const cursor = url.searchParams.get('cursor');
 const limit = 30;

 let query = supabaseAdmin
 .from('messages')
 .select('*, sender:profiles(*)')
 .eq('chat_id', chatId)
 .order('created_at', { ascending: false })
 .limit(limit);

 if (cursor) {
 query = query.lt('created_at', cursor);
 }

 const { data: messages } = await query;

 return json({
 messages: messages || [],
 nextCursor: messages?.length === limit 
 ? messages[messages.length - 1].created_at 
 : null,
 });
}

For a full working implementation, check out the GitHub repository with Remix Supabase realtime chat code.

Implementing Real-Time Functionality

Custom Hook for Realtime Updates

React hooks provide the abstraction for integrating realtime updates:

// hooks/useMessageListener.ts
export function useMessageListener(
 chatId: string,
 currentUserId: string
) {
 const queryClient = useQueryClient();
 const queryKey = useMemo(() => ['messages', chatId], [chatId]);

 useEffect(() => {
 const channel = supabase
 .channel(`chat:${chatId}`)
 .on('broadcast', { event: 'INSERT' }, (payload) => {
 const { record } = payload.payload;

 // Ignore messages we sent (already optimistically added)
 if (record.sender_id === currentUserId) return;

 // Add received message to the cache
 queryClient.setQueryData(queryKey, (oldData) => {
 if (!oldData) return oldData;
 return {
 ...oldData,
 pages: [
 { ...oldData.pages[0], data: [record, ...oldData.pages[0].data] },
 ...oldData.pages.slice(1),
 ],
 };
 });
 })
 .subscribe();

 return () => supabase.removeChannel(channel);
 }, [chatId, currentUserId, queryClient, queryKey]);
}

Fetching Messages with React Query

// hooks/useFetchMessages.ts
export function useFetchMessages(chatId: string) {
 return useInfiniteQuery({
 queryKey: ['messages', chatId],
 queryFn: ({ pageParam }) => fetchMessages({ chatId, cursor: pageParam }),
 getNextPageParam: (lastPage) =>
 lastPage.hasMore ? lastPage.nextCursor : undefined,
 });
}

Sending Messages with Optimistic Updates

// hooks/useSendMessage.ts
export function useSendMessage(chatId: string) {
 const queryClient = useQueryClient();
 const queryKey = ['messages', chatId];

 return useMutation({
 mutationFn: async (content: string) => {
 await supabase.from('messages').insert({ chat_id: chatId, content });
 },
 onMutate: async (content) => {
 await queryClient.cancelQueries({ queryKey });
 const previousData = queryClient.getQueryData(queryKey);

 queryClient.setQueryData(queryKey, (old) => {
 if (!old) return old;
 const newMessage = { id: crypto.randomUUID(), content, created_at: new Date().toISOString() };
 return { ...old, pages: [{ ...old.pages[0], data: [newMessage, ...old.pages[0].data] }, ...old.pages.slice(1)] };
 });

 return { previousData };
 },
 onError: (error, vars, context) => {
 if (context?.previousData) {
 queryClient.setQueryData(queryKey, context.previousData);
 }
 },
 });
}

For advanced patterns on implementing realtime messaging, see the Level Up Coding guide on Supabase + React realtime messaging.

Performance and Best Practices

Pagination Strategies

Cursor-based pagination is essential for chat applications. Unlike offset pagination, cursor-based approaches maintain consistent performance regardless of how far back you're querying. For message lists, timestamps make excellent cursors because they're naturally ordered and allow for efficient range queries.

Error Handling Patterns

export class ChatError extends Error {
 constructor(
 message: string,
 public code: 'NETWORK' | 'VALIDATION' | 'PERMISSION' | 'UNKNOWN',
 public recoverable = false
 ) {
 super(message);
 this.name = 'ChatError';
 }
}

Security Considerations

Chat applications handle sensitive user communications. Beyond RLS policies:

• Rate limiting on message sends prevents spam
• Input sanitization protects against XSS attacks
• HTTPS ensures encrypted communication
• Content validation strips potentially dangerous HTML

import DOMPurify from 'isomorphic-dompurify';

function sanitizeMessage(content: string): string {
 return DOMPurify.sanitize(content, {
 ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
 ALLOWED_ATTR: ['href', 'rel'],
 FORBID_TAGS: ['script', 'style', 'iframe'],
 });
}

Building realtime chat functionality requires careful attention to both performance and security. If you're looking to integrate chat features into your web application development or need assistance with custom software solutions, our team can help architect and implement scalable communication features. For organizations exploring AI-powered automation, real-time communication infrastructure forms the foundation for intelligent customer interaction systems.

Conclusion

Building a real-time chat application with Remix and Supabase combines modern server-side rendering patterns with powerful realtime database features. The architecture scales from simple one-on-one conversations to complex multi-user platforms.

The key decisions--choosing database broadcasts over simple subscriptions, implementing proper RLS policies, designing efficient pagination, and handling errors gracefully--will impact your application's performance and maintainability. Start with the patterns outlined in this guide, then adapt them to your specific requirements.

Modern chat features extend beyond basic messaging: typing indicators, read receipts, message reactions, and media sharing. Each builds on the foundation established here--Supabase's realtime infrastructure and Remix's data loading patterns provide the flexibility to add capabilities without architectural changes. Whether you're building a customer support platform, team collaboration tool, or social messaging application, this architecture provides a solid foundation for any real-time application development.

Sources

1. LogRocket: Remix Supabase Real-Time Chat App
2. Supabase Documentation: Realtime Subscriptions
3. Supabase Documentation: Database Broadcasts
4. GitHub: vijitail/remix-supabase-realtime-chat
5. Level Up Coding: Implementing Realtime Messaging with Supabase + React