# hamzaelmanzari/cms-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/hamzaelmanzari/cms-frontend
- Repository: https://github.com/hamzaelmanzari/cms-frontend

## Overview

Itqan CMS is an Angular frontend for discovering licensed Quranic assets and for publishers to manage them. The user-facing flow starts at the catalog or account routes; authenticated publishers enter a permission-gated portal to manage content and publisher operations. Authentication is implemented through an auth service and a headless Allauth API client. The README documents API access, licensing, localization, and content standards, but backend and UI implementation details for several features were not sampled; those branches are represented at their existing feature-directory paths without speculative internal links.

Main entry points: [`src/app/features/admin/admin.routes.ts`](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/admin.routes.ts) (Portal routes), [`src/app/app.routes.ts`](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/app.routes.ts) (Application routes), [`src/app/features/admin/recitations`](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/recitations) (Recitation management), [`src/app/core/auth/services/auth.service.ts`](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/services/auth.service.ts) (Auth state and actions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Public discovery"]
  node_gallery["Asset gallery"]
  node_publishers_public["Publisher directory"]
  node_reciters_public["Reciter directory"]
  node_license["License details"]
  node_standards["Content standards"]
end

subgraph group_identity["Identity and access"]
  node_account_routes["Account routes<br/>[account.routes.ts]"]
  node_auth_pages["Account workflows"]
  node_auth_service["Auth state and actions<br/>[auth.service.ts]"]
  node_headless_auth["Headless auth API"]
end

subgraph group_portal["Publisher portal"]
  node_admin_routes["Portal routes<br/>[admin.routes.ts]"]
  node_portal_guards["Portal permission guards"]
  node_recitation_admin["Recitation management"]
  node_reciter_admin["Reciter management"]
  node_tafsir_admin["Tafsir management"]
  node_mushaf_admin["Mushaf management"]
  node_font_admin["Font management"]
  node_publisher_admin["Publisher management"]
  node_members_access["Members and requests"]
  node_issues_programs["Issues and programs"]
  node_usage["Usage insights"]
  node_admin_auth["Admin identity"]
end

subgraph group_platform["Shared platform"]
  node_app_routes["Application routes<br/>[app.routes.ts]"]
end

node_visitor(("Visitor or publisher"))
node_allauth{{"Allauth service"}}
node_api_backend{{"CMS API"}}

node_visitor -->|"opens"| node_app_routes
node_app_routes -->|"routes to"| node_gallery
node_app_routes -->|"routes to"| node_publishers_public
node_app_routes -->|"routes to"| node_reciters_public
node_visitor -->|"consults"| node_license
node_visitor -->|"consults"| node_standards
node_app_routes -->|"includes"| node_account_routes
node_account_routes -->|"routes to"| node_auth_pages
node_auth_pages -.->|"uses"| node_auth_service
node_auth_service -->|"calls"| node_headless_auth
node_headless_auth -->|"sends HTTP requests"| node_allauth
node_app_routes -->|"loads portal routes"| node_admin_routes
node_admin_routes -->|"routes to"| node_recitation_admin
node_admin_routes -->|"routes to"| node_reciter_admin
node_admin_routes -->|"routes to"| node_tafsir_admin
node_admin_routes -->|"routes to"| node_mushaf_admin
node_admin_routes -->|"routes to"| node_font_admin
node_admin_routes -->|"routes to"| node_publisher_admin
node_admin_routes -->|"routes to"| node_members_access
node_admin_routes -->|"routes to"| node_issues_programs
node_admin_routes -.->|"routes to"| node_usage
node_recitation_admin -->|"checks access"| node_portal_guards
node_reciter_admin -->|"checks access"| node_portal_guards
node_admin_auth -->|"reads user state"| node_auth_service
node_portal_guards -->|"checks permissions"| node_admin_auth
node_recitation_admin -.->|"manages content"| node_api_backend
node_visitor -->|"browses assets"| node_gallery
node_visitor -->|"manages publications"| node_publisher_admin

click node_app_routes "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/app.routes.ts"
click node_gallery "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/gallery"
click node_publishers_public "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/publishers"
click node_reciters_public "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/reciters"
click node_license "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/license"
click node_standards "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/content-standards"
click node_account_routes "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/account.routes.ts"
click node_auth_pages "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/core/auth/pages"
click node_auth_service "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/services/auth.service.ts"
click node_headless_auth "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/headless/headless-auth-api.service.ts"
click node_admin_routes "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/admin.routes.ts"
click node_portal_guards "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/guards/permission.guard.ts"
click node_recitation_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/recitations"
click node_reciter_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/reciters"
click node_tafsir_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/tafsirs"
click node_mushaf_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/mushafs"
click node_font_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/fonts"
click node_publisher_admin "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/publishers"
click node_members_access "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/members"
click node_issues_programs "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin"
click node_usage "https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/usage"
click node_admin_auth "https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/services/admin-auth.service.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_gallery,node_publishers_public,node_reciters_public,node_license,node_standards toneBlue
class node_account_routes,node_auth_pages,node_auth_service,node_headless_auth toneAmber
class node_admin_routes,node_portal_guards,node_recitation_admin,node_reciter_admin,node_tafsir_admin,node_mushaf_admin,node_font_admin,node_publisher_admin,node_members_access,node_issues_programs,node_usage,node_admin_auth,node_api_backend toneMint
class node_app_routes toneRose
class node_visitor,node_allauth toneIndigo
```

## Components

### Public discovery

- [Asset gallery](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/gallery): `src/app/features/gallery`
- [Publisher directory](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/publishers): `src/app/features/publishers`
- [Reciter directory](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/reciters): `src/app/features/reciters`
- [License details](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/license): `src/app/features/license`
- [Content standards](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/content-standards): `src/app/features/content-standards`

### Identity and access

- [Account routes](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/account.routes.ts): `src/app/core/auth/account.routes.ts`
- [Account workflows](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/core/auth/pages): `src/app/core/auth/pages`
- [Auth state and actions](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/services/auth.service.ts): `src/app/core/auth/services/auth.service.ts`
- [Headless auth API](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/core/auth/headless/headless-auth-api.service.ts): `src/app/core/auth/headless/headless-auth-api.service.ts`

### Publisher portal

- [Portal routes](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/admin.routes.ts): `src/app/features/admin/admin.routes.ts`
- [Portal permission guards](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/guards/permission.guard.ts): `src/app/features/admin/guards/permission.guard.ts`
- [Recitation management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/recitations): `src/app/features/admin/recitations`
- [Reciter management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/reciters): `src/app/features/admin/reciters`
- [Tafsir management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/tafsirs): `src/app/features/admin/tafsirs`
- [Mushaf management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/mushafs): `src/app/features/admin/mushafs`
- [Font management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/fonts): `src/app/features/admin/fonts`
- [Publisher management](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/publishers): `src/app/features/admin/publishers`
- [Members and requests](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/members): `src/app/features/admin/members`
- [Issues and programs](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin): `src/app/features/admin`
- [Usage insights](https://github.com/hamzaelmanzari/cms-frontend/tree/staging/src/app/features/admin/usage): `src/app/features/admin/usage`
- [Admin identity](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/features/admin/services/admin-auth.service.ts): `src/app/features/admin/services/admin-auth.service.ts`

### Shared platform

- [Application routes](https://github.com/hamzaelmanzari/cms-frontend/blob/staging/src/app/app.routes.ts): `src/app/app.routes.ts`

### Other components

- **Visitor or publisher**
- **Allauth service**
- **CMS API**

## Connections

- Visitor or publisher → Application routes: opens (evidence: `README.md`)
- Application routes → Asset gallery: routes to (evidence: `src/app/app.routes.ts`)
- Application routes → Publisher directory: routes to (evidence: `src/app/app.routes.ts`)
- Application routes → Reciter directory: routes to (evidence: `src/app/app.routes.ts`)
- Visitor or publisher → License details: consults (evidence: `README.md`)
- Visitor or publisher → Content standards: consults (evidence: `README.md`)
- Application routes → Account routes: includes (evidence: `src/app/app.routes.ts`)
- Account routes → Account workflows: routes to (evidence: `src/app/core/auth/account.routes.ts`)
- Account workflows → Auth state and actions: uses (evidence: `src/app/core/auth/pages/verify-email/verify-email.page.ts`)
- Auth state and actions → Headless auth API: calls (evidence: `src/app/core/auth/services/auth.service.ts`)
- Headless auth API → Allauth service: sends HTTP requests (evidence: `src/app/core/auth/headless/headless-auth-api.service.ts`)
- Application routes → Portal routes: loads portal routes (evidence: `src/app/app.routes.ts`)
- Portal routes → Recitation management: routes to (evidence: `src/app/features/admin/recitations/recitations.routes.ts`)
- Portal routes → Reciter management: routes to (evidence: `src/app/features/admin/reciters/reciters.routes.ts`)
- Portal routes → Tafsir management: routes to (evidence: `src/app/features/admin/tafsirs/tafsirs.routes.ts`)
- Portal routes → Mushaf management: routes to (evidence: `src/app/features/admin/mushafs/mushafs.routes.ts`)
- Portal routes → Font management: routes to (evidence: `src/app/features/admin/fonts/fonts.routes.ts`)
- Portal routes → Publisher management: routes to (evidence: `src/app/app.routes.ts`)
- Portal routes → Members and requests: routes to (evidence: `src/app/app.routes.ts`)
- Portal routes → Issues and programs: routes to (evidence: `src/app/features/admin/admin.routes.ts`)
- Portal routes → Usage insights: routes to
- Recitation management → Portal permission guards: checks access (evidence: `src/app/features/admin/recitations/recitations.routes.ts`)
- Reciter management → Portal permission guards: checks access (evidence: `src/app/features/admin/reciters/reciters.routes.ts`)
- Admin identity → Auth state and actions: reads user state (evidence: `src/app/features/admin/services/admin-auth.service.ts`)
- Portal permission guards → Admin identity: checks permissions (evidence: `src/app/features/admin/guards/permission.guard.ts`)
- Recitation management → CMS API: manages content
- Visitor or publisher → Asset gallery: browses assets (evidence: `README.md`)
- Visitor or publisher → Publisher management: manages publications (evidence: `README.md`)