Step 1 - foundation
1 min read
Create a new Angular 20 application for a realtime collaborative whiteboard (a Miro-style tool). Requirements:
- Standalone components only (no NgModules), signals for all state, ChangeDetectionStrategy.OnPush everywhere, inject() instead of constructor injection, native control flow (@if/@for) in templates.
- Bootstrap the app zoneless (provideZonelessChangeDetection).
- Integrate Firebase via @angular/fire: Auth (anonymous + Google + email/password), Firestore, Storage, Cloud Functions. Put config in environments.
- Create an AuthService exposing: user signal, whenReady() promise that resolves after the initial auth state restore, isMember(orgId)-style role helpers (owner/trainer/member/guest). Anonymous users are "guests".
- Routes: "/" home, "/boards" board library (inside an authenticated shell), "/board/:boardId" the canvas itself (full-screen, no shell chrome, lazy loaded), "/join/:code" resolves a short join code to a board and redirects. All feature routes lazy.
- Add a simple toast/notification service (signal-based) for error messages.
- Set up vitest for unit tests of pure utility functions.
Acceptance: app builds, I can sign in with Google and anonymously, /board/test renders an empty full-screen page, / and /boards render placeholders.
Discussion
0 commentsNo comments yet. Start the discussion.