# sehemu92/pokedexangular architecture

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

- Interactive diagram: https://gitdiagram.com/sehemu92/pokedexangular
- Repository: https://github.com/sehemu92/pokedexangular

## Overview

1. **What this repo is**
   - This is an Angular single-page application for a Pokédex.
   - The app is centered on one main user flow: load Pokémon from the public PokeAPI, browse them in a paginated list, select one, and show its image plus expanded details.

2. **Top-level application shape**
   - The codebase is organized around Angular’s component/service split.
   - `src/main.ts`, `app.config.ts`, and `app.routes.ts` define the bootstrap and routing layer.
   - `AppComponent` is the shell, while `HomeComponent` appears to be the main screen where most behavior lives.

3. **Main feature boundary: Home page**
   - `src/app/pages/home/home.component.ts` is the orchestrator of the UI.
   - It likely owns the Pokémon collection, the current selection, the scroll/pagination logic, and the state for opening/closing the detail panel.
   - In architecture terms, this is the coordination layer between the data service and the reusable display components.

4. **Presentation components**
   - `TarjetaPokemonComponent` renders each Pokémon card in the list and emits selection events upward.
   - `FotoPokemonComponent` shows the image of the currently selected Pokémon.
   - `DetalleComponent` displays expanded information such as type, height, weight, and description.
   - These are reusable “dumb”/presentational components that receive data from the page and communicate back through outputs.

5. **Data access boundary**
   - `PokemonService` centralizes all calls to the external API.
   - The README says it handles:
     - fetching paginated Pokémon lists,
     - fetching a Pokémon by id,
     - fetching the Pokémon description.
   - This keeps HTTP and API-specific knowledge out of the UI components.

6. **External integration**
   - The only clearly defined external system is **PokeAPI** at `https://pokeapi.co/api/v2/pokemon/`.
   - The app depends on it for both the list view and the detail view, so API availability and response shape directly affect the UI.

7. **State and data flow**
   - The likely flow is:
     - Home loads a page of Pokémon through `PokemonService`.
     - The list is rendered as `TarjetaPokemonComponent` instances.
     - The user clicks a card.
     - Home receives the selection, updates the selected Pokémon state, and passes that state to `FotoPokemonComponent` and `DetalleComponent`.
     - If detail data is needed, Home or Detalle triggers additional service calls.
   - This is a parent-driven state model with child-to-parent events for selection.

8. **Pagination / infinite scroll behavior**
   - The README explicitly mentions “carga paginada mediante scroll.”
   - That makes the Home page a stateful container for incremental loading rather than a static list.
   - The architectural implication is that list rendering is coupled to viewport/scroll events, while fetching remains isolated in the service.

9. **Shared contracts**
   - `src/app/interfaces/pokeapi.ts` and `src/app/interfaces/pokemon.ts` define the data shapes used across the app.
   - These interfaces are the contract layer between the API responses, the service, and the UI components.
   - They help keep the component tree strongly typed and reduce reliance on raw API payloads.

10. **Styling and assets**
   - The app uses SCSS throughout, with global styles in `src/styles.scss` and shared variables in `src/assets/styles/var.scss`.
   - `src/assets/img` suggests the UI may include custom visual assets beyond API-provided sprites.
   - Styling is therefore a meaningful part of the presentation layer, but not of the data architecture.

11. **Testing and tooling**
   - Each major component and the service have corresponding `*.spec.ts` files, so the project is set up for Angular unit testing.
   - The repository uses the standard Angular/Node toolchain via `package.json`, `npm`, and Angular CLI commands.
   - `angular.json` and the TypeScript config files indicate a conventional Angular build/test pipeline rather than custom infrastructure.

12. **Diagram guidance**
   - A good architecture diagram would show:
     - one main page container (`HomeComponent`),
     - three reusable display children (`TarjetaPokemon`, `FotoPokemon`, `Detalle`),
     - one central API service (`PokemonService`),
     - shared interfaces between service and UI,
     - and the external dependency on PokeAPI.
   - The key boundary is: **UI components do not talk directly to the API; they flow through the service and the Home page state controller**.

