# marcoschoch1/pack-rat-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/marcoschoch1/pack-rat-frontend
- Repository: https://github.com/marcoschoch1/pack-rat-frontend

## Overview

Pack-Rat’s Angular frontend provides the user-facing foundation for tracking tabletop and trading-card collections. The visible workflow is login, then fetching collections to choose collection creation or the existing-collection route; creating a collection returns the user to the root route. API access is centralized, with JWT handling applied to backend requests. The README describes dashboard, item-entry, and detail screens as upcoming, but their source files are absent from the tree, so they are not represented as implemented components. Connections are limited to excerpts or explicit README statements.

Main entry points: [`src/app/app.routes.ts`](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.routes.ts) (Route Definitions), [`src/app/login/login.ts`](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/login/login.ts) (Login Form), [`src/app/service/auth.service.ts`](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/auth.service.ts) (Auth Service), [`src/app/service/apiservice.ts`](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/apiservice.ts) (API Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application and Routing"]
  node_bootstrap["App Bootstrap<br/>[main.ts]"]
  node_app["Root App<br/>[app.ts]"]
  node_config["App Configuration<br/>[app.config.ts]"]
  node_routes["Route Definitions<br/>[app.routes.ts]"]
end

subgraph group_features["User Workflows"]
  node_login["Login Form<br/>[login.ts]"]
  node_collection_form["Create Collection"]
end

subgraph group_services["API and Authentication"]
  node_auth_guard["Auth Guard<br/>[auth-guard.ts]"]
  node_auth["Auth Service<br/>[auth.service.ts]"]
  node_token_store[("Browser Token Storage")]
  node_interceptor["Auth Interceptor"]
  node_collections["Collection Service"]
  node_api["API Service<br/>[apiservice.ts]"]
  node_environment["API Configuration<br/>[environment.ts]"]
end

node_user(("Collector"))
node_backend["Pack-Rat Backend"]

node_user -->|"submits credentials"| node_login
node_bootstrap -->|"bootstraps"| node_app
node_bootstrap -->|"provides configuration"| node_config
node_app -.->|"renders routed views"| node_routes
node_config -->|"registers routes"| node_routes
node_config -->|"registers interceptor"| node_interceptor
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_collection_form
node_routes -->|"guards child routes"| node_auth_guard
node_login -->|"logs in"| node_auth
node_login -->|"loads collections"| node_collections
node_login -.->|"routes by collection state"| node_user
node_collection_form -->|"creates collection"| node_collections
node_auth_guard -->|"checks authentication"| node_auth
node_auth -->|"sends login request"| node_api
node_auth -->|"reads and writes token"| node_token_store
node_interceptor -->|"gets token and logs out"| node_auth
node_collections -->|"requests collection data"| node_api
node_api -->|"gets API base URL"| node_environment
node_api -->|"sends HTTP requests"| node_backend
node_interceptor -->|"adds bearer token"| node_backend

click node_bootstrap "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/main.ts"
click node_app "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.ts"
click node_config "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.config.ts"
click node_routes "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.routes.ts"
click node_login "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/login/login.ts"
click node_collection_form "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/create-collection/create-collection.ts"
click node_auth_guard "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/auth-guard.ts"
click node_auth "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/auth.service.ts"
click node_interceptor "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/interceptor/auth.interceptor.ts"
click node_collections "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/collection.service.ts"
click node_api "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/apiservice.ts"
click node_environment "https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/environments/environment.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_bootstrap,node_app,node_config,node_routes toneBlue
class node_login,node_collection_form toneAmber
class node_auth_guard,node_auth,node_token_store,node_interceptor,node_collections,node_api,node_environment toneMint
class node_user,node_backend toneIndigo
```

## Components

### Application and Routing

- [App Bootstrap](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/main.ts): `src/main.ts`
- [Root App](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.ts): `src/app/app.ts`
- [App Configuration](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.config.ts): `src/app/app.config.ts`
- [Route Definitions](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`

### User Workflows

- [Login Form](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/login/login.ts): `src/app/login/login.ts`
- [Create Collection](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/create-collection/create-collection.ts): `src/app/create-collection/create-collection.ts`

### API and Authentication

- [Auth Guard](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/auth-guard.ts): `src/app/service/auth-guard.ts`
- [Auth Service](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/auth.service.ts): `src/app/service/auth.service.ts`
- **Browser Token Storage**
- [Auth Interceptor](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/interceptor/auth.interceptor.ts): `src/app/interceptor/auth.interceptor.ts`
- [Collection Service](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/collection.service.ts): `src/app/service/collection.service.ts`
- [API Service](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/app/service/apiservice.ts): `src/app/service/apiservice.ts`
- [API Configuration](https://github.com/marcoschoch1/pack-rat-frontend/blob/main/src/environments/environment.ts): `src/environments/environment.ts`

### Other components

- **Collector**
- **Pack-Rat Backend**

## Connections

- Collector → Login Form: submits credentials (evidence: `src/app/login/login.ts`)
- App Bootstrap → Root App: bootstraps (evidence: `src/main.ts`)
- App Bootstrap → App Configuration: provides configuration (evidence: `src/main.ts`)
- Root App → Route Definitions: renders routed views
- App Configuration → Route Definitions: registers routes (evidence: `src/app/app.config.ts`)
- App Configuration → Auth Interceptor: registers interceptor (evidence: `src/app/app.config.ts`)
- Route Definitions → Login Form: routes to (evidence: `src/app/app.routes.ts`)
- Route Definitions → Create Collection: routes to (evidence: `src/app/app.routes.ts`)
- Route Definitions → Auth Guard: guards child routes (evidence: `src/app/app.routes.ts`)
- Login Form → Auth Service: logs in (evidence: `src/app/login/login.ts`)
- Login Form → Collection Service: loads collections (evidence: `src/app/login/login.ts`)
- Login Form → Collector: routes by collection state
- Create Collection → Collection Service: creates collection (evidence: `src/app/create-collection/create-collection.ts`)
- Auth Guard → Auth Service: checks authentication (evidence: `src/app/service/auth-guard.ts`)
- Auth Service → API Service: sends login request (evidence: `src/app/service/auth.service.ts`)
- Auth Service → Browser Token Storage: reads and writes token (evidence: `src/app/service/auth.service.ts`)
- Auth Interceptor → Auth Service: gets token and logs out (evidence: `src/app/interceptor/auth.interceptor.ts`)
- Collection Service → API Service: requests collection data (evidence: `src/app/service/collection.service.ts`)
- API Service → API Configuration: gets API base URL (evidence: `src/app/service/apiservice.ts`)
- API Service → Pack-Rat Backend: sends HTTP requests (evidence: `README.md`)
- Auth Interceptor → Pack-Rat Backend: adds bearer token (evidence: `README.md`)