# yeray-portilla/juegalmi architecture

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

- Interactive diagram: https://gitdiagram.com/yeray-portilla/juegalmi
- Repository: https://github.com/yeray-portilla/juegalmi

## Overview

Juegalmi is an Ionic/Angular app for browsing mobile devices and video games and submitting support requests. The principal flow is login, token-based access to protected tabs, then navigation to a catalog or support page; the catalog data is currently hard-coded, and support submission is a TODO. The app also offers camera capture for support requests. The map reflects shown routes and calls; the interceptor’s behavior is not shown, and backend catalog/ticket integrations are not implemented in the excerpts.

Main entry points: [`ionic/src/app/app.routes.ts`](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/app.routes.ts) (Route configuration), [`ionic/src/app/auth.service.ts`](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.service.ts) (Auth service), [`ionic/src/main.ts`](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/main.ts) (App bootstrap), [`ionic/src/app/tabs/tabs.page.ts`](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/tabs/tabs.page.ts) (Tabbed navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App navigation"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_shell["Root shell<br/>[app.component.ts]"]
  node_routes["Route configuration<br/>[app.routes.ts]"]
  node_tabs["Tabbed navigation<br/>[tabs.page.ts]"]
end

subgraph group_auth["Authentication"]
  node_login["Login page<br/>[login.page.ts]"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
  node_guard["Auth guard<br/>[auth.guard.ts]"]
  node_interceptor["HTTP interceptor"]
  node_environment["API configuration<br/>[environment.ts]"]
end

subgraph group_catalog["Catalog browsing"]
  node_mobiles["Mobile catalog<br/>[moviles.page.ts]"]
  node_games["Video game catalog"]
end

subgraph group_support["Support requests"]
  node_support["Support request<br/>[soporte.page.ts]"]
end

node_user(("User"))
node_api{{"Backend API"}}
node_camera{{"Device camera"}}
node_tokenstore[("Browser token storage")]

node_user -->|"opens app"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_shell
node_bootstrap -->|"provides routes"| node_routes
node_bootstrap -->|"registers"| node_interceptor
node_routes -->|"loads"| node_login
node_routes -->|"protects tabs"| node_guard
node_routes -->|"loads"| node_tabs
node_routes -->|"routes to"| node_mobiles
node_routes -->|"routes to"| node_games
node_routes -->|"routes to"| node_support
node_login -->|"requests login"| node_authservice
node_authservice -->|"reads settings"| node_environment
node_authservice -->|"posts login"| node_api
node_authservice -->|"stores token"| node_tokenstore
node_guard -->|"checks session"| node_authservice
node_tabs -->|"logs out"| node_authservice
node_support -->|"captures photo"| node_camera

click node_bootstrap "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/main.ts"
click node_shell "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/app.component.ts"
click node_routes "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/app.routes.ts"
click node_login "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/login/login.page.ts"
click node_authservice "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.service.ts"
click node_guard "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.guard.ts"
click node_interceptor "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.interceptor.ts"
click node_tabs "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/tabs/tabs.page.ts"
click node_mobiles "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/moviles/moviles.page.ts"
click node_games "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/videojuegos/videojuegos.page.ts"
click node_support "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/soporte/soporte.page.ts"
click node_environment "https://github.com/yeray-portilla/juegalmi/blob/main/ionic/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_shell,node_routes,node_tabs,node_user toneBlue
class node_login,node_authservice,node_guard,node_interceptor,node_environment,node_tokenstore toneAmber
class node_mobiles,node_games,node_api toneMint
class node_support toneRose
class node_camera toneIndigo
```

## Components

### App navigation

- [App bootstrap](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/main.ts): `ionic/src/main.ts`
- [Root shell](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/app.component.ts): `ionic/src/app/app.component.ts`
- [Route configuration](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/app.routes.ts): `ionic/src/app/app.routes.ts`
- [Tabbed navigation](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/tabs/tabs.page.ts): `ionic/src/app/tabs/tabs.page.ts`

### Authentication

- [Login page](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/login/login.page.ts): `ionic/src/app/login/login.page.ts`
- [Auth service](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.service.ts): `ionic/src/app/auth.service.ts`
- [Auth guard](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.guard.ts): `ionic/src/app/auth.guard.ts`
- [HTTP interceptor](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/auth.interceptor.ts): `ionic/src/app/auth.interceptor.ts`
- [API configuration](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/environments/environment.ts): `ionic/src/environments/environment.ts`

### Catalog browsing

- [Mobile catalog](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/moviles/moviles.page.ts): `ionic/src/app/moviles/moviles.page.ts`
- [Video game catalog](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/videojuegos/videojuegos.page.ts): `ionic/src/app/videojuegos/videojuegos.page.ts`

### Support requests

- [Support request](https://github.com/yeray-portilla/juegalmi/blob/main/ionic/src/app/soporte/soporte.page.ts): `ionic/src/app/soporte/soporte.page.ts`

### Other components

- **User**
- **Backend API**
- **Device camera**
- **Browser token storage**

## Connections

- User → App bootstrap: opens app (evidence: `ionic/src/main.ts`)
- App bootstrap → Root shell: bootstraps (evidence: `ionic/src/main.ts`)
- App bootstrap → Route configuration: provides routes (evidence: `ionic/src/main.ts`)
- App bootstrap → HTTP interceptor: registers (evidence: `ionic/src/main.ts`)
- Route configuration → Login page: loads (evidence: `ionic/src/app/app.routes.ts`)
- Route configuration → Auth guard: protects tabs (evidence: `ionic/src/app/app.routes.ts`)
- Route configuration → Tabbed navigation: loads (evidence: `ionic/src/app/app.routes.ts`)
- Route configuration → Mobile catalog: routes to (evidence: `ionic/src/app/app.routes.ts`)
- Route configuration → Video game catalog: routes to (evidence: `ionic/src/app/app.routes.ts`)
- Route configuration → Support request: routes to (evidence: `ionic/src/app/app.routes.ts`)
- Login page → Auth service: requests login (evidence: `ionic/src/app/login/login.page.ts`)
- Auth service → API configuration: reads settings (evidence: `ionic/src/app/auth.service.ts`)
- Auth service → Backend API: posts login (evidence: `ionic/src/app/auth.service.ts`)
- Auth service → Browser token storage: stores token (evidence: `ionic/src/app/auth.service.ts`)
- Auth guard → Auth service: checks session (evidence: `ionic/src/app/auth.guard.ts`)
- Tabbed navigation → Auth service: logs out (evidence: `ionic/src/app/tabs/tabs.page.ts`)
- Support request → Device camera: captures photo (evidence: `ionic/src/app/soporte/soporte.page.ts`)