StackPrism
Real-time and media

Tech stack for a real-time chat app (2026)

Team chat app on Phoenix, designed by StackPrism from one sentence: 12 components, a reason for each, and the live checks that watch them.

The stack

  • React Native
  • Next.js
  • Clerk
  • Phoenix
  • Oban
  • Meilisearch
  • Firebase Cloud Messaging
  • Supabase
  • PostgreSQL
  • Redis
  • Sentry
Real-timeElixirChatUpdated
The idea someone typed
“A team chat app like a small Slack: channels, direct messages, typing indicators, read receipts, file sharing, message search and push notifications on mobile.”

Their answers on the constraints step

What they know
Elixir

Make it yours. Open this stack in the editor to check its health, harden it and hand it to your coding agent. No sign-up, nothing to generate.

Start from this stack
goes down

Select a component to see what it does and what it connects to, or pick one above to see what breaks if it goes down. Pinch or use the buttons to zoom.

Why this stack

The backend is Elixir and Phoenix, which the team knows and which is built for many long-lived connections. Web and mobile clients sign in with Clerk, call the Phoenix API for history and uploads, and hold a Phoenix Channels connection for live messages and typing indicators. Messages are saved to PostgreSQL, presence lives in Redis, and attachments go to Supabase Storage. Oban workers do the work that can wait: indexing messages in Meilisearch for search and sending push notifications through Firebase Cloud Messaging. Sentry reports errors.

Why each piece

All 12 components on the diagram: what each one does, what it talks to, and what stops if it goes down.

  1. React Native Mobile App

    In Client Layer

    Mobile client. Calls Clerk (auth), Sentry (errors) and Phoenix API.

    Nothing else on the diagram depends on it.

  2. Next.js Web App

    In Client Layer

    Web client. Calls Clerk (auth), Sentry (errors) and Phoenix API.

    Nothing else on the diagram depends on it.

  3. Clerk

    In Cross-cutting Concerns

    Auth and sessions. Called by Next.js Web App (auth) and React Native Mobile App (auth).

    If it goes down, 2 of 11 components stop working.

  4. Phoenix Channels

    In Backend Services

    Realtime layer. Called by Client Layer (realtime).

    If it goes down, 2 of 11 components degrade.

  5. Phoenix API

    In Backend Services

    Core chat API. Calls Sentry (errors), PostgreSQL (writes), Redis (reads) and Supabase Storage (uploads). Called by Next.js Web App and React Native Mobile App.

    If it goes down, 2 of 11 components stop working.

  6. Oban Workers

    In Application Layer

    Async jobs. Calls Meilisearch (indexes) and Firebase Cloud Messaging (pushes).

    Nothing else on the diagram depends on it.

  7. Meilisearch

    In Search and Notifications

    Full-text search. Called by Oban Workers (indexes).

    If it goes down, 1 of 11 components degrades.

  8. Firebase Cloud Messaging

    In Search and Notifications

    Push notifications. Called by Oban Workers (pushes).

    If it goes down, 1 of 11 components degrades.

  9. Supabase Storage

    In Data Layer

    File attachments. Called by Phoenix API (uploads).

    If it goes down, 1 of 11 components degrades.

  10. PostgreSQL

    In Data Layer

    Primary database. Called by Phoenix API (writes).

    If it goes down, 3 of 11 components stop working.

  11. Redis

    In Data Layer

    Presence cache. Called by Phoenix API (reads).

    If it goes down, 1 of 11 components degrades.

  12. Sentry

    In Cross-cutting Concerns

    Error tracking. Called by Phoenix API (errors), Next.js Web App (errors) and React Native Mobile App (errors).

    If it goes down, 3 of 11 components degrade.

When this stack fits

  • Many people stay connected all day, sending messages and typing indicators.
  • Your team knows Elixir, or wants a backend built around concurrency.
  • Search and push notifications can trail the message by a moment.

When to pick something else

  • No one on the team knows Elixir: a Node.js WebSocket service or a hosted real-time service is easier to staff.
  • Chat is one small feature of a bigger app: a hosted chat API saves building all of this.

What you need to build this

12 components across 9 areas of the stack.

Build it with your AI agent

Hand the stack to Claude Code, Codex, Cursor or any coding agent as a brief: how it connects, install steps and a build plan.

Frontend2

  • Next.js Web App

    Web client

    npm install next

    Docs

  • React Native Mobile App

    Mobile client

    npm install react-native

    Docs

Backend & APIs3

  • Phoenix API

    Core chat API

  • Phoenix Channels

    Realtime layer

  • Oban Workers

    Async jobs

Data1

  • PostgreSQL

    Primary database

    Docs

Cache & queues1

  • Redis

    Presence cache

    Docs

Auth1

  • Clerk

    Auth and sessions

    npm install @clerk/nextjs

    Docs

Email & messaging1

  • Firebase Cloud Messaging

    Push notifications

    Docs

Search1

  • Meilisearch

    Full-text search

    npm install meilisearch

    Docs

Storage & CDN1

  • Supabase Storage

    File attachments

    npm install @supabase/supabase-js

    Docs

Observability1

  • Sentry

    Error tracking

    npm install @sentry/nextjs

    Docs

Install

npm install next react-native @clerk/nextjs meilisearch @supabase/supabase-js @sentry/nextjs

SDKs only. Pick your own database driver or ORM.

See all 30 example stacks