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.

This guide walks you through cloning TriviaPP, wiring up its two external backends (Firebase and AWS Amplify), and launching the app in your browser or on an Android device. By the end you will have a fully functional local instance of the Star Wars trivia app running with live authentication, a working leaderboard, and dynamic SWAPI-powered questions.

​
Prerequisites

Make sure the following tools are installed before you begin:
  • Node.js ≥ 18 — required by Angular 17 and the Ionic CLI
  • Angular CLI 17 — npm install -g @angular/cli@17
  • Ionic CLI — npm install -g @ionic/cli
  • Android Studio — only needed if you want to build and run on a physical device or Android emulator

​
Setup

1

Clone the repository and install dependencies

Clone the project from GitHub and install all npm packages:
git clone https://github.com/dreancaste/TriviaPP.git
cd TriviaPP
npm install
This installs Ionic, Angular, Capacitor, AWS Amplify, the Firebase SDK, and all other dependencies listed in package.json.
2

Configure Firebase

TriviaPP uses Firebase Firestore for the online daily leaderboard. Open src/firebase.config.ts and replace the placeholder values with your own Firebase project credentials:
// src/firebase.config.ts
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};
FieldDescription
apiKeyYour Firebase Web API key
authDomainOAuth redirect domain for your project
projectIdUnique identifier for your Firestore database
storageBucketFirebase Storage bucket URL
messagingSenderIdCloud Messaging sender ID
appIdFirebase Web App ID
You can find all of these values in the Firebase Console → Project Settings → Your apps → SDK setup and configuration.See Firebase Setup for detailed instructions on creating a Firebase project and enabling Firestore.
3

Configure AWS Amplify authentication

TriviaPP authenticates users with AWS Amplify backed by Amazon Cognito. Amplify requires a configuration file at the project root.
  • If you are using Amplify Gen 2, place your generated amplify_outputs.json file in the project root.
  • If you are using Amplify Gen 1, place amplifyconfiguration.json in the project root instead.
Both files are produced automatically when you run amplify push (Gen 1) or npx ampx generate outputs (Gen 2) from a configured Amplify backend.See AWS Amplify Auth Setup for step-by-step instructions on provisioning a Cognito User Pool and connecting it to TriviaPP.
4

Start the development server

Launch the Ionic development server:
npm start
This runs ionic serve and opens the app at http://localhost:8100. Hot-reload is enabled — any saved change in src/ is reflected instantly in the browser.
5

(Optional) Build and run on Android

To run TriviaPP on a physical Android device or emulator, build the Angular app, sync the native project, and open it in Android Studio:
npm run build
npx cap sync android
npx cap open android
From Android Studio, select your target device and click Run. The Capacitor Camera and Haptics plugins will be fully functional on a real device.

​
Available Scripts

The following npm scripts are defined in package.json:
ScriptCommandDescription
npm startionic serveStart the local dev server at http://localhost:8100
npm run buildng buildCompile the Angular app into www/browser/ for production
npm testng testRun the unit test suite with the Angular test runner
Capacitor Camera and Haptics do not work in the browser. The @capacitor/camera and @capacitor/haptics plugins require a real Android device or a properly configured Android emulator. Attempting to invoke them in a desktop browser will either do nothing or throw a plugin-unavailable error. Always test camera and haptics features on a device.
The app is fully usable in the browser for all non-native features. User registration, login, trivia gameplay, the online leaderboard, game history, the Star Wars wiki, and profile management (without camera) all work perfectly at http://localhost:8100 — no device or emulator needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us