# venucontentstack/compass-starter-app architecture

> Architecture diagram of the GitHub repository venucontentstack/compass-starter-app, 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/venucontentstack/compass-starter-app
- Repository: https://github.com/venucontentstack/compass-starter-app

## Overview

Compass Starter App is a locale-aware Next.js content site backed by Contentstack. Visitors enter through localized home, general-page, or article routes; page content is fetched and rendered as reusable page blocks and article views. Shared layout provides navigation and footer, while personalization and authoring/preview support extend the experience. The source index identifies route-to-service references, but their call details and several subsystems were not excerpted, so those relationships are shown only as unverified dashed links or omitted.

Main entry points: [`components/RenderComponents/index.tsx`](https://github.com/venucontentstack/compass-starter-app/blob/main/components/RenderComponents/index.tsx) (Block renderer), [`services/contentstack.ts`](https://github.com/venucontentstack/compass-starter-app/blob/main/services/contentstack.ts) (Content queries), [`MainLayout/MainLayout.tsx`](https://github.com/venucontentstack/compass-starter-app/blob/main/MainLayout/MainLayout.tsx) (Main layout), [`app/[locale]/page.tsx`](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/page.tsx) (Home route)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and layout"]
  node_home["Home route<br/>[page.tsx]"]
  node_general["General pages<br/>[page.tsx]"]
  node_article_detail["Article detail<br/>[page.tsx]"]
  node_article_route["Article routes<br/>[page.tsx]"]
  node_article_listing["Article listing<br/>[page.tsx]"]
  node_layout["Main layout<br/>[MainLayout.tsx]"]
  node_locale_middleware["Locale routing<br/>[middleware.ts]"]
  node_router_hook["Locale router hook<br/>[useRouterHook.ts]"]
end

subgraph group_content["CMS content"]
  node_content_service["Content queries<br/>[contentstack.ts]"]
  node_delivery_sdk["Delivery SDK<br/>[deliverySDk.ts]"]
  node_preview_sdk["Preview SDK<br/>[previewSDk.ts]"]
  node_contentstack[("Contentstack CMS")]
end

subgraph group_presentation["Page presentation"]
  node_render_components["Block renderer<br/>[index.tsx]"]
  node_content_blocks["Content blocks<br/>[CardCollection.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_teaser["Teaser<br/>[Teaser.tsx]"]
  node_text_carousel["Text image carousel"]
  node_featured_articles["Featured articles"]
  node_article_views["Article views<br/>[ArticleCover.tsx]"]
end

subgraph group_experience["Visitor experience"]
  node_personalization["Personalization"]
  node_header["Header navigation<br/>[Header.tsx]"]
  node_footer["Footer navigation<br/>[Footer.tsx]"]
  node_language_selector["Language selector"]
  node_consent["Cookie consent<br/>[Consentform.tsx]"]
  node_user_form["User form modal<br/>[UserFormModal.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -.->|"opens"| node_general
node_visitor -.->|"opens"| node_article_detail
node_visitor -.->|"opens"| node_article_route
node_visitor -.->|"opens"| node_article_listing
node_home -.->|"queries content"| node_content_service
node_general -.->|"queries content"| node_content_service
node_article_detail -.->|"queries content"| node_content_service
node_article_route -.->|"queries content"| node_content_service
node_article_listing -.->|"queries content"| node_content_service
node_content_service -.->|"uses delivery"| node_delivery_sdk
node_content_service -.->|"fetches entries"| node_contentstack
node_preview_sdk -->|"configures preview"| node_delivery_sdk
node_home -.->|"renders blocks"| node_render_components
node_general -.->|"renders blocks"| node_render_components
node_render_components -->|"dispatches"| node_hero
node_render_components -->|"dispatches"| node_teaser
node_render_components -->|"dispatches"| node_content_blocks
node_render_components -->|"dispatches"| node_text_carousel
node_render_components -->|"renders"| node_featured_articles
node_article_detail -.->|"renders article"| node_article_views
node_layout -.->|"renders"| node_header
node_layout -.->|"renders"| node_footer
node_header -->|"renders"| node_language_selector
node_visitor -.->|"requests locale"| node_locale_middleware
node_router_hook -.->|"provides navigation"| node_visitor
node_layout -.->|"provides context"| node_personalization
node_layout -.->|"shows consent"| node_consent
node_layout -.->|"shows form"| node_user_form

click node_home "https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/page.tsx"
click node_general "https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/%5B...slug%5D/page.tsx"
click node_article_detail "https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/article/%5B...slug%5D/page.tsx"
click node_article_route "https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/articles/%5B...slug%5D/page.tsx"
click node_article_listing "https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/articles/page.tsx"
click node_layout "https://github.com/venucontentstack/compass-starter-app/blob/main/MainLayout/MainLayout.tsx"
click node_locale_middleware "https://github.com/venucontentstack/compass-starter-app/blob/main/middleware.ts"
click node_content_service "https://github.com/venucontentstack/compass-starter-app/blob/main/services/contentstack.ts"
click node_delivery_sdk "https://github.com/venucontentstack/compass-starter-app/blob/main/config/contentstack/deliverySDk.ts"
click node_preview_sdk "https://github.com/venucontentstack/compass-starter-app/blob/main/config/contentstack/previewSDk.ts"
click node_personalization "https://github.com/venucontentstack/compass-starter-app/blob/main/context/PersonalizationProvider.tsx"
click node_render_components "https://github.com/venucontentstack/compass-starter-app/blob/main/components/RenderComponents/index.tsx"
click node_content_blocks "https://github.com/venucontentstack/compass-starter-app/blob/main/components/CardCollection/CardCollection.tsx"
click node_hero "https://github.com/venucontentstack/compass-starter-app/blob/main/components/Hero/Hero.tsx"
click node_teaser "https://github.com/venucontentstack/compass-starter-app/blob/main/components/Teaser/Teaser.tsx"
click node_text_carousel "https://github.com/venucontentstack/compass-starter-app/blob/main/components/TextAndImageCarousel/TextAndImageCarousel.tsx"
click node_featured_articles "https://github.com/venucontentstack/compass-starter-app/blob/main/components/FeaturedArticles/FeaturedArticles.tsx"
click node_article_views "https://github.com/venucontentstack/compass-starter-app/blob/main/components/Article/ArticleCover.tsx"
click node_header "https://github.com/venucontentstack/compass-starter-app/blob/main/components/Header/Header.tsx"
click node_footer "https://github.com/venucontentstack/compass-starter-app/blob/main/components/Footer/Footer.tsx"
click node_language_selector "https://github.com/venucontentstack/compass-starter-app/blob/main/components/LanguageSelector/LanguageSelector.tsx"
click node_consent "https://github.com/venucontentstack/compass-starter-app/blob/main/components/CookieConsentForm/Consentform.tsx"
click node_user_form "https://github.com/venucontentstack/compass-starter-app/blob/main/components/UserFormModal/UserFormModal.tsx"
click node_router_hook "https://github.com/venucontentstack/compass-starter-app/blob/main/hooks/useRouterHook.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_home,node_general,node_article_detail,node_article_route,node_article_listing,node_layout,node_locale_middleware,node_router_hook toneBlue
class node_content_service,node_delivery_sdk,node_preview_sdk,node_contentstack toneAmber
class node_render_components,node_content_blocks,node_hero,node_teaser,node_text_carousel,node_featured_articles,node_article_views toneMint
class node_personalization,node_header,node_footer,node_language_selector,node_consent,node_user_form toneRose
class node_visitor toneIndigo
```

## Components

### Routing and layout

- [Home route](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/page.tsx): `app/[locale]/page.tsx`
- [General pages](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/%5B...slug%5D/page.tsx): `app/[locale]/[...slug]/page.tsx`
- [Article detail](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/article/%5B...slug%5D/page.tsx): `app/[locale]/article/[...slug]/page.tsx`
- [Article routes](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/articles/%5B...slug%5D/page.tsx): `app/[locale]/articles/[...slug]/page.tsx`
- [Article listing](https://github.com/venucontentstack/compass-starter-app/blob/main/app/%5Blocale%5D/articles/page.tsx): `app/[locale]/articles/page.tsx`
- [Main layout](https://github.com/venucontentstack/compass-starter-app/blob/main/MainLayout/MainLayout.tsx): `MainLayout/MainLayout.tsx`
- [Locale routing](https://github.com/venucontentstack/compass-starter-app/blob/main/middleware.ts): `middleware.ts`
- [Locale router hook](https://github.com/venucontentstack/compass-starter-app/blob/main/hooks/useRouterHook.ts): `hooks/useRouterHook.ts`

### CMS content

- [Content queries](https://github.com/venucontentstack/compass-starter-app/blob/main/services/contentstack.ts): `services/contentstack.ts`
- [Delivery SDK](https://github.com/venucontentstack/compass-starter-app/blob/main/config/contentstack/deliverySDk.ts): `config/contentstack/deliverySDk.ts`
- [Preview SDK](https://github.com/venucontentstack/compass-starter-app/blob/main/config/contentstack/previewSDk.ts): `config/contentstack/previewSDk.ts`
- **Contentstack CMS**

### Page presentation

- [Block renderer](https://github.com/venucontentstack/compass-starter-app/blob/main/components/RenderComponents/index.tsx): `components/RenderComponents/index.tsx`
- [Content blocks](https://github.com/venucontentstack/compass-starter-app/blob/main/components/CardCollection/CardCollection.tsx): `components/CardCollection/CardCollection.tsx`
- [Hero](https://github.com/venucontentstack/compass-starter-app/blob/main/components/Hero/Hero.tsx): `components/Hero/Hero.tsx`
- [Teaser](https://github.com/venucontentstack/compass-starter-app/blob/main/components/Teaser/Teaser.tsx): `components/Teaser/Teaser.tsx`
- [Text image carousel](https://github.com/venucontentstack/compass-starter-app/blob/main/components/TextAndImageCarousel/TextAndImageCarousel.tsx): `components/TextAndImageCarousel/TextAndImageCarousel.tsx`
- [Featured articles](https://github.com/venucontentstack/compass-starter-app/blob/main/components/FeaturedArticles/FeaturedArticles.tsx): `components/FeaturedArticles/FeaturedArticles.tsx`
- [Article views](https://github.com/venucontentstack/compass-starter-app/blob/main/components/Article/ArticleCover.tsx): `components/Article/ArticleCover.tsx`

### Visitor experience

- [Personalization](https://github.com/venucontentstack/compass-starter-app/blob/main/context/PersonalizationProvider.tsx): `context/PersonalizationProvider.tsx`
- [Header navigation](https://github.com/venucontentstack/compass-starter-app/blob/main/components/Header/Header.tsx): `components/Header/Header.tsx`
- [Footer navigation](https://github.com/venucontentstack/compass-starter-app/blob/main/components/Footer/Footer.tsx): `components/Footer/Footer.tsx`
- [Language selector](https://github.com/venucontentstack/compass-starter-app/blob/main/components/LanguageSelector/LanguageSelector.tsx): `components/LanguageSelector/LanguageSelector.tsx`
- [Cookie consent](https://github.com/venucontentstack/compass-starter-app/blob/main/components/CookieConsentForm/Consentform.tsx): `components/CookieConsentForm/Consentform.tsx`
- [User form modal](https://github.com/venucontentstack/compass-starter-app/blob/main/components/UserFormModal/UserFormModal.tsx): `components/UserFormModal/UserFormModal.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home route: opens
- Visitor → General pages: opens
- Visitor → Article detail: opens
- Visitor → Article routes: opens
- Visitor → Article listing: opens
- Home route → Content queries: queries content
- General pages → Content queries: queries content
- Article detail → Content queries: queries content
- Article routes → Content queries: queries content
- Article listing → Content queries: queries content
- Content queries → Delivery SDK: uses delivery
- Content queries → Contentstack CMS: fetches entries
- Preview SDK → Delivery SDK: configures preview (evidence: `config/contentstack/previewSDk.ts`)
- Home route → Block renderer: renders blocks
- General pages → Block renderer: renders blocks
- Block renderer → Hero: dispatches (evidence: `components/RenderComponents/index.tsx`)
- Block renderer → Teaser: dispatches (evidence: `components/RenderComponents/index.tsx`)
- Block renderer → Content blocks: dispatches (evidence: `components/RenderComponents/index.tsx`)
- Block renderer → Text image carousel: dispatches (evidence: `components/RenderComponents/index.tsx`)
- Block renderer → Featured articles: renders (evidence: `components/RenderComponents/index.tsx`)
- Article detail → Article views: renders article
- Main layout → Header navigation: renders
- Main layout → Footer navigation: renders
- Header navigation → Language selector: renders (evidence: `components/Header/Header.tsx`)
- Visitor → Locale routing: requests locale
- Locale router hook → Visitor: provides navigation
- Main layout → Personalization: provides context
- Main layout → Cookie consent: shows consent
- Main layout → User form modal: shows form