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.

TriviaPP’s build pipeline flows through four tools in sequence: Angular CLI compiles TypeScript and bundles assets, Ionic CLI layers on mobile-ready tooling and the development server, Capacitor bridges the web output into a native Android shell, and finally Android Studio packages and deploys the APK. Understanding how each layer is configured helps you set up a local environment and produce release builds consistently.
ionic serve runs the full app in your browser on http://localhost:8100 and supports live-reload during development. The vast majority of TriviaPP’s features — trivia questions, leaderboard, authentication — work in the browser. Only native plugins like @capacitor/camera and @capacitor/haptics require a real device or emulator.

​
Package Scripts

The following npm scripts are defined in package.json:
ScriptCommandPurpose
npm startionic serveStarts the Ionic development server at http://localhost:8100 with live-reload
npm run buildng buildCompiles the Angular app for production into www/browser
npm testng testRuns unit tests with Karma and Jasmine

​
Capacitor Configuration

Capacitor is configured in capacitor.config.ts at the project root: 
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.starwarstrivia',
  appName: 'Star Wars Trivia',
  webDir: 'www/browser'
};

export default config;
PropertyValueDescription
appIdcom.example.starwarstriviaThe Android package identifier (reverse-domain notation). Change this to your own domain before publishing to the Play Store.
appNameStar Wars TriviaThe human-readable name shown on the device launcher and in Android Studio.
webDirwww/browserThe directory Capacitor copies into the Android project. Must match Angular CLI’s outputPath.

​
Ionic Project Metadata

The ionic.config.json file at the project root records high-level project metadata consumed by the Ionic CLI: 
{
  "name": "starwars-trivia-final",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular"
}
The type: "angular" field tells the Ionic CLI to use the standard Angular builder (not the standalone bootstrapping variant). The capacitor integration entry enables the ionic capacitor command family as an alias for the npx cap commands below.

​
Android Build Flow

1

Build the Angular app

Compile and bundle the Angular application into www/browser:
npm run build
Angular CLI will output optimised JavaScript, CSS, and assets into www/browser/. Ensure the build completes without errors before proceeding.
2

Sync the web output to the Android project

Copy the contents of www/browser into the native Android project and update any installed Capacitor plugin configurations:
npx cap sync android
Run this after every npm run build — Capacitor does not watch for file changes automatically.
3

Open Android Studio

Launch Android Studio with the Capacitor-generated Android project:
npx cap open android
Android Studio will index the project on first open. Wait for the Gradle sync to finish before attempting to build.
4

Run on a device or emulator

In Android Studio, select a connected physical device or an AVD (Android Virtual Device) from the device picker in the toolbar, then click Run ▶. Android Studio will compile the Java/Kotlin wrapper, package the web assets, and install the APK.

​
Key Dependencies

PackageVersionRole
@angular/core^17.3.12Application framework
@ionic/angular^8.4.3UI component library and mobile UX primitives
@capacitor/core^7.4.3Native runtime bridge
@capacitor/android^7.4.3Android platform target
aws-amplify^6.17.0Authentication via Amazon Cognito
firebase^11.6.1Firestore for the daily leaderboard
swiper^12.1.4Swipeable card UI used in the trivia question flow
rxjs^7.8.1Reactive utilities used throughout Angular services

Build docs developers (and LLMs) love

Get started for freeTalk to us