How realworld-apps/angular-realworld-example-app works
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: app.routes.ts Route dispatch · articles.service.ts Article operations · article.component.ts Article detail · home.component.ts Home and feeds
Components 23
App and auth
- App shell
src/app/app.component.ts - Route dispatch
src/app/app.routes.ts - Login and signup
src/app/core/auth/auth.component.ts - Current user
src/app/core/auth/services/user.service.ts - JWT token
src/app/core/auth/services/jwt.service.ts - Browser token store
Articles and comments
- Home and feeds
src/app/features/article/pages/home/home.component.ts - Article lists
src/app/features/article/components/article-list.component.ts - Article previews
src/app/features/article/components/article-preview.component.ts - Article detail
src/app/features/article/pages/article/article.component.ts - Article editor
src/app/features/article/pages/editor/editor.component.ts - Article operations
src/app/features/article/services/articles.service.ts - Comment operations
src/app/features/article/services/comments.service.ts - Tag listing
src/app/features/article/services/tags.service.ts
Profiles and settings
- Account settings
src/app/features/settings/settings.component.ts - Public profile
src/app/features/profile/pages/profile/profile.component.ts - Authored articles
src/app/features/profile/components/profile-articles.component.ts - Favorite articles
src/app/features/profile/components/profile-favorites.component.ts - Profile operations
src/app/features/profile/services/profile.service.ts
API and shared UI
- Markdown rendering
src/app/shared/pipes/markdown.pipe.ts - HTTP interceptors
src/app/core/interceptors/api.interceptor.ts
Other components
- Visitor
- Conduit API
Connections 24
- 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