# frereriku/my-goals-app architecture

> Architecture diagram of the GitHub repository frereriku/my-goals-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/frereriku/my-goals-app
- Repository: https://github.com/frereriku/my-goals-app

## Overview

1. **Project type and runtime**
   - This is an **Angular 21** application built as a **single-page UI with server-side rendering support**.
   - The repo includes both browser and server entry points (`src/main.ts`, `src/main.server.ts`, `src/server.ts`) plus separate app configs/routes for client and server.

2. **Top-level app structure**
   - The application is organized around a small set of feature components under `src/app/components/`.
   - The main user-facing flow appears to be a goals tracker: users register, then view/manage goals, with a progress modal/dialog for status updates.

3. **Core UI shell**
   - `app.ts`, `app.html`, `app.scss`, and `app.routes.ts` define the root application shell and route composition.
   - `main.component` is likely the central landing/dashboard component that orchestrates the feature views.

4. **Feature boundaries**
   - `register.component` handles account creation or first-time onboarding.
   - `view.component` is the primary authenticated goals display screen.
   - `progress-dialog.component` is a focused UI overlay for showing or editing goal progress without leaving the main view.
   - This suggests a clear split between **shell/navigation** and **task-specific feature panels**.

5. **Data and persistence layer**
   - The `src/app/services/` directory contains the application’s non-UI logic.
   - `database.ts` is the persistence adapter, and based on the README it likely talks to **Supabase** for cloud storage/sync.
   - `auth.service.ts` handles identity/session state and likely gates access to the goal data.

6. **Service-driven architecture**
   - UI components should depend on services rather than directly on remote APIs.
   - That creates a boundary where:
     - components manage presentation and interaction,
     - services manage auth state, data fetch/update, and persistence concerns.

7. **Client/server rendering split**
   - `app.config.ts` and `app.routes.ts` define the browser-side app composition.
   - `app.config.server.ts` and `app.routes.server.ts` define the server-side counterparts used during SSR.
   - `server.ts` is the Node server entry used to render the app on the server before hydration in the browser.

8. **Environment and configuration**
   - `src/environment/environment.ts` centralizes environment-specific settings, likely including Supabase endpoints/keys and build-time flags.
   - This keeps deployment-specific values out of the feature code and allows different behavior for local dev versus production.

9. **Deployment and infrastructure**
   - The README says deployment is via **Vercel**, so the architecture likely relies on Vercel’s build/deploy pipeline for the Angular app and SSR output.
   - The repo also includes Docker and devcontainer files, indicating a reproducible containerized development environment rather than a custom backend runtime.

10. **Local development model**
   - Development is container-first: `.devcontainer/` and `docker-compose.yaml` support opening the repo in VS Code and running `npm install` / `npm start`.
   - The Angular dev server is the main local entrypoint; it serves the client app and refreshes on source changes.

11. **Static assets and styling**
   - `public/` holds static assets, while `src/styles.scss` and per-component SCSS files provide global and scoped styling.
   - Styling is component-oriented, which supports modular UI composition across the feature components.

12. **Testing boundaries**
   - Each major component and service has co-located spec files (`*.spec.ts`), showing that the repo is structured for unit-level verification around UI and service logic.
   - The test surface aligns with the architecture: components for interaction, services for business/data behavior.

13. **Likely end-to-end data flow**
   - A user loads the app → SSR/client bootstraps the Angular shell → auth state is resolved through `auth.service` → goal data is read/written through `database.ts` → the main/view components render the current goal list/state → the progress dialog updates an item and persists it back to Supabase.

14. **Key architectural boundaries to draw**
   - **Presentation layer:** Angular components under `src/app/components/`
   - **Application shell/routing:** root app files and route configs
   - **Domain/data services:** `auth.service.ts`, `database.ts`
   - **External backend:** Supabase
   - **Deployment/runtime:** Vercel + Angular SSR/server entry points

