# pratiknator44/spawnhouse architecture

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

- Interactive diagram: https://gitdiagram.com/pratiknator44/spawnhouse
- Repository: https://github.com/pratiknator44/spawnhouse

## Overview

#### Purpose and runtime
This is an Angular single-page client for a social/gaming-oriented product: authentication, profiles, feeds/posts, messaging, notifications, “around you,” and now-playing media/game activity. It runs in the browser, with PWA/service-worker support configured by `spawnhouse-ui/ngsw-config.json`.

#### Bootstrap and application shell
Angular bootstraps from `spawnhouse-ui/src/main.ts` into the root module and shell:
- `spawnhouse-ui/src/app/app.module.ts`
- `spawnhouse-ui/src/app/app.component.ts`
- `spawnhouse-ui/src/app/app.component.html`

The shell is the cross-feature composition boundary, likely hosting routed content plus persistent UI such as navigation, overlays, notifications, and now-playing docks.

#### Routing, feature boundaries, and access control
Route selection is centralized in `spawnhouse-ui/src/app/app-routing.module.ts`. Feature-specific Angular modules partition major screens:
- `spawnhouse-ui/src/app/modules/home.module.ts`
- `spawnhouse-ui/src/app/modules/profile.module.ts`
- `spawnhouse-ui/src/app/modules/messaging.module.ts`

Navigation is guarded at route boundaries through services including `spawnhouse-ui/src/assets/services/login-guard.service.ts`, `spawnhouse-ui/src/assets/services/profile-guard.service.ts`, and `spawnhouse-ui/src/assets/services/wildcard-guard.service.ts`. Login, password reset, profile management/viewing, and a not-found route are distinct entry states.

#### Backend API, identity, and local state
`spawnhouse-ui/src/assets/services/api.service.ts` is the principal HTTP boundary to backend APIs, with endpoint/environment constants under `spawnhouse-ui/src/assets/variables/api-vars.enum.ts` and `spawnhouse-ui/src/environments/environment.ts`. `spawnhouse-ui/src/assets/services/interceptors.ts` centrally modifies HTTP traffic, likely for authentication or common error handling.

Identity and client persistence flow through:
- `spawnhouse-ui/src/assets/services/user.service.ts`
- `spawnhouse-ui/src/assets/services/storage.service.ts`
- `spawnhouse-ui/src/assets/interfaces/user.interface.ts`

UI features should consume these services rather than directly coupling to API/storage details.

#### Social content and discovery flows
The feed/domain presentation layer is centered on home, feeds, post creation, post viewing, and profile surfaces:
- `spawnhouse-ui/src/app/home/home.component.ts`
- `spawnhouse-ui/src/app/feeds/feeds.component.ts`
- `spawnhouse-ui/src/app/post-maker/post-maker.component.ts`

A typical flow is authenticated user state → API retrieval/mutation → feed/profile component rendering. Discovery and social matching are represented by `spawnhouse-ui/src/app/aroundyou/aroundyou.component.ts`, suggestions, and reusable user-card display.

#### Real-time messaging and notifications
Real-time transport is isolated behind `spawnhouse-ui/src/assets/services/socket.service.ts` and `spawnhouse-ui/src/assets/services/get-serverside-event.service.ts`; their events feed messaging and notification UI:
- `spawnhouse-ui/src/app/messaging/messaging.component.ts`
- `spawnhouse-ui/src/app/notifications/notifications.component.ts`
- `spawnhouse-ui/src/app/all-notifications/all-notifications.component.ts`

Floating/toast notifications are mediated by `spawnhouse-ui/src/assets/services/float-notification.service.ts`, separating inbound event handling from transient visual delivery.

#### Now-playing, overlays, and shared UI state
Now-playing is a cross-cutting stateful feature managed through `spawnhouse-ui/src/assets/services/now-playing.service.ts` and rendered in primary and docked forms:
- `spawnhouse-ui/src/app/now-playing/now-playing.component.ts`
- `spawnhouse-ui/src/app/now-playing-side-dock/now-playing-side-dock.component.ts`

Overlay and navigation visibility are similarly service-mediated (`spawnhouse-ui/src/assets/services/overlay.service.ts`, `spawnhouse-ui/src/assets/services/navbar.service.ts`) so routed pages can control global UI without direct shell coupling. Reusable modals, dialogs, image upload, chips, and form widgets compose feature screens.

