# dreezytrial/angular-pet architecture

> Architecture diagram of the GitHub repository dreezytrial/angular-pet, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dreezytrial/angular-pet
- Repository: https://github.com/dreezytrial/angular-pet

## Overview

This is an Angular dashboard demo with mock-user sign-in, guarded dashboard navigation, profile management, project and pricing views, contact content, and a persisted theme preference. The documented route configuration establishes page dispatch and the sampled authentication service establishes mock-user lookup, browser-storage access, and navigation. Page internals and theme-toggle wiring were not sampled, so their relationships are omitted where unsupported.

Main entry points: [`app1/src/app/app.routes.ts`](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.routes.ts) (Route configuration), [`app1/src/app/services/login.service.ts`](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/services/login.service.ts) (Login service), [`app1/src/app/app.ts`](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.ts) (Root application), [`app1/src/app/models/interfaces.ts`](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/models/interfaces.ts) (Domain interfaces)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_auth["Authentication"]
  node_login["Login page<br/>[login.component.ts]"]
  node_loginservice["Login service<br/>[login.service.ts]"]
  node_guard["Authentication guard<br/>[auth-guard.ts]"]
  node_mockusers["Mock users<br/>[users.mock.ts]"]
  node_browserstore[("Browser local storage")]
end

subgraph group_shell["Dashboard Shell"]
  node_routes["Route configuration<br/>[app.routes.ts]"]
  node_shellnav["Dashboard navigation shell"]
end

subgraph group_pages["Dashboard Pages"]
  node_dashboard["Dashboard page<br/>[dashboard.ts]"]
  node_projects["Projects page"]
  node_pricing["Pricing page"]
  node_contact["Contact page"]
  node_profile["Profile editor"]
  node_models["Domain interfaces<br/>[interfaces.ts]"]
end

subgraph group_prefs["Preferences"]
  node_themecontrol["Theme toggle"]
  node_themeservice["Theme service"]
end

node_visitor(("Visitor"))
node_bootstrap["Application bootstrap<br/>[main.ts]"]
node_root["Root application<br/>[app.ts]"]

node_visitor -->|"opens sign-in"| node_login
node_bootstrap -->|"bootstraps"| node_root
node_root -->|"provides outlet"| node_routes
node_root -->|"renders"| node_themecontrol
node_routes -->|"routes /login"| node_login
node_routes -->|"routes /dashboard"| node_shellnav
node_routes -->|"guards dashboard"| node_guard
node_routes -->|"dispatches default"| node_dashboard
node_routes -->|"dispatches projects"| node_projects
node_routes -->|"dispatches pricing"| node_pricing
node_routes -->|"dispatches contact"| node_contact
node_routes -->|"dispatches profile"| node_profile
node_loginservice -->|"looks up users"| node_mockusers
node_loginservice -->|"reads and writes"| node_browserstore
node_loginservice -->|"publishes auth state"| node_guard
node_loginservice -->|"navigates after auth"| node_routes
node_themeservice -->|"persists preference"| node_browserstore
node_profile -->|"uses user types"| node_models
node_projects -->|"uses project type"| node_models
node_pricing -->|"uses plan type"| node_models

click node_bootstrap "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/main.ts"
click node_root "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.ts"
click node_routes "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.routes.ts"
click node_login "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/login/login.component.ts"
click node_loginservice "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/services/login.service.ts"
click node_guard "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/guards/auth/auth-guard.ts"
click node_mockusers "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/mocks/users.mock.ts"
click node_shellnav "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/shared/nav-bar-component/nav-bar.component.ts"
click node_dashboard "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/dashboard/dashboard.ts"
click node_projects "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-projects/page-projects.component.ts"
click node_pricing "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-pricing/page-pricing.component.ts"
click node_contact "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-contact/page-contact.component.ts"
click node_profile "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/profile-page/profile-component/profile-component.ts"
click node_themecontrol "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/shared/theme-toggle/theme-toggle.component.ts"
click node_themeservice "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/services/toggle.theme.service.ts"
click node_models "https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/models/interfaces.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_login,node_loginservice,node_guard,node_mockusers,node_browserstore toneBlue
class node_routes,node_shellnav toneAmber
class node_dashboard,node_projects,node_pricing,node_contact,node_profile,node_models toneMint
class node_themecontrol,node_themeservice toneRose
class node_visitor toneIndigo
class node_bootstrap,node_root toneTeal
```

## Components

### Authentication

- [Login page](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/login/login.component.ts): `app1/src/app/components/pages/login/login.component.ts`
- [Login service](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/services/login.service.ts): `app1/src/app/services/login.service.ts`
- [Authentication guard](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/guards/auth/auth-guard.ts): `app1/src/app/guards/auth/auth-guard.ts`
- [Mock users](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/mocks/users.mock.ts): `app1/src/app/mocks/users.mock.ts`
- **Browser local storage**

### Dashboard Shell

- [Route configuration](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.routes.ts): `app1/src/app/app.routes.ts`
- [Dashboard navigation shell](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/shared/nav-bar-component/nav-bar.component.ts): `app1/src/app/components/shared/nav-bar-component/nav-bar.component.ts`

### Dashboard Pages

- [Dashboard page](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/dashboard/dashboard.ts): `app1/src/app/components/pages/dashboard/dashboard.ts`
- [Projects page](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-projects/page-projects.component.ts): `app1/src/app/components/pages/page-projects/page-projects.component.ts`
- [Pricing page](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-pricing/page-pricing.component.ts): `app1/src/app/components/pages/page-pricing/page-pricing.component.ts`
- [Contact page](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/page-contact/page-contact.component.ts): `app1/src/app/components/pages/page-contact/page-contact.component.ts`
- [Profile editor](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/pages/profile-page/profile-component/profile-component.ts): `app1/src/app/components/pages/profile-page/profile-component/profile-component.ts`
- [Domain interfaces](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/models/interfaces.ts): `app1/src/app/models/interfaces.ts`

### Preferences

- [Theme toggle](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/components/shared/theme-toggle/theme-toggle.component.ts): `app1/src/app/components/shared/theme-toggle/theme-toggle.component.ts`
- [Theme service](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/services/toggle.theme.service.ts): `app1/src/app/services/toggle.theme.service.ts`

### Other components

- **Visitor**
- [Application bootstrap](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/main.ts): `app1/src/main.ts`
- [Root application](https://github.com/dreezytrial/angular-pet/blob/main/app1/src/app/app.ts): `app1/src/app/app.ts`

## Connections

- Visitor → Login page: opens sign-in
- Application bootstrap → Root application: bootstraps
- Root application → Route configuration: provides outlet
- Root application → Theme toggle: renders
- Route configuration → Login page: routes /login
- Route configuration → Dashboard navigation shell: routes /dashboard
- Route configuration → Authentication guard: guards dashboard
- Route configuration → Dashboard page: dispatches default
- Route configuration → Projects page: dispatches projects
- Route configuration → Pricing page: dispatches pricing
- Route configuration → Contact page: dispatches contact
- Route configuration → Profile editor: dispatches profile
- Login service → Mock users: looks up users
- Login service → Browser local storage: reads and writes
- Login service → Authentication guard: publishes auth state
- Login service → Route configuration: navigates after auth
- Theme service → Browser local storage: persists preference
- Profile editor → Domain interfaces: uses user types
- Projects page → Domain interfaces: uses project type
- Pricing page → Domain interfaces: uses plan type