marcoschoch1/pack-rat-frontend

How marcoschoch1/pack-rat-frontend works

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: app.routes.ts Route Definitions · login.ts Login Form · auth.service.ts Auth Service · apiservice.ts API Service

Components 15

Application and Routing

App Bootstrap src/main.ts
Root App src/app/app.ts
App Configuration src/app/app.config.ts
Route Definitions src/app/app.routes.ts

User Workflows

Login Form src/app/login/login.ts
Create Collection src/app/create-collection/create-collection.ts

API and Authentication

Auth Guard src/app/service/auth-guard.ts
Auth Service src/app/service/auth.service.ts
Browser Token Storage
Auth Interceptor src/app/interceptor/auth.interceptor.ts
Collection Service src/app/service/collection.service.ts
API Service src/app/service/apiservice.ts
API Configuration src/environments/environment.ts

Other components

Collector
Pack-Rat Backend

Connections 21

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

More TypeScript diagrams: otakustay/oniichan · renedeanda/viet.io · skip-mev/skip-go · studiometa/js-toolkit · tcgdex/javascript-sdk

Drawn by GitDiagram on September 30, 2026 from the repository's file tree, README and source files. Read as Markdown ·