Main entry points: [`src/app/pages/home/home.component.ts`](https://github.com/sehemu92/pokedexangular/blob/main/src/app/pages/home/home.component.ts) (Home), [`src/app/services/pokemon.service.ts`](https://github.com/sehemu92/pokedexangular/blob/main/src/app/services/pokemon.service.ts) (PokemonService), [`src/app/components/detalle/detalle.component.ts`](https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/detalle/detalle.component.ts) (Detail), [`src/main.ts`](https://github.com/sehemu92/pokedexangular/blob/main/src/main.ts) (main.ts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App Shell"]
  node_main["main.ts<br/>bootstrap<br/>[main.ts]"]
  node_app_config["app.config<br/>[app.config.ts]"]
  node_app_routes["routes<br/>routing<br/>[app.routes.ts]"]
  node_app_component["App shell<br/>root component<br/>[app.component.ts]"]
end

subgraph group_group_home["Home Flow"]
  node_home_component["Home<br/>page container<br/>[home.component.ts]"]
  node_tarjeta_component["Card<br/>presentational component"]
  node_foto_component["Photo<br/>presentational component"]
  node_detalle_component["Detail<br/>presentational component"]
end

subgraph group_group_data["Data Layer"]
  node_pokemon_service["PokemonService<br/>api service<br/>[pokemon.service.ts]"]
  node_pokeapi_interface["PokeAPI model<br/>api contract<br/>[pokeapi.ts]"]
  node_pokemon_interface["Pokemon model<br/>domain contract<br/>[pokemon.ts]"]
end

subgraph group_group_shared["Shared Assets"]
  node_global_styles["Global styles<br/>scss<br/>[styles.scss]"]
  node_theme_vars["Theme vars<br/>scss variables<br/>[var.scss]"]
  node_assets_img[("Images<br/>asset folder")]
end

node_main -->|"bootstraps"| node_app_config
node_main -->|"renders"| node_app_component
node_app_config -->|"uses"| node_app_routes
node_app_component -->|"hosts"| node_home_component
node_home_component -->|"loads"| node_pokemon_service
node_home_component -->|"renders"| node_tarjeta_component
node_home_component -->|"passes"| node_foto_component
node_home_component -->|"passes"| node_detalle_component
node_tarjeta_component -->|"selects"| node_home_component
node_pokemon_service -->|"parses"| node_pokeapi_interface
node_pokemon_service -->|"returns"| node_pokemon_interface
node_home_component -->|"stores"| node_pokemon_interface
node_detalle_component -.->|"may request"| node_pokemon_service
node_global_styles -->|"imports"| node_theme_vars
node_home_component -.->|"styled by"| node_global_styles
node_foto_component -.->|"uses"| node_assets_img
node_detalle_component -.->|"uses"| node_assets_img

click node_main "https://github.com/sehemu92/pokedexangular/blob/main/src/main.ts"
click node_app_config "https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.config.ts"
click node_app_routes "https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.routes.ts"
click node_app_component "https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.component.ts"
click node_home_component "https://github.com/sehemu92/pokedexangular/blob/main/src/app/pages/home/home.component.ts"
click node_tarjeta_component "https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/tarjeta-pokemon/tarjeta-pokemon.component.ts"
click node_foto_component "https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/foto-pokemon/foto-pokemon.component.ts"
click node_detalle_component "https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/detalle/detalle.component.ts"
click node_pokemon_service "https://github.com/sehemu92/pokedexangular/blob/main/src/app/services/pokemon.service.ts"
click node_pokeapi_interface "https://github.com/sehemu92/pokedexangular/blob/main/src/app/interfaces/pokeapi.ts"
click node_pokemon_interface "https://github.com/sehemu92/pokedexangular/blob/main/src/app/interfaces/pokemon.ts"
click node_global_styles "https://github.com/sehemu92/pokedexangular/blob/main/src/styles.scss"
click node_theme_vars "https://github.com/sehemu92/pokedexangular/blob/main/src/assets/styles/var.scss"
click node_assets_img "https://github.com/sehemu92/pokedexangular/tree/main/src/assets/img"

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_config,node_app_routes,node_app_component toneBlue
class node_home_component,node_tarjeta_component,node_foto_component,node_detalle_component toneAmber
class node_pokemon_service,node_pokeapi_interface,node_pokemon_interface toneMint
class node_global_styles,node_theme_vars,node_assets_img toneRose
```

## Components

### App Shell

Bootstrap, routing, and root component

- [main.ts](https://github.com/sehemu92/pokedexangular/blob/main/src/main.ts): bootstrap · Angular entrypoint · `src/main.ts`
- [app.config](https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.config.ts): config · App-wide providers and setup · `src/app/app.config.ts`
- [routes](https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.routes.ts): routing · Route definitions · `src/app/app.routes.ts`
- [App shell](https://github.com/sehemu92/pokedexangular/blob/main/src/app/app.component.ts): root component · Top-level application shell · `src/app/app.component.ts`

### Home Flow

Main page orchestration and presentational children

- [Home](https://github.com/sehemu92/pokedexangular/blob/main/src/app/pages/home/home.component.ts): page container · Coordinates browsing, selection, and detail state · `src/app/pages/home/home.component.ts`
- [Card](https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/tarjeta-pokemon/tarjeta-pokemon.component.ts): presentational component · Renders a Pokémon card and emits selection · `src/app/components/tarjeta-pokemon/tarjeta-pokemon.component.ts`
- [Photo](https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/foto-pokemon/foto-pokemon.component.ts): presentational component · Shows selected Pokémon image · `src/app/components/foto-pokemon/foto-pokemon.component.ts`
- [Detail](https://github.com/sehemu92/pokedexangular/blob/main/src/app/components/detalle/detalle.component.ts): presentational component · Shows expanded Pokémon information · `src/app/components/detalle/detalle.component.ts`

### Data Layer

API access and shared contracts

- [PokemonService](https://github.com/sehemu92/pokedexangular/blob/main/src/app/services/pokemon.service.ts): api service · Centralized access to PokeAPI · `src/app/services/pokemon.service.ts`
- [PokeAPI model](https://github.com/sehemu92/pokedexangular/blob/main/src/app/interfaces/pokeapi.ts): api contract · PokeAPI response shapes · `src/app/interfaces/pokeapi.ts`
- [Pokemon model](https://github.com/sehemu92/pokedexangular/blob/main/src/app/interfaces/pokemon.ts): domain contract · Shared Pokémon data shape · `src/app/interfaces/pokemon.ts`

### Shared Assets

Global styling and visual assets

- [Global styles](https://github.com/sehemu92/pokedexangular/blob/main/src/styles.scss): scss · Application-wide styling · `src/styles.scss`
- [Theme vars](https://github.com/sehemu92/pokedexangular/blob/main/src/assets/styles/var.scss): scss variables · Shared style variables · `src/assets/styles/var.scss`
- [Images](https://github.com/sehemu92/pokedexangular/tree/main/src/assets/img): asset folder · Custom visual assets · `src/assets/img`

## Connections

- main.ts → app.config: bootstraps · Starts Angular with app configuration
- main.ts → App shell: renders · Loads the root shell
- app.config → routes: uses · Provides routing setup
- App shell → Home: hosts · Main content is routed into the shell
- Home → PokemonService: loads · Fetches lists and details
- Home → Card: renders · Maps Pokémon list to cards
- Home → Photo: passes · Sends selected Pokémon image data
- Home → Detail: passes · Sends selected Pokémon detail data
- Card → Home: selects · Emits card selection upward
- PokemonService → PokeAPI model: parses · Maps API responses into typed shapes
- PokemonService → Pokemon model: returns · Uses shared Pokémon domain model
- Home → Pokemon model: stores · Keeps list and selection state
- Detail → PokemonService: may request · Can trigger or consume extra detail fetches
- Global styles → Theme vars: imports · Uses shared SCSS variables
- Home → Global styles: styled by · Page styling relies on global styles
- Photo → Images: uses · May draw from bundled images
- Detail → Images: uses · May draw from bundled images