Name: Messaging App
Availability: InStock

Get started

Ready to build

Build the app you keep thinking about.

Describe your idea. Sanic AI builds the real app, end to end.

Start building See how it works

Built with Appsanic

Messaging App

A real-time chat starter for your team or community

A real-time messaging starter built on Expo and Supabase. It has a searchable conversations list with avatars, online dots, last-message previews and unread badges; 1:1 and group chats that auto-group messages into runs with day dividers; live messages, an online status dot and a typing indicator over Supabase realtime; a New chat flow to start a 1:1 or name a group; and an editable profile. Runs on your own Supabase with membership-scoped RLS, plus an opt-in 'Preview with sample data' mode.

Searchable conversations list with avatars, online dots and unread badges
1:1 and group chats with auto-grouped bubble runs and day dividers
Live messages, online status and a typing indicator over Supabase realtime
New chat flow: search people for a 1:1 or pick several and name a group
Editable profile with display name, avatar and a presence heartbeat
Runs on your own Supabase: membership-scoped RLS, triggers and realtime included

Use this template

What you can do

A real-time chat app for talking with the people in your team, club, or community. It runs entirely on your own Supabase project, so it opens on a Connect screen first: apply the included database schema, add your keys, and create an account (this is a multi-user app, so a second account has to exist for you to message anyone). Once you are in, you get a searchable list of all your conversations with unread badges, you can message one person privately or in a group, and new messages, online status, and typing indicators all appear live. If you just want to look around first, there is an opt-in 'Preview with sample data' mode that never touches a real backend.

Made forAnyone building a real-time chat app for a team, a club, a community, or a group of friends.

Message one person privately or chat in a named group
See new replies, online status, and typing indicators appear live
Scan a conversations list with previews and unread badges at a glance
Search your conversations, or search people to start a new chat
Start a one-on-one chat (find-or-create) or pick several people for a group
Edit your own profile: display name and avatar, with a presence heartbeat that keeps you 'online'

Under the hood

For developers: exactly what is included when you start from this template, taken straight from the template's own code.

Stack

Expo SDK 54React Native 0.81React 19TypeScript 5.9Supabase (Postgres, Auth, Realtime)@supabase/supabase-js 2react-native-safe-area-contextreact-native-svgreact-native-web

Screens

Connect
Shown until a Supabase backend is configured: explains how to connect one (or preview with sample data), since the app runs on your own project.
Auth
Email/password sign-in and sign-up through Supabase Auth; sign-up captures a display name for your new profile.
Conversations
The chats list with search, avatars, online dots, last-message previews, and unread badges; '+' starts a new chat.
Chat
A conversation thread with messages auto-grouped into runs (tail and timestamp on the last bubble of each run), day dividers, a live typing indicator, and a message composer.
NewChat
Search people to open a 1:1 (find-or-create), or switch to Group to pick several members and name the group.
Profile
Your editable display name and avatar URL plus your read-only email, a Save action, and Sign out.

Data model

profiles
One row per user (mirrors auth.users) with display_name, avatar_url, and last_seen; readable by any signed-in user for search and display (no email stored).
conversations
Each chat, with is_group, an optional title (groups), created_by, and last_message_at for list ordering and previews.
conversation_members
Membership pivot of conversation_id to user_id plus each member's last_read_at and joined_at; drives access control and unread counts.
messages
Individual messages with conversation_id, sender_id, body (1-4000 chars), and created_at.

Backend