Main entry points: [`src/app/app.ts`](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.ts) (App shell), [`src/app/components/main/main.component.ts`](https://github.com/frereriku/my-goals-app/blob/main/src/app/components/main/main.component.ts) (Main view), [`src/app/services/auth.service.ts`](https://github.com/frereriku/my-goals-app/blob/main/src/app/services/auth.service.ts) (Auth service), [`src/app/services/database.ts`](https://github.com/frereriku/my-goals-app/blob/main/src/app/services/database.ts) (Database)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Presentation"]
  node_main_view["Main view<br/>Goals dashboard<br/>[main.component.ts]"]
  node_register_view["Register<br/>Onboarding"]
  node_goals_view["Goals view<br/>Goals list<br/>[view.component.ts]"]
  node_progress_dialog["Progress dialog<br/>Overlay"]
end

subgraph group_shell["App Shell"]
  node_app_shell["App shell<br/>Angular root<br/>[app.ts]"]
  node_app_config["Client config<br/>Angular config<br/>[app.config.ts]"]
  node_app_routes["Client routes<br/>Routing<br/>[app.routes.ts]"]
end

subgraph group_services["Services"]
  node_auth_service["Auth service<br/>Session state<br/>[auth.service.ts]"]
  node_database_service["Database<br/>Persistence<br/>[database.ts]"]
  node_environment["Environment<br/>Config<br/>[environment.ts]"]
end

subgraph group_runtime["Runtime"]
  node_app_config_server["Server config<br/>SSR config"]
  node_app_routes_server["Server routes<br/>SSR routing"]
  node_browser_entry["Browser entry<br/>Bootstrap<br/>[main.ts]"]
  node_server_entry["Server entry<br/>SSR entry<br/>[main.server.ts]"]
  node_node_server["Node server<br/>SSR host<br/>[server.ts]"]
  node_supabase[("Supabase<br/>External backend")]
  node_vercel["Vercel<br/>Deployment"]
end

node_browser_entry -->|"bootstraps"| node_app_shell
node_server_entry -->|"starts"| node_node_server
node_node_server -->|"renders"| node_app_shell
node_app_shell -->|"uses"| node_app_config
node_app_shell -->|"uses"| node_app_routes
node_app_shell -->|"uses"| node_app_config_server
node_app_shell -->|"uses"| node_app_routes_server
node_app_shell -->|"hosts"| node_main_view
node_main_view -->|"navigates"| node_register_view
node_main_view -->|"navigates"| node_goals_view
node_goals_view -->|"opens"| node_progress_dialog
node_register_view -->|"authenticates"| node_auth_service
node_main_view -->|"reads auth"| node_auth_service
node_goals_view -->|"loads/saves"| node_database_service
node_progress_dialog -->|"updates"| node_database_service
node_auth_service -->|"configures"| node_environment
node_database_service -->|"configures"| node_environment
node_auth_service -->|"connects"| node_supabase
node_database_service -->|"syncs"| node_supabase
node_node_server -->|"deployed on"| node_vercel

click node_app_shell "https://github.com/frereriku/my-goals-app/blob/main/src/app/app.ts"
click node_app_config "https://github.com/frereriku/my-goals-app/blob/main/src/app/app.config.ts"
click node_app_routes "https://github.com/frereriku/my-goals-app/blob/main/src/app/app.routes.ts"
click node_app_config_server "https://github.com/frereriku/my-goals-app/blob/main/src/app/app.config.server.ts"
click node_app_routes_server "https://github.com/frereriku/my-goals-app/blob/main/src/app/app.routes.server.ts"
click node_browser_entry "https://github.com/frereriku/my-goals-app/blob/main/src/main.ts"
click node_server_entry "https://github.com/frereriku/my-goals-app/blob/main/src/main.server.ts"
click node_node_server "https://github.com/frereriku/my-goals-app/blob/main/src/server.ts"
click node_main_view "https://github.com/frereriku/my-goals-app/blob/main/src/app/components/main/main.component.ts"
click node_register_view "https://github.com/frereriku/my-goals-app/blob/main/src/app/components/register/register.component.ts"
click node_goals_view "https://github.com/frereriku/my-goals-app/blob/main/src/app/components/view/view.component.ts"
click node_progress_dialog "https://github.com/frereriku/my-goals-app/blob/main/src/app/components/progress-dialog.component/progress-dialog.component.ts"
click node_auth_service "https://github.com/frereriku/my-goals-app/blob/main/src/app/services/auth.service.ts"
click node_database_service "https://github.com/frereriku/my-goals-app/blob/main/src/app/services/database.ts"
click node_environment "https://github.com/frereriku/my-goals-app/blob/main/src/environment/environment.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_main_view,node_register_view,node_goals_view,node_progress_dialog toneBlue
class node_app_shell,node_app_config,node_app_routes toneAmber
class node_auth_service,node_database_service,node_environment toneMint
class node_app_config_server,node_app_routes_server,node_browser_entry,node_server_entry,node_node_server,node_supabase,node_vercel toneRose
```

## Components

### Presentation

User-facing Angular components for onboarding and goal management.

- [Main view](https://github.com/frereriku/my-goals-app/blob/main/src/app/components/main/main.component.ts): Goals dashboard · Primary authenticated screen for viewing and managing goals. · `src/app/components/main/main.component.ts`
- [Register](https://github.com/frereriku/my-goals-app/blob/main/src/app/components/register/register.component.ts): Onboarding · Account creation or first-time user onboarding view. · `src/app/components/register/register.component.ts`
- [Goals view](https://github.com/frereriku/my-goals-app/blob/main/src/app/components/view/view.component.ts): Goals list · Screen that displays and manages the user’s goals. · `src/app/components/view/view.component.ts`
- [Progress dialog](https://github.com/frereriku/my-goals-app/blob/main/src/app/components/progress-dialog.component/progress-dialog.component.ts): Overlay · Modal dialog for editing or reviewing goal progress. · `src/app/components/progress-dialog.component/progress-dialog.component.ts`

### App Shell

Root Angular composition, routing, and platform entry points.

- [App shell](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.ts): Angular root · Root application component and composition shell. · `src/app/app.ts`
- [Client config](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.config.ts): Angular config · Browser-side app configuration. · `src/app/app.config.ts`
- [Client routes](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.routes.ts): Routing · Browser route composition for the app. · `src/app/app.routes.ts`

### Services

Stateful auth and persistence logic used by the UI.

- [Auth service](https://github.com/frereriku/my-goals-app/blob/main/src/app/services/auth.service.ts): Session state · Handles identity and access state for the app. · `src/app/services/auth.service.ts`
- [Database](https://github.com/frereriku/my-goals-app/blob/main/src/app/services/database.ts): Persistence · Persistence adapter for goal data and sync operations. · `src/app/services/database.ts`
- [Environment](https://github.com/frereriku/my-goals-app/blob/main/src/environment/environment.ts): Config · Build-time environment settings and external endpoint configuration. · `src/environment/environment.ts`

### Runtime

SSR and deployment/runtime boundaries.

- [Server config](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.config.server.ts): SSR config · Server-side app configuration for SSR. · `src/app/app.config.server.ts`
- [Server routes](https://github.com/frereriku/my-goals-app/blob/main/src/app/app.routes.server.ts): SSR routing · Server-side route definitions used during rendering. · `src/app/app.routes.server.ts`
- [Browser entry](https://github.com/frereriku/my-goals-app/blob/main/src/main.ts): Bootstrap · Client bootstrap entry point. · `src/main.ts`
- [Server entry](https://github.com/frereriku/my-goals-app/blob/main/src/main.server.ts): SSR entry · Server bootstrap entry point for pre-rendering. · `src/main.server.ts`
- [Node server](https://github.com/frereriku/my-goals-app/blob/main/src/server.ts): SSR host · Node runtime server used to render the Angular app. · `src/server.ts`
- **Supabase**: External backend · Cloud backend for authentication and data persistence.
- **Vercel**: Deployment · Hosting and SSR deployment platform.

## Connections

- Browser entry → App shell: bootstraps · Client bootstrap starts the Angular app.
- Server entry → Node server: starts · SSR entry starts the Node rendering host.
- Node server → App shell: renders · Server renders the Angular shell before hydration.
- App shell → Client config: uses · Root shell uses browser configuration.
- App shell → Client routes: uses · Root shell composes browser routes.
- App shell → Server config: uses · SSR shell uses server configuration.
- App shell → Server routes: uses · SSR shell uses server route definitions.
- App shell → Main view: hosts · Root shell mounts the main dashboard flow.
- Main view → Register: navigates · Onboarding path leads into registration.
- Main view → Goals view: navigates · Main dashboard routes to the goals screen.
- Goals view → Progress dialog: opens · Goals screen opens the progress modal.
- Register → Auth service: authenticates · Registration flow writes session state through auth service.
- Main view → Auth service: reads auth · Main flow depends on resolved session state.
- Goals view → Database: loads/saves · Goals screen reads and updates goal data.
- Progress dialog → Database: updates · Progress changes persist through the data layer.
- Auth service → Environment: configures · Auth behavior is driven by environment settings.
- Database → Environment: configures · Persistence adapter uses environment-specific settings.
- Auth service → Supabase: connects · Identity/session state is backed by Supabase.
- Database → Supabase: syncs · Goal data is stored and synchronized via Supabase.
- Node server → Vercel: deployed on · SSR server is hosted through Vercel deployment.