High-Level Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Sunrise Communication utilizes a modern web architecture optimized for Search Engine Optimization (SEO), Search Experience Optimization (SXO), and Agentic Discovery (AAO/B2A). The system transitions from a static lead-generation site to a dynamic, signal-based Angular application integrated with a structured machine-readable discovery layer.
Sources: task.md:1-10, implementation_plan.md:9-15
Frontend Architecture
The frontend is built on Angular v22 using a standalone component architecture. It employs Angular Signals for reactive state management and follows a strict Service-oriented pattern using the @Service decorator for singletons.
Core Technologies
- Framework: Angular v22 with Standalone Components.
- State Management: Angular Signals (
signal,computed,linkedSignal). - Rendering: Server-Side Rendering (SSR) via
@angular/ssrfor optimized SEO and pre-rendering. - Communication:
HttpClientwithwithFetch()for data retrieval from JSON assets and future Django REST API integration.
Sources: implementation_plan.md:16-30, best-practices.md:6-15, best-practices.md:38-42
Component Hierarchy and Data Flow
The application organizes components into logical layers: Core (services/models), Shared (reusable UI), and Pages (feature modules).
The diagram shows the interaction between UI components, signal-based services, and the data layer, including the external discovery layer for AI agents.
Sources: implementation_plan.md:118-135, task.md:12-16
Discovery & Discovery Optimization Layer
The project implements a comprehensive Discovery Layer designed for both human users and AI agents (LLMs). This layer ensures technical specifications are machine-readable and semantically linked.
Agentic Discovery (AAO / B2A)
The application exposes structured files to allow AI user-agents (e.g., GPTBot, ClaudeBot) to crawl and understand service capabilities.
public/llms.txt: Summary of site capabilities.public/llms-full.txt: In-depth technical specifications and SLAs.public/llms.json: Structured OpenAPI manifest for machine interaction.
Sources: task.md:13-20, sunrise-angular/public/llms-full.txt
Semantic Entity Architecture (AIO / KGO)
SeoService generates a unified JSON-LD @graph to define relationships between entities. It injects specific schemas for services, products, and local business information.
| Schema Node | Purpose | File Source |
|---|---|---|
LocalBusiness | Defines company identity, coordinates, and contact details. | seo.service.ts |
Service | Details technical offerings and areas served. | seo.service.ts |
Product | Represents specific hardware (CCTV, EPABX) with brand links. | seo.service.ts |
FAQPage | Optimizes for Answer Engine Optimization (AEO) and zero-click searches. | seo.service.ts |
HowTo | Details the 4-step installation lifecycle for technical services. | seo.service.ts |
Sources: task.md:22-29, sunrise-angular/src/app/core/services/seo.service.ts:50-150
Interactive Conversion Systems (SXO)
The architecture includes interactive tools to drive user engagement and lead generation.
Requirement Estimator Logic
The RequirementEstimatorComponent uses reactive signals to calculate hardware blueprints based on user input.
The flow shows how user-provided parameters reactively generate a Bill of Quantities (BOQ) and technical architecture.
Sources: sunrise-angular/src/app/shared/components/requirement-estimator/requirement-estimator.component.ts:32-105
Data Persistence and Lead Generation
- URL Query Params: Catalog filters are persisted in the URL for shareability.
- WhatsApp Integration: All conversion CTAs generate dynamic
wa.melinks pre-filled with technical specifications derived from the internal state.
Sources: implementation_plan.md:43-45, implementation_plan.md:235-245
Service and Data Architecture
The application transitions from local JSON data to a swappable backend architecture.
Product Data Model
The Product interface supports granular technical specifications and brand relationships, mirroring future API responses.
export interface Product {
id: string;
slug: string;
name: string;
brand: string;
category: string;
specs: ProductSpec[];
services_offered: ServiceType[];
}
Sources: implementation_plan.md:78-100
Product Service Architecture
ProductService manages state through private writable signals and exposes them as readonly computed signals to the UI.
The sequence illustrates the signal-based loading pattern used to fetch and distribute data.
Sources: implementation_plan.md:118-135
Conclusion
The Sunrise Communication architecture prioritizes technical visibility through a dual-purpose structure: a reactive, SSR-enabled frontend for human interaction and a machine-readable discovery layer for AI-driven search environments. By leveraging Angular Signals and unified JSON-LD graphs, the system ensures data consistency across the UI, SEO meta-tags, and agentic manifests.
Sources: task.md:47-52, implementation_plan.md:320-330