RLS is on for all four tables. Reads of conversations, members, and messages are scoped to conversations you belong to via an is_member() SECURITY DEFINER helper (used in the policies so membership checks don't recurse). A member can insert a message only as themselves (sender_id = auth.uid()) into a conversation they belong to; profiles have no direct insert/update policy (writes go through RPCs).
A handle_new_user trigger on auth.users auto-creates a profile row on signup, defaulting display_name from user metadata, the email local part, or 'Member'.
A bump_last_message trigger on message insert keeps each conversation's last_message_at fresh for list ordering and previews.
SECURITY DEFINER RPCs (granted to authenticated only, with EXECUTE revoked from public): is_member, heartbeat (presence), update_my_profile (name + avatar), mark_read, start_direct_conversation (find-or-create 1:1, advisory-locked against duplicates), create_group_conversation, and list_conversations (the list with other member, last message, and unread count).
Realtime: messages, conversation_members, and conversations are added to the supabase_realtime publication so the client picks up live inserts; typing is a separate realtime broadcast (ephemeral, no table) and presence is a last_seen heartbeat (online within ~90s).
Indexes on conversation_members(user_id) and messages(conversation_id, created_at). No storage buckets and no Edge Functions are used; the app ships only the Supabase anon key (safe behind RLS).

More templates

All templates

Social

Photo Journal App

One photo a day, with your friends

View template

Social

Social Feed App

An Instagram-style starter: feed, stories, likes, comments, follows, and an activity inbox

View template

Social

Live Streaming App

Broadcast yourself, watch others live

View template

Social

Dating App

Swipe profiles, match, chat, meet

View template

Built with Appsanic

Messaging App

A real-time chat starter for your team or community

Searchable conversations list with avatars, online dots and unread badges
1:1 and group chats with auto-grouped bubble runs and day dividers
Live messages, online status and a typing indicator over Supabase realtime
New chat flow: search people for a 1:1 or pick several and name a group
Editable profile with display name, avatar and a presence heartbeat
Runs on your own Supabase: membership-scoped RLS, triggers and realtime included

Use this template

What you can do

Made forAnyone building a real-time chat app for a team, a club, a community, or a group of friends.

Message one person privately or chat in a named group
See new replies, online status, and typing indicators appear live
Scan a conversations list with previews and unread badges at a glance
Search your conversations, or search people to start a new chat
Start a one-on-one chat (find-or-create) or pick several people for a group
Edit your own profile: display name and avatar, with a presence heartbeat that keeps you 'online'

Under the hood

For developers: exactly what is included when you start from this template, taken straight from the template's own code.

Stack

Expo SDK 54React Native 0.81React 19TypeScript 5.9Supabase (Postgres, Auth, Realtime)@supabase/supabase-js 2react-native-safe-area-contextreact-native-svgreact-native-web

Screens

Connect
Shown until a Supabase backend is configured: explains how to connect one (or preview with sample data), since the app runs on your own project.
Auth
Email/password sign-in and sign-up through Supabase Auth; sign-up captures a display name for your new profile.
Conversations
The chats list with search, avatars, online dots, last-message previews, and unread badges; '+' starts a new chat.
Chat
A conversation thread with messages auto-grouped into runs (tail and timestamp on the last bubble of each run), day dividers, a live typing indicator, and a message composer.
NewChat
Search people to open a 1:1 (find-or-create), or switch to Group to pick several members and name the group.
Profile
Your editable display name and avatar URL plus your read-only email, a Save action, and Sign out.

Data model

profiles
One row per user (mirrors auth.users) with display_name, avatar_url, and last_seen; readable by any signed-in user for search and display (no email stored).
conversations
Each chat, with is_group, an optional title (groups), created_by, and last_message_at for list ordering and previews.
conversation_members
Membership pivot of conversation_id to user_id plus each member's last_read_at and joined_at; drives access control and unread counts.
messages
Individual messages with conversation_id, sender_id, body (1-4000 chars), and created_at.

Backend

RLS is on for all four tables. Reads of conversations, members, and messages are scoped to conversations you belong to via an is_member() SECURITY DEFINER helper (used in the policies so membership checks don't recurse). A member can insert a message only as themselves (sender_id = auth.uid()) into a conversation they belong to; profiles have no direct insert/update policy (writes go through RPCs).
A handle_new_user trigger on auth.users auto-creates a profile row on signup, defaulting display_name from user metadata, the email local part, or 'Member'.
A bump_last_message trigger on message insert keeps each conversation's last_message_at fresh for list ordering and previews.
SECURITY DEFINER RPCs (granted to authenticated only, with EXECUTE revoked from public): is_member, heartbeat (presence), update_my_profile (name + avatar), mark_read, start_direct_conversation (find-or-create 1:1, advisory-locked against duplicates), create_group_conversation, and list_conversations (the list with other member, last message, and unread count).
Realtime: messages, conversation_members, and conversations are added to the supabase_realtime publication so the client picks up live inserts; typing is a separate realtime broadcast (ephemeral, no table) and presence is a last_seen heartbeat (online within ~90s).
Indexes on conversation_members(user_id) and messages(conversation_id, created_at). No storage buckets and no Edge Functions are used; the app ships only the Supabase anon key (safe behind RLS).