# pragadeesvp/sterna_assesment architecture

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

- Interactive diagram: https://gitdiagram.com/pragadeesvp/sterna_assesment
- Repository: https://github.com/pragadeesvp/sterna_assesment

## Overview

#### Purpose and Runtime
This is an Angular 21 single-page desktop-oriented preview application for a login-gated dashboard. It is built and served through Angular CLI, with the browser as its runtime; the README identifies a Netlify-hosted demo but no backend API or external data service.

Entry bootstrap:
- `src/main.ts`
- `src/app/app.module.ts`
- `src/app/app.component.ts`

#### Application Shell and Composition
`AppModule` assembles the application’s components, routing, Angular Material theme, and shared Angular dependencies. The root component provides the top-level router outlet and global styling boundary.

Key shell paths:
- `src/app/app.component.ts`
- `src/app/app.component.html`
- `src/material-theme.scss`

Global document and application styles originate in:
- `src/index.html`
- `src/styles.css`

#### Route-Controlled Screens
Routing separates the public login screen from protected application views. The major route-level destinations are login, dashboard, and location; the layout component likely acts as the authenticated page frame around protected content.

Route and screen paths:
- `src/app/app-routing.module.ts`
- `src/app/login/login.component.ts`
- `src/app/dashboard/dashboard.component.ts`
- `src/app/location/location.component.ts`

#### Authentication Boundary
Authentication is client-side and intentionally lightweight: the README supplies accepted email identities and states that any six-letter password is valid. The route guard is the enforcement boundary preventing unauthenticated navigation to protected routes.

Authentication paths:
- `src/app/login/login.component.ts`
- `src/app/guards/auth.guard.ts`
- `src/app/app-routing.module.ts`

Primary control flow: user submits login credentials → login component establishes client-side authenticated state → router navigates toward protected content → guard permits or redirects navigation based on that state.

#### Authenticated Layout and Navigation
The layout component owns persistent authenticated UI structure, such as navigation and content placement, while routed feature components render inside that frame. This isolates chrome/navigation concerns from dashboard and location-specific presentation.

Layout paths:
- `src/app/layout/layout.component.ts`
- `src/app/layout/layout.component.html`
- `src/app/app-routing.module.ts`

#### Data Provisioning
A centralized Angular service is the application’s data-access boundary. Given the absence of server configuration or documented API dependencies, it likely provides in-memory/static data consumed by dashboard and location views rather than performing remote persistence.

Data boundary paths:
- `src/app/services/data.service.ts`
- `src/app/dashboard/dashboard.component.ts`
- `src/app/location/location.component.ts`

Primary data flow: feature component requests view data from `DataService` → component transforms/binds it into its template → Angular change detection renders the dashboard or location view.

#### Infrastructure and Delivery
The project uses Angular CLI configuration for local serve and production builds, npm for dependency management, and appears deployable as static frontend assets; the demo is hosted on Netlify. Angular Material theming is configured locally rather than via an external design-system service.

Infrastructure paths:
- `angular.json`
- `package.json`
- `src/material-theme.scss`

