# realworld-apps/angular-realworld-example-app architecture

> Architecture diagram of the GitHub repository realworld-apps/angular-realworld-example-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/realworld-apps/angular-realworld-example-app
- Repository: https://github.com/realworld-apps/angular-realworld-example-app

## Overview

Conduit is an Angular social-blogging app: visitors browse or filter article feeds, open articles, and can authenticate to create, edit, favorite, or comment; profiles expose authored and favorited articles, and users can follow one another. The graph separates those product stages from authentication, shared rendering, and API integration. The README documents several capabilities whose component wiring was not sampled, so their subsystem links are represented conservatively; the sampled services make the API and token-storage interactions explicit.

Main entry points: [`src/app/app.routes.ts`](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/app.routes.ts) (Route dispatch), [`src/app/features/article/services/articles.service.ts`](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/articles.service.ts) (Article operations), [`src/app/features/article/pages/article/article.component.ts`](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/article/article.component.ts) (Article detail), [`src/app/features/article/pages/home/home.component.ts`](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/home/home.component.ts) (Home and feeds)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell_auth["App and auth"]
  node_app_shell["App shell<br/>[app.component.ts]"]
  node_routing["Route dispatch<br/>[app.routes.ts]"]
  node_auth_page["Login and signup<br/>[auth.component.ts]"]
  node_user_service["Current user<br/>[user.service.ts]"]
  node_jwt_service["JWT token<br/>[jwt.service.ts]"]
  node_token_store[("Browser token store")]
end

subgraph group_articles["Articles and comments"]
  node_home["Home and feeds<br/>[home.component.ts]"]
  node_article_list["Article lists"]
  node_article_preview["Article previews"]
  node_article_page["Article detail"]
  node_editor["Article editor"]
  node_articles_service["Article operations"]
  node_comments_service["Comment operations"]
  node_tags_service["Tag listing<br/>[tags.service.ts]"]
end

subgraph group_profiles["Profiles and settings"]
  node_settings["Account settings"]
  node_profile_page["Public profile"]
  node_profile_articles["Authored articles"]
  node_profile_favorites["Favorite articles"]
  node_profile_service["Profile operations<br/>[profile.service.ts]"]
end

subgraph group_integration["API and shared UI"]
  node_markdown["Markdown rendering<br/>[markdown.pipe.ts]"]
  node_http_interceptors["HTTP interceptors<br/>[api.interceptor.ts]"]
end

node_visitor(("Visitor"))
node_backend["Conduit API"]

node_visitor -->|"opens app"| node_app_shell
node_app_shell -->|"hosts routes"| node_routing
node_routing -->|"loads home"| node_home
node_routing -->|"loads auth"| node_auth_page
node_routing -->|"guards access"| node_settings
node_routing -->|"guards editor"| node_editor
node_routing -->|"loads article"| node_article_page
node_routing -->|"loads profile"| node_profile_page
node_user_service -->|"saves and clears"| node_jwt_service
node_jwt_service -->|"reads and writes"| node_token_store
node_user_service -->|"auth and user requests"| node_backend
node_articles_service -->|"article requests"| node_backend
node_comments_service -->|"comment requests"| node_backend
node_profile_service -->|"profile requests"| node_backend
node_home -->|"loads feed"| node_articles_service
node_home -->|"loads tags"| node_tags_service
node_article_page -->|"loads article"| node_articles_service
node_article_page -->|"manages comments"| node_comments_service
node_editor -->|"creates or updates"| node_articles_service
node_profile_page -->|"loads and follows"| node_profile_service
node_profile_articles -->|"loads authored list"| node_articles_service
node_profile_favorites -->|"loads favorites"| node_articles_service
node_http_interceptors -->|"forwards requests"| node_backend
node_article_page -->|"renders body"| node_markdown

