Step 1 - foundation

1 min czytania

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.

Dyskusja

Komentarze: 0

Brak komentarzy. Rozpocznij dyskusję.