Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dreancaste/TriviaPP/llms.txt

Use this file to discover all available pages before exploring further.

Firebase is used in TriviaPP exclusively to power the online daily leaderboard. When a player completes a game session, their name and score are written to a Firestore collection named ranking. The app then queries that collection to display today’s top scores. No other Firebase product — including Firebase Authentication — is used; authentication is handled entirely by AWS Amplify and Amazon Cognito.

​
What Firebase Provides

TriviaPP’s RankingService relies on two Firestore operations:
  • addScore(name, score) — writes a new document to the ranking collection, stamped with today’s ISO date.
  • getDailyRanking() — retrieves all documents in ranking ordered by score descending, then filters client-side to only return entries whose date matches today.
Both methods initialise the Firebase app lazily using initializeApp / getApp from firebase/app and getFirestore from firebase/firestore.

​
Step-by-Step Setup

1

Create a Firebase project

Go to https://console.firebase.google.com and click Add project. Give your project a name (e.g. triviapp), disable Google Analytics if you don’t need it, and click Create project.
2

Enable Firestore Database in Native mode

In the Firebase console, open your project and navigate to Build → Firestore Database. Click Create database, choose Start in production mode (you will update the rules in the next step), select your preferred Cloud Firestore location, and click Enable.
3

Set Firestore security rules

Once Firestore is provisioned, go to the Rules tab and replace the default rules with the following:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /ranking/{document} {
      allow read, write: if true;
    }
  }
}
Click Publish to save the rules.
Allowing write: if true means anyone with your project credentials can write arbitrary data to the ranking collection. This is acceptable for a personal demo or development environment, but before releasing to production you should tighten this rule to require authentication — for example allow write: if request.auth != null;.
4

Register a web app and copy the config

In the Firebase console, click the gear icon → Project settings and scroll to the Your apps section. Click the Web icon (</>), give the app a nickname (e.g. TriviaPP Web), and click Register app. Firebase will display a config object — copy it, you will need it in the next step.
5

Edit src/firebase.config.ts with your credentials

Open src/firebase.config.ts and replace the placeholder values with the credentials you copied from the Firebase console:
// src/firebase.config.ts
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.firebasestorage.app",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};
This file is imported directly by RankingService, so no additional environment wiring is required.

​
Firestore Collection Schema

All leaderboard entries are stored in a single top-level collection called ranking. Each document contains three fields:
FieldTypeDescription
namestringThe display name the player entered at game end
scorenumberThe player’s final score for that session
datestringThe date the score was recorded (YYYY-MM-DD)
Documents have no fixed ID — Firestore auto-generates one via addDoc. The getDailyRanking() method filters in memory on the date field after fetching all scores ordered by score descending, so no composite index is required.

​
How RankingService Initialises Firebase

RankingService guards against duplicate app initialisation with a short-circuit pattern that checks getApps() before calling initializeApp: 
private app = getApps().length
  ? getApp()
  : initializeApp(firebaseConfig);

private db = getFirestore(this.app);
This means the Firebase app is initialised at most once per browser session, even if Angular’s dependency injection creates the service multiple times. getFirestore then returns a Firestore instance scoped to that app, which is used for every addDoc and getDocs call.

Build docs developers (and LLMs) love

Get started for freeTalk to us