Firebase setup

1. Create a Firebase project

1. Go to the Firebase console and create a new project.
2. Add a new Web app to the project (you will get a Firebase config object).
3. In the Build → Authentication section, enable at least one sign-in provider (e.g. Google).

2. Enable Firestore and Realtime Database

1. In Build → Firestore Database, create a database (start in test mode for development, or configure proper security rules).
2. In Build → Realtime Database, create a database in the same region as Firestore.
3. Note the Realtime Database URL (something like https://your-project-id-default-rtdb.region.firebasedatabase.app).

3. Configure environment variables

The template reads Firebase configuration from process.env in src/lib/firebase.ts. Create a .env.local file in the project root:

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

These names must match exactly, because they are used in the firebaseConfig object.

4. Seed minimal data

The app will create user documents automatically after authentication, but you may want to understand the minimal schema required for chat to work.

// users/{uid}
{
  displayName: "TMS",
  avatarURL: "https://...",
  email: "tms@example.com",
  createdAt: Timestamp,
}

// rooms/{roomId}
{
  type: "private" | "group",
  groupName?: string,
  groupAvatarURL?: string,
  participants: ["uid1", "uid2"],
  participantsCount: 2,
  unreadCounts: { "uid1": 0, "uid2": 0 },
  createdBy: "uid1",
  createdAt: Timestamp,
  lastMessage?: {
    text: "Hello everyone",
    senderId: "uid1",
    createdAt: Timestamp,
    type: "text" | "system",
  },
}

// rooms/{roomId}/messages/{messageId}
{
  senderId: "uid1",
  text: "Hello everyone!",
  type: "text" | "system",
  createdAt: Timestamp,
}

{
  "presence": {
    "uid_1": {
      "status": "online",
      "updatedAt": ServerTimestamp
    }
  },
  "typing": {
    "room_a": {
      "uid_1": true,
      "uid_4": true
    }
  },
  "room_presence": {
    "room_a": {
      "uid_1": true,
      "uid_4": true
    }
  }
}

5. Run locally or deploy

1. Install dependencies and start the dev server:

   npm install
   npm run dev

2. For deployment (e.g. on Vercel), add the same NEXT_PUBLIC_FIREBASE_* variables to your hosting provider's environment settings.