Technologies and services used

• Node.js v20.x
• TypeScript v5.5
• Angular v18.1
• Angular Material v18.1
• Tailwind CSS v3.4
• NgRx Signals v18.0
• RxFire
• Firebase
  • Hosting
  • Authentication
  • Firestore
  • Realtime Database
  • Cloud Functions
  • Cloud Storage

For local development, testing and deployment

• Git for version control.
• GitHub for hosting the code and running the CI pipeline.
• VS Code as the main editor.
• pnpm as the package manager and script runner.
• Angular CLI
• Firebase CLI
• Firebase Emulator Suite for local Firebase services.
• ESLint for linting.
• Prettier for code formatting.
• Jasmine for Angular unit testing.
• ng-mocks for Angular testing and mocking helpers.
• Vitest for Firebase testing.

Base template features

The base template gives you an empty app skeleton, working end-to-end, with the following included:

• Simple folder-based monorepo with completely separate frontend (app) and backend (firebase) folders, with a VS Code workspace config to work on both folders at the same time.
• A place for shared common code (especially TypeScript types) between frontend and backend (firebase/common).
• Modern Angular features configured and used throughout (inject function, signals, signal inputs, signal outputs, router input bindings, control flow, etc.)
• Full Firebase local development and testing using the Firebase Emulator Suite (with local persistence of emulator data).
• Firebase Hosting, Auth, Firestore, Realtime Database, Cloud Functions and Cloud Storage all set up and ready to use.
• Firebase Hosting configured with appropriate caching rules.
• Basic progressive web app (PWA) set up (manifest, service worker, icons, etc) with in-app update notification.
• Static prerendered pages set up, configured to work properly with Firebase Hosting and the PWA configuration.
• State management using NgRx Signals.
• Global auth store and auth guard.
• Login flow using Firebase Auth's Email Link.
• Angular Material and Tailwind CSS, with styling overrides to make them work well together.
• Helpers to inject Firebase services into Angular components, services, etc.
• RxFire used for Observable wrappers for Firebase access in the frontend.
• Frontend logging using consola.
• VS Code, ESLint, Prettier, etc. all set up for a consistent and clean development experience.
• Continuous integration (CI) set up with GitHub Actions (for linting, tests and builds).
• Deploy script to deploy to a "live" Firebase project (which you set up).
• Basic frontend tests, using Jasmine and ng-mocks.
• Firebase security rules test suites using the Firebase Emulator Suite, using Vitest.

For more details see the Architecture and design decisions doc.

Simple example app

The simple example app is a functional logbook app. See the specs for more details. It's focused on showcasing and learning the tech stack, built on top of the base template.

The learning material is in the /docs folder of the code repository, which you will get access to once you upgrade. The following sections are covered in extensive detail:

1. Architecture
2. Routes and shell
3. Data model and access
4. Logbook stores
5. Logbook UI and flows
6. Testing
7. Deployment and monitoring

Patterns example app

The patterns app is currently in active development. It will showcase even more in-depth capabilities and patterns to bring out the best in this tech stack. This includes patterns for continuous deployment, app versioning, profile management, data modelling, and more. Built on top of the base template.