click node_app_shell "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/app.component.ts"
click node_routing "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/app.routes.ts"
click node_auth_page "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/auth.component.ts"
click node_user_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/services/user.service.ts"
click node_jwt_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/services/jwt.service.ts"
click node_settings "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/settings/settings.component.ts"
click node_home "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/home/home.component.ts"
click node_article_list "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/components/article-list.component.ts"
click node_article_preview "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/components/article-preview.component.ts"
click node_article_page "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/article/article.component.ts"
click node_editor "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/editor/editor.component.ts"
click node_articles_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/articles.service.ts"
click node_comments_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/comments.service.ts"
click node_tags_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/tags.service.ts"
click node_markdown "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/shared/pipes/markdown.pipe.ts"
click node_profile_page "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/pages/profile/profile.component.ts"
click node_profile_articles "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/components/profile-articles.component.ts"
click node_profile_favorites "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/components/profile-favorites.component.ts"
click node_profile_service "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/services/profile.service.ts"
click node_http_interceptors "https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/interceptors/api.interceptor.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_app_shell,node_routing,node_auth_page,node_user_service,node_jwt_service,node_token_store toneBlue
class node_home,node_article_list,node_article_preview,node_article_page,node_editor,node_articles_service,node_comments_service,node_tags_service toneAmber
class node_settings,node_profile_page,node_profile_articles,node_profile_favorites,node_profile_service,node_backend toneMint
class node_markdown,node_http_interceptors toneRose
class node_visitor toneIndigo
```

## Components

### App and auth

- [App shell](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [Route dispatch](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Login and signup](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/auth.component.ts): `src/app/core/auth/auth.component.ts`
- [Current user](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/services/user.service.ts): `src/app/core/auth/services/user.service.ts`
- [JWT token](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/auth/services/jwt.service.ts): `src/app/core/auth/services/jwt.service.ts`
- **Browser token store**

### Articles and comments

- [Home and feeds](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/home/home.component.ts): `src/app/features/article/pages/home/home.component.ts`
- [Article lists](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/components/article-list.component.ts): `src/app/features/article/components/article-list.component.ts`
- [Article previews](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/components/article-preview.component.ts): `src/app/features/article/components/article-preview.component.ts`
- [Article detail](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/article/article.component.ts): `src/app/features/article/pages/article/article.component.ts`
- [Article editor](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/pages/editor/editor.component.ts): `src/app/features/article/pages/editor/editor.component.ts`
- [Article operations](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/articles.service.ts): `src/app/features/article/services/articles.service.ts`
- [Comment operations](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/comments.service.ts): `src/app/features/article/services/comments.service.ts`
- [Tag listing](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/article/services/tags.service.ts): `src/app/features/article/services/tags.service.ts`

### Profiles and settings

- [Account settings](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/settings/settings.component.ts): `src/app/features/settings/settings.component.ts`
- [Public profile](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/pages/profile/profile.component.ts): `src/app/features/profile/pages/profile/profile.component.ts`
- [Authored articles](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/components/profile-articles.component.ts): `src/app/features/profile/components/profile-articles.component.ts`
- [Favorite articles](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/components/profile-favorites.component.ts): `src/app/features/profile/components/profile-favorites.component.ts`
- [Profile operations](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/features/profile/services/profile.service.ts): `src/app/features/profile/services/profile.service.ts`

### API and shared UI

- [Markdown rendering](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/shared/pipes/markdown.pipe.ts): `src/app/shared/pipes/markdown.pipe.ts`
- [HTTP interceptors](https://github.com/realworld-apps/angular-realworld-example-app/blob/main/src/app/core/interceptors/api.interceptor.ts): `src/app/core/interceptors/api.interceptor.ts`

### Other components

- **Visitor**
- **Conduit API**

## Connections

- Visitor → App shell: opens app
- App shell → Route dispatch: hosts routes
- Route dispatch → Home and feeds: loads home
- Route dispatch → Login and signup: loads auth
- Route dispatch → Account settings: guards access
- Route dispatch → Article editor: guards editor
- Route dispatch → Article detail: loads article
- Route dispatch → Public profile: loads profile
- Current user → JWT token: saves and clears
- JWT token → Browser token store: reads and writes
- Current user → Conduit API: auth and user requests
- Article operations → Conduit API: article requests
- Comment operations → Conduit API: comment requests
- Profile operations → Conduit API: profile requests
- Home and feeds → Article operations: loads feed
- Home and feeds → Tag listing: loads tags
- Article detail → Article operations: loads article
- Article detail → Comment operations: manages comments
- Article editor → Article operations: creates or updates
- Public profile → Profile operations: loads and follows
- Authored articles → Article operations: loads authored list
- Favorite articles → Article operations: loads favorites
- HTTP interceptors → Conduit API: forwards requests
- Article detail → Markdown rendering: renders body