Main entry points: [`src/app/app-routing.module.ts`](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app-routing.module.ts) (Application routes), [`src/app/app.module.ts`](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app.module.ts) (App module), [`src/app/layout/layout.component.ts`](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/layout/layout.component.ts) (Authenticated layout), [`src/main.ts`](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/main.ts) (Application bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Application"]
  node_document_styles["Document &amp; global styles<br/>HTML/CSS entry<br/>[index.html]"]
  node_bootstrap["Application bootstrap<br/>Angular entrypoint<br/>[main.ts]"]
  node_app_module["App module<br/>Angular composition root<br/>[app.module.ts]"]
  node_app_shell["Root app shell<br/>root component<br/>[app.component.ts]"]
  node_routing["Application routes<br/>Angular router"]
end

subgraph group_auth["Authentication"]
  node_login["Login screen<br/>public route component<br/>[login.component.ts]"]
  node_auth_guard{{"Auth guard<br/>route guard<br/>[auth.guard.ts]"}}
end

subgraph group_features["Authenticated Features"]
  node_layout["Authenticated layout<br/>route frame component"]
  node_dashboard["Dashboard<br/>feature route component"]
  node_location["Location<br/>feature route component"]
  node_data_service[("Data service<br/>client data boundary<br/>[data.service.ts]")]
end

subgraph group_delivery["Build &amp; Styling"]
  node_angular_cli{{"Angular CLI<br/>build tooling<br/>[angular.json]"}}
  node_npm["npm dependencies<br/>package manifest<br/>[package.json]"]
  node_material_theme["Material theme<br/>SCSS theme"]
end

node_npm -->|"provides tooling"| node_angular_cli
node_angular_cli -->|"builds and serves"| node_bootstrap
node_document_styles -->|"hosts app"| node_bootstrap
node_material_theme -->|"styles Material UI"| node_app_module
node_bootstrap -->|"boots"| node_app_module
node_app_module -->|"declares"| node_app_shell
node_app_module -->|"configures"| node_routing
node_app_shell -->|"renders outlet"| node_routing
node_routing -->|"public route"| node_login
node_login -->|"navigates after login"| node_routing
node_routing -->|"checks protected routes"| node_auth_guard
node_auth_guard -->|"permits or redirects"| node_layout
node_routing -->|"protected frame"| node_layout
node_layout -->|"hosts routed view"| node_dashboard
node_layout -->|"hosts routed view"| node_location
node_data_service -->|"supplies view data"| node_dashboard
node_data_service -->|"supplies view data"| node_location

click node_angular_cli "https://github.com/pragadeesvp/sterna_assesment/blob/main/angular.json"
click node_npm "https://github.com/pragadeesvp/sterna_assesment/blob/main/package.json"
click node_document_styles "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/index.html"
click node_material_theme "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/material-theme.scss"
click node_bootstrap "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/main.ts"
click node_app_module "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app.module.ts"
click node_app_shell "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app.component.ts"
click node_routing "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app-routing.module.ts"
click node_login "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/login/login.component.ts"
click node_auth_guard "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/guards/auth.guard.ts"
click node_layout "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/layout/layout.component.ts"
click node_dashboard "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/dashboard/dashboard.component.ts"
click node_location "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/location/location.component.ts"
click node_data_service "https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/services/data.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_document_styles,node_bootstrap,node_app_module,node_app_shell,node_routing toneBlue
class node_login,node_auth_guard toneAmber
class node_layout,node_dashboard,node_location,node_data_service toneMint
class node_angular_cli,node_npm,node_material_theme toneRose
```

## Components

### Browser Application

- [Document & global styles](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/index.html): HTML/CSS entry · `src/index.html`
- [Application bootstrap](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/main.ts): Angular entrypoint · `src/main.ts`
- [App module](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app.module.ts): Angular composition root · Assembles routing, components, Material, and shared dependencies. · `src/app/app.module.ts`
- [Root app shell](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app.component.ts): root component · Provides the top-level router outlet and styling boundary. · `src/app/app.component.ts`
- [Application routes](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/app-routing.module.ts): Angular router · Separates public login from protected views. · `src/app/app-routing.module.ts`

### Authentication

- [Login screen](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/login/login.component.ts): public route component · Establishes lightweight client-side authentication state. · `src/app/login/login.component.ts`
- [Auth guard](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/guards/auth.guard.ts): route guard · Permits or redirects protected navigation. · `src/app/guards/auth.guard.ts`

### Authenticated Features

- [Authenticated layout](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/layout/layout.component.ts): route frame component · Owns persistent navigation and routed content placement. · `src/app/layout/layout.component.ts`
- [Dashboard](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/dashboard/dashboard.component.ts): feature route component · `src/app/dashboard/dashboard.component.ts`
- [Location](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/location/location.component.ts): feature route component · `src/app/location/location.component.ts`
- [Data service](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/app/services/data.service.ts): client data boundary · Provides static or in-memory view data without a backend API. · `src/app/services/data.service.ts`

### Build & Styling

- [Angular CLI](https://github.com/pragadeesvp/sterna_assesment/blob/main/angular.json): build tooling · Builds and serves the SPA as static assets. · `angular.json`
- [npm dependencies](https://github.com/pragadeesvp/sterna_assesment/blob/main/package.json): package manifest · `package.json`
- [Material theme](https://github.com/pragadeesvp/sterna_assesment/blob/main/src/material-theme.scss): SCSS theme · `src/material-theme.scss`

## Connections

- npm dependencies → Angular CLI: provides tooling
- Angular CLI → Application bootstrap: builds and serves
- Document & global styles → Application bootstrap: hosts app
- Material theme → App module: styles Material UI
- Application bootstrap → App module: boots
- App module → Root app shell: declares
- App module → Application routes: configures
- Root app shell → Application routes: renders outlet
- Application routes → Login screen: public route
- Login screen → Application routes: navigates after login
- Application routes → Auth guard: checks protected routes
- Auth guard → Authenticated layout: permits or redirects
- Application routes → Authenticated layout: protected frame
- Authenticated layout → Dashboard: hosts routed view
- Authenticated layout → Location: hosts routed view
- Data service → Dashboard: supplies view data
- Data service → Location: supplies view data