Beta
Tech stack 1
Angular and Firebase
Build full-stack Progressive Web Apps (PWAs) with modern Angular and Firebase features. Plus NgRx SignalStore, Angular Material, Tailwind CSS, and more.
Access now (in beta): base template and simple example app
Coming soon: patterns example app (in development)
Base template (free)
An opinionated but lean full-stack starting point for building a web app, using Angular and Firebase. Aiming to be useful enough so you can hit the ground running and focus on stuff that matters. With enough room for you to extend as you need.
Simple example app
A simple logbook app — keep a single time-ordered log of text entries. With a basic UI, data model and persistence into a database, with real-time updates. Focused on showcasing and learning the tech stack. Built from the base template.
Patterns example app
[Coming soon — in progress] A dedicated place for showcasing even more in-depth capabilities and patterns to bring out the best in this tech stack. Built from the base template.
Real-world projects
[Coming soon] We'll provide more details on the real-world projects that have driven and validated this tech stack.
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
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 (
injectfunction, 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.