Getting Started

Chat Demo Template

A production-ready chat experience built with Next.js (App Router), Firebase Authentication, Firestore and Realtime Database. This page explains how the template works and how to plug it into your own project.

Tech stack

Next.js App Router
TypeScript & React
Firebase Auth
Cloud Firestore
Realtime Database

Main features

Private and group chat rooms
Real-time messaging with unread counts
Online presence & in-room presence
Typing indicators per room
User search and invite flow
Media messages (images, video, audio) via Cloudinary
Emoji support in input using emoji-mart
AI assistant integration (Vercel groq model)

Quick start

Create a Firebase project and enable:
- Authentication (e.g. Google provider)
- Cloud Firestore (in production or test mode)
- Realtime Database

Copy your Firebase config values and create a .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
NEXT_PUBLIC_FIREBASE_DATABASE_URL=...

Install dependencies and run the dev server:
```
npm install
npm run dev
```
Sign in via the login page and navigate to /chat to start using the chat UI.

For a detailed explanation of each step and how to setup Firebase, see Getting Started → Firebase Setup in the sidebar. For convenience, here is a consolidated example .env.local that includes Firebase, Cloudinary and GROQ API variables used by this template:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxxxxxxxxxx
NEXT_PUBLIC_FIREBASE_APP_ID=1:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.region.firebasedatabase.app

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_IMAGE_PRESET=unsigned_image_preset
NEXT_PUBLIC_CLOUDINARY_VIDEO_PRESET=unsigned_video_preset
NEXT_PUBLIC_CLOUDINARY_FILE_PRESET=unsigned_file_preset

GROQ_API_KEY=your_groq_api_key

Firebase data model overview

The template uses both Firestore and Realtime Database:

Realtime Database

Optimized for fast, ephemeral updates such as presence and typing indicators.

presence/{uid} {
  status: "online" | "offline";
  updatedAt: ServerTimestamp;
}

typing/{roomId}/{uid}: true | null

room_presence/{roomId}/{uid}: true

Firestore

Stores durable user profiles, rooms and messages.

users/{uid} {
  displayName: string;
  avatarURL: string | null;
  email: string;
  createdAt: Timestamp;
}

rooms/{roomId} {
  type: "private" | "group";
  groupName?: string;
  groupAvatarURL?: string;
  participants: string[]; // uids
  participantsCount: number;
  unreadCounts: { [uid: string]: number };
  createdBy: string; // uid
  createdAt: Timestamp;
  lastMessage?: {
    text: string;
    senderId: string;
    createdAt: Timestamp;
    type: "text" | "system";
  };
}

rooms/{roomId}/messages/{messageId} {
  senderId: string;
  text: string;
  type: "text" | "system";
  createdAt: Timestamp;
}

For a detailed explanation of each field and how the UI consumes this data, see Architecture → Data Models and Getting Started → Firebase Setup in the sidebar.

How the template is organized

The chat feature is structured by domain to make it easy to reuse in other projects:

src/features/chat/components – presentational and layout components for the chat UI.
src/features/chat/services – thin wrappers around Firebase SDK (rooms, messages, presence, typing, unread counts, user search).
src/features/chat/hooks – React hooks that connect services to UI and handle subscriptions.
src/features/chat/stores – client-side state (e.g. the active room, dialog state).

You can copy the entire features/chat folder into another Next.js app (plus the shared providers and Firebase config) to reuse the chat experience with minimal wiring.