Main entry points: [`spawnhouse-ui/src/assets/services/socket.service.ts`](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/socket.service.ts) (Realtime transport), [`spawnhouse-ui/src/app/app.module.ts`](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.module.ts) (Root module), [`spawnhouse-ui/src/app/app.component.ts`](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.component.ts) (Application shell), [`spawnhouse-ui/src/app/app-routing.module.ts`](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app-routing.module.ts) (Route selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["Bootstrap & shell"]
  node_main["Angular bootstrap<br/>entry point<br/>[main.ts]"]
  node_app_module["Root module<br/>Angular module<br/>[app.module.ts]"]
  node_app_shell["Application shell<br/>root component<br/>[app.component.ts]"]
  node_pwa["PWA service worker<br/>service worker config<br/>[ngsw-config.json]"]
end

subgraph group_navigation["Navigation &amp; features"]
  node_routing["Route selection<br/>routing module"]
  node_route_guards["Access guards<br/>route guards"]
  node_feature_modules["Feature modules<br/>Angular modules<br/>[home.module.ts]"]
  node_social_surfaces["Social &amp; discovery<br/>feature components<br/>[feeds.component.ts]"]
  node_messaging_ui["Messaging UI<br/>feature component"]
  node_notification_ui["Notification UI<br/>feature components"]
end

subgraph group_client_state["Client services"]
  node_http_interceptor["HTTP interceptor<br/>HTTP middleware<br/>[interceptors.ts]"]
  node_api_service["Backend API client<br/>HTTP service<br/>[api.service.ts]"]
  node_user_state["Identity state<br/>user service<br/>[user.service.ts]"]
  node_local_storage[("Client persistence<br/>storage service<br/>[storage.service.ts]")]
end

subgraph group_realtime["Realtime &amp; global UI"]
  node_realtime_transport["Realtime transport<br/>socket and event services<br/>[socket.service.ts]"]
  node_float_notifications["Toast delivery<br/>notification service"]
  node_now_playing_state["Now-playing state<br/>shared state service"]
  node_now_playing_ui["Now-playing views<br/>global components"]
  node_overlay_navigation["Overlay &amp; navbar state<br/>UI state services<br/>[overlay.service.ts]"]
end

node_browser{{"Browser / backend<br/>external runtime"}}

node_main -->|"bootstraps"| node_app_module
node_app_module -->|"creates"| node_app_shell
node_app_module -->|"registers"| node_routing
node_app_shell -->|"hosts routed content"| node_routing
node_routing -->|"checks access"| node_route_guards
node_routing -->|"loads screens"| node_feature_modules
node_feature_modules -->|"contains"| node_social_surfaces
node_feature_modules -->|"contains"| node_messaging_ui
node_social_surfaces -->|"uses identity"| node_user_state
node_social_surfaces -->|"reads and mutates content"| node_api_service
node_api_service -->|"sends through"| node_http_interceptor
node_http_interceptor -->|"HTTP requests"| node_browser
node_user_state -->|"persists session"| node_local_storage
node_route_guards -->|"validates identity"| node_user_state
node_realtime_transport -->|"realtime events"| node_browser
node_realtime_transport -->|"delivers messages"| node_messaging_ui
node_realtime_transport -->|"delivers notifications"| node_notification_ui
node_realtime_transport -->|"triggers toasts"| node_float_notifications
node_now_playing_state -->|"drives rendering"| node_now_playing_ui
node_app_shell -->|"hosts persistent views"| node_now_playing_ui
node_overlay_navigation -->|"controls global UI"| node_app_shell
node_app_module -.->|"enables PWA support"| node_pwa

click node_main "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/main.ts"
click node_app_module "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.module.ts"
click node_app_shell "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.component.ts"
click node_routing "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app-routing.module.ts"
click node_route_guards "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/login-guard.service.ts"
click node_feature_modules "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/modules/home.module.ts"
click node_social_surfaces "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/feeds/feeds.component.ts"
click node_messaging_ui "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/messaging/messaging.component.ts"
click node_notification_ui "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/notifications/notifications.component.ts"
click node_http_interceptor "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/interceptors.ts"
click node_api_service "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/api.service.ts"
click node_user_state "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/user.service.ts"
click node_local_storage "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/storage.service.ts"
click node_realtime_transport "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/socket.service.ts"
click node_float_notifications "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/float-notification.service.ts"
click node_now_playing_state "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/now-playing.service.ts"
click node_now_playing_ui "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/now-playing/now-playing.component.ts"
click node_overlay_navigation "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/overlay.service.ts"
click node_pwa "https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/ngsw-config.json"

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_main,node_app_module,node_app_shell,node_pwa toneBlue
class node_routing,node_route_guards,node_feature_modules,node_social_surfaces,node_messaging_ui,node_notification_ui toneAmber
class node_http_interceptor,node_api_service,node_user_state,node_local_storage toneMint
class node_realtime_transport,node_float_notifications,node_now_playing_state,node_now_playing_ui,node_overlay_navigation toneRose
class node_browser toneNeutral
```

## Components

### Bootstrap & shell

- [Angular bootstrap](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/main.ts): entry point · `spawnhouse-ui/src/main.ts`
- [Root module](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.module.ts): Angular module · `spawnhouse-ui/src/app/app.module.ts`
- [Application shell](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app.component.ts): root component · Hosts routed content and persistent global UI. · `spawnhouse-ui/src/app/app.component.ts`
- [PWA service worker](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/ngsw-config.json): service worker config · `spawnhouse-ui/ngsw-config.json`

### Navigation & features

- [Route selection](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/app-routing.module.ts): routing module · `spawnhouse-ui/src/app/app-routing.module.ts`
- [Access guards](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/login-guard.service.ts): route guards · Login, profile, and wildcard guards control route entry. · `spawnhouse-ui/src/assets/services/login-guard.service.ts`
- [Feature modules](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/modules/home.module.ts): Angular modules · Home, profile, and messaging module boundaries. · `spawnhouse-ui/src/app/modules/home.module.ts`
- [Social & discovery](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/feeds/feeds.component.ts): feature components · Feed, post creation, profile, and around-you screens. · `spawnhouse-ui/src/app/feeds/feeds.component.ts`
- [Messaging UI](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/messaging/messaging.component.ts): feature component · `spawnhouse-ui/src/app/messaging/messaging.component.ts`
- [Notification UI](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/notifications/notifications.component.ts): feature components · Notification badge and all-notifications views. · `spawnhouse-ui/src/app/notifications/notifications.component.ts`

### Client services

- [HTTP interceptor](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/interceptors.ts): HTTP middleware · Applies shared request and error behavior. · `spawnhouse-ui/src/assets/services/interceptors.ts`
- [Backend API client](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/api.service.ts): HTTP service · Principal boundary for backend API retrieval and mutations. · `spawnhouse-ui/src/assets/services/api.service.ts`
- [Identity state](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/user.service.ts): user service · `spawnhouse-ui/src/assets/services/user.service.ts`
- [Client persistence](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/storage.service.ts): storage service · `spawnhouse-ui/src/assets/services/storage.service.ts`

### Realtime & global UI

- [Realtime transport](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/socket.service.ts): socket and event services · Socket and server-side event boundary. · `spawnhouse-ui/src/assets/services/socket.service.ts`
- [Toast delivery](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/float-notification.service.ts): notification service · Converts inbound events into transient notifications. · `spawnhouse-ui/src/assets/services/float-notification.service.ts`
- [Now-playing state](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/now-playing.service.ts): shared state service · `spawnhouse-ui/src/assets/services/now-playing.service.ts`
- [Now-playing views](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/app/now-playing/now-playing.component.ts): global components · Primary and side-dock playback displays. · `spawnhouse-ui/src/app/now-playing/now-playing.component.ts`
- [Overlay & navbar state](https://github.com/pratiknator44/spawnhouse/blob/master/spawnhouse-ui/src/assets/services/overlay.service.ts): UI state services · Lets routed screens control shell-level visibility. · `spawnhouse-ui/src/assets/services/overlay.service.ts`

### Other components

- **Browser / backend**: external runtime · Browser client communicates with backend APIs and realtime endpoints.

## Connections

- Angular bootstrap → Root module: bootstraps
- Root module → Application shell: creates
- Root module → Route selection: registers
- Application shell → Route selection: hosts routed content
- Route selection → Access guards: checks access
- Route selection → Feature modules: loads screens
- Feature modules → Social & discovery: contains
- Feature modules → Messaging UI: contains
- Social & discovery → Identity state: uses identity
- Social & discovery → Backend API client: reads and mutates content
- Backend API client → HTTP interceptor: sends through
- HTTP interceptor → Browser / backend: HTTP requests
- Identity state → Client persistence: persists session
- Access guards → Identity state: validates identity
- Realtime transport → Browser / backend: realtime events
- Realtime transport → Messaging UI: delivers messages
- Realtime transport → Notification UI: delivers notifications
- Realtime transport → Toast delivery: triggers toasts
- Now-playing state → Now-playing views: drives rendering
- Application shell → Now-playing views: hosts persistent views
- Overlay & navbar state → Application shell: controls global UI
- Root module → PWA service worker: enables PWA support