# xbosanskyj1/angular-ai-in-depth architecture

> Architecture diagram of the GitHub repository xbosanskyj1/angular-ai-in-depth, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xbosanskyj1/angular-ai-in-depth
- Repository: https://github.com/xbosanskyj1/angular-ai-in-depth

## Overview

This is a full-stack Angular AI chat application with a small Express API. Users sign up or sign in, enter an authenticated chat, start or continue conversations, and revisit conversation history. The graph includes the documented OpenAI integration and the data layer; route-handler internals were not sampled, so uncertain calls from those handlers are omitted.

Main entry points: [`server/server.ts`](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/server.ts) (Express server), [`src/app/shared/auth/auth.service.ts`](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.service.ts) (Auth service), [`src/app/app.routes.ts`](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/app.routes.ts) (App routes), [`src/app/home/conversation.service.ts`](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/conversation.service.ts) (Conversation service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Angular application"]
  node_app["App shell<br/>[app.ts]"]
  node_routes["App routes<br/>[app.routes.ts]"]
  node_home["Home screen<br/>[home.ts]"]
  node_conversation["Conversation service"]
  node_thread["Conversation thread"]
  node_historyui["Chat history UI<br/>[chat-history.ts]"]
  node_historyservice["History service"]
  node_sidenav["Side navigation<br/>[side-nav.ts]"]
end

subgraph group_auth["Authentication"]
  node_signin["Sign-in screen<br/>[sign-in.ts]"]
  node_signup["Sign-up screen<br/>[sign-up.ts]"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
  node_guard["Auth guard<br/>[auth.guard.ts]"]
  node_interceptor["Auth interceptor"]
  node_profile["Profile service"]
end

subgraph group_backend["API and conversations"]
  node_server["Express server<br/>[server.ts]"]
  node_authroutes["Auth endpoints<br/>[sign-in.ts]"]
  node_signupendpoint["Sign-up endpoint<br/>[sign-up.ts]"]
  node_startendpoint["Start conversation"]
  node_continueendpoint["Continue conversation"]
  node_historyendpoint["History endpoints"]
  node_detailendpoint["Conversation detail"]
  node_middleware["Auth middleware<br/>[auth.middleware.ts]"]
  node_data[("Conversation data<br/>[db-data.ts]")]
  node_prompts["AI prompts<br/>[prompts.ts]"]
  node_aiclient["AI client<br/>[ai-client.ts]"]
end

subgraph group_support["Shared UI support"]
  node_messages["User messages"]
  node_loading["Loading state"]
end

node_user(("User"))
node_openai{{"OpenAI API"}}

node_user -->|"navigates"| node_routes
node_routes -->|"loads"| node_signin
node_routes -->|"loads"| node_signup
node_routes -->|"loads guarded"| node_home
node_signin -->|"submits credentials"| node_authservice
node_signup -->|"submits credentials"| node_authservice
node_authservice -->|"POST sign-in"| node_authroutes
node_authservice -->|"POST sign-up"| node_signupendpoint
node_authservice -->|"reloads profile"| node_profile
node_guard -->|"checks profile"| node_profile
node_home -->|"starts or continues"| node_conversation
node_thread -->|"sends message"| node_conversation
node_home -->|"loads history"| node_historyservice
node_historyui -->|"requests conversations"| node_historyservice
node_sidenav -->|"opens history"| node_historyui
node_historyservice -->|"GET history"| node_historyendpoint
node_historyservice -->|"GET conversation"| node_detailendpoint
node_conversation -->|"POST start"| node_startendpoint
node_conversation -->|"POST continue"| node_continueendpoint
node_server -->|"dispatches"| node_authroutes
node_server -->|"dispatches"| node_signupendpoint
node_server -->|"protects chat routes"| node_middleware
node_server -->|"dispatches"| node_startendpoint
node_server -->|"dispatches"| node_continueendpoint
node_server -->|"dispatches"| node_historyendpoint
node_server -->|"dispatches"| node_detailendpoint
node_interceptor -->|"adds auth header"| node_server
node_app -->|"renders notifications"| node_messages
node_app -->|"renders loading"| node_loading
node_aiclient -.->|"sends chat request"| node_openai

click node_app "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/app.ts"
click node_routes "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/app.routes.ts"
click node_signin "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/auth/sign-in/sign-in.ts"
click node_signup "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/auth/sign-up/sign-up.ts"
click node_authservice "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.service.ts"
click node_guard "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.guard.ts"
click node_interceptor "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.interceptor.ts"
click node_profile "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/user-profile.service.ts"
click node_home "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/home.ts"
click node_conversation "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/conversation.service.ts"
click node_thread "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/conversation-thread/conversation-thread.ts"
click node_historyui "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/chat-history/chat-history.ts"
click node_historyservice "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/chat-history.service.ts"
click node_sidenav "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/side-nav/side-nav.ts"
click node_server "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/server.ts"
click node_authroutes "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/sign-in.ts"
click node_signupendpoint "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/sign-up.ts"
click node_startendpoint "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/start-conversation.ts"
click node_continueendpoint "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/continue-conversation.ts"
click node_historyendpoint "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/get-conversations-history.ts"
click node_detailendpoint "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/get-chat-conversation.ts"
click node_middleware "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/middleware/auth.middleware.ts"
click node_data "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/db-data.ts"
click node_prompts "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/prompts.ts"
click node_aiclient "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/ai-client.ts"
click node_messages "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/user-messages/user-messages.service.ts"
click node_loading "https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/loading-indicator/global-loading.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_app,node_routes,node_home,node_conversation,node_thread,node_historyui,node_historyservice,node_sidenav,node_user toneBlue
class node_signin,node_signup,node_authservice,node_guard,node_interceptor,node_profile toneAmber
class node_server,node_authroutes,node_signupendpoint,node_startendpoint,node_continueendpoint,node_historyendpoint,node_detailendpoint,node_middleware,node_data,node_prompts,node_aiclient,node_openai toneMint
class node_messages,node_loading toneRose
```

## Components

### Angular application

- [App shell](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/app.ts): `src/app/app.ts`
- [App routes](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Home screen](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/home.ts): `src/app/home/home.ts`
- [Conversation service](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/conversation.service.ts): `src/app/home/conversation.service.ts`
- [Conversation thread](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/conversation-thread/conversation-thread.ts): `src/app/home/conversation-thread/conversation-thread.ts`
- [Chat history UI](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/chat-history/chat-history.ts): `src/app/home/chat-history/chat-history.ts`
- [History service](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/chat-history.service.ts): `src/app/home/chat-history.service.ts`
- [Side navigation](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/home/side-nav/side-nav.ts): `src/app/home/side-nav/side-nav.ts`

### Authentication

- [Sign-in screen](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/auth/sign-in/sign-in.ts): `src/app/auth/sign-in/sign-in.ts`
- [Sign-up screen](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/auth/sign-up/sign-up.ts): `src/app/auth/sign-up/sign-up.ts`
- [Auth service](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.service.ts): `src/app/shared/auth/auth.service.ts`
- [Auth guard](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.guard.ts): `src/app/shared/auth/auth.guard.ts`
- [Auth interceptor](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/auth.interceptor.ts): `src/app/shared/auth/auth.interceptor.ts`
- [Profile service](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/auth/user-profile.service.ts): `src/app/shared/auth/user-profile.service.ts`

### API and conversations

- [Express server](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/server.ts): `server/server.ts`
- [Auth endpoints](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/sign-in.ts): `server/routes/sign-in.ts`
- [Sign-up endpoint](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/sign-up.ts): `server/routes/sign-up.ts`
- [Start conversation](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/start-conversation.ts): `server/routes/start-conversation.ts`
- [Continue conversation](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/continue-conversation.ts): `server/routes/continue-conversation.ts`
- [History endpoints](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/get-conversations-history.ts): `server/routes/get-conversations-history.ts`
- [Conversation detail](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/routes/get-chat-conversation.ts): `server/routes/get-chat-conversation.ts`
- [Auth middleware](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/middleware/auth.middleware.ts): `server/middleware/auth.middleware.ts`
- [Conversation data](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/db-data.ts): `server/db-data.ts`
- [AI prompts](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/prompts.ts): `server/prompts.ts`
- [AI client](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/server/ai-client.ts): `server/ai-client.ts`

### Shared UI support

- [User messages](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/user-messages/user-messages.service.ts): `src/app/shared/user-messages/user-messages.service.ts`
- [Loading state](https://github.com/xbosanskyj1/angular-ai-in-depth/blob/main/src/app/shared/loading-indicator/global-loading.service.ts): `src/app/shared/loading-indicator/global-loading.service.ts`

### Other components

- **User**
- **OpenAI API**

## Connections

- User → App routes: navigates
- App routes → Sign-in screen: loads
- App routes → Sign-up screen: loads
- App routes → Home screen: loads guarded
- Sign-in screen → Auth service: submits credentials
- Sign-up screen → Auth service: submits credentials
- Auth service → Auth endpoints: POST sign-in
- Auth service → Sign-up endpoint: POST sign-up
- Auth service → Profile service: reloads profile
- Auth guard → Profile service: checks profile
- Home screen → Conversation service: starts or continues
- Conversation thread → Conversation service: sends message
- Home screen → History service: loads history
- Chat history UI → History service: requests conversations
- Side navigation → Chat history UI: opens history
- History service → History endpoints: GET history
- History service → Conversation detail: GET conversation
- Conversation service → Start conversation: POST start
- Conversation service → Continue conversation: POST continue
- Express server → Auth endpoints: dispatches
- Express server → Sign-up endpoint: dispatches
- Express server → Auth middleware: protects chat routes
- Express server → Start conversation: dispatches
- Express server → Continue conversation: dispatches
- Express server → History endpoints: dispatches
- Express server → Conversation detail: dispatches
- Auth interceptor → Express server: adds auth header
- App shell → User messages: renders notifications
- App shell → Loading state: renders loading
- AI client → OpenAI API: sends chat request