# vvl1m/simple architecture

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

- Interactive diagram: https://gitdiagram.com/vvl1m/simple
- Repository: https://github.com/vvl1m/simple

## Overview

#### Purpose and Runtime
Simple is an archived Nuxt 3 full-stack messenger. It provides authenticated real-time text chat, public/private channels, presence, user profiles, and photo sharing. Supabase supplies Auth, database access, Realtime/Presence, and Storage; Nuxt runs the application and any server-side layer. Primary setup is in `nuxt.config.ts`, with Supabase credentials expected through environment variables.

#### Application Entry and Shell
Nuxt mounts the application through `app.vue`; route-level failures are handled by `error.vue`. Global visual styling is centralized in `assets/scss/main.scss`. The main user-facing routes are:
- `pages/index.vue` — primary messenger surface.
- `pages/login.vue` — authentication entry.
- `pages/reset-password.vue` — password recovery flow.

#### Supabase Integration Boundary
`plugins/aneks.js` is the central client-side integration point implied by the plugin layout, likely exposing shared application/backend functionality to pages and components. Supabase is the authoritative external boundary for identity, persisted chat/channel/user data, real-time subscriptions and presence, and uploaded media. The frontend should not treat local UI state as authoritative after remote updates.

#### Authentication and User Identity
Authentication UI is represented by `components/Auth.vue`, with `components/AuthOld.vue` retained as an older implementation. User display and profile management are separated into:
- `components/UserCard.vue` — user identity presentation.
- `components/modals/User.vue` — user details.
- `components/modals/UserEdit.vue` — profile editing.

The login/reset routes initiate identity flows; authenticated user state then drives access to channels, messaging, presence, and profile-specific UI.

#### Messaging and Channel Workspace
The primary workspace is assembled from navigation and interaction components:
- `components/SideMenu.vue` — likely channel/workspace navigation.
- `components/Menu.vue` — main menu controls.
- `components/ContextMenu.vue` — item/channel/message actions.
- `components/modals/CreateChannel.vue` — channel creation.
- `components/modals/ViewChannel.vue` — channel inspection or membership/settings.

The expected control flow is route shell → authenticated workspace → selected channel → Supabase-backed message and presence streams. Channel visibility and membership rules are ultimately enforced by Supabase-side data/security configuration, not visible in this tree.

#### Media and UI Interaction Boundaries
Media attachment is handled through modal UI and Supabase Storage:
- `components/modals/Attachs.vue` — attachment selection/handling.
- `components/modals/Picture.vue` — image display or image-specific interaction.
- `pages/dev/image-attach.vue` and `pages/dev/imageCrop.vue` — isolated development surfaces for image workflows.

Uploads cross from browser UI to Supabase Storage; resulting file references are expected to be associated with chat data in Supabase.

#### Shared Feedback and Server Surface
Reusable transient UI is split into:
- `components/Dialog.vue` — confirmation/error dialogs.
- `components/Loading.vue` — asynchronous-state feedback.
- `composables/useNotifications.js` — shared notification state/dispatch.

`server/tsconfig.json` indicates Nuxt server code is TypeScript-configured, although no server handlers are present in the supplied tree. The production runtime is Nuxt’s generated `.output` deployment, with Supabase remaining the required managed backend dependency.

Main entry points: [`pages/index.vue`](https://github.com/vvl1m/simple/blob/main/pages/index.vue) (Messenger route), [`app.vue`](https://github.com/vvl1m/simple/blob/main/app.vue) (Application shell), [`plugins/aneks.js`](https://github.com/vvl1m/simple/blob/main/plugins/aneks.js) (Shared backend client), [`pages/login.vue`](https://github.com/vvl1m/simple/blob/main/pages/login.vue) (Login and recovery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_nuxt["Nuxt application"]
  node_config["Nuxt configuration<br/>[nuxt.config.ts]"]
  node_app["Application shell<br/>Nuxt root<br/>[app.vue]"]
  node_errors["Route error UI<br/>Nuxt error page<br/>[error.vue]"]
  node_styles["Global styles<br/>SCSS<br/>[main.scss]"]
  node_login["Login and recovery<br/>Nuxt pages<br/>[login.vue]"]
  node_supabase_plugin{{"Shared backend client<br/>Nuxt plugin<br/>[aneks.js]"}}
  node_auth_ui["Authentication UI<br/>[Auth.vue]"]
  node_nuxt_server{{"Nuxt server runtime<br/>server layer<br/>[tsconfig.json]"}}
end

subgraph group_workspace["Messenger workspace"]
  node_messenger["Messenger route<br/>Nuxt page<br/>[index.vue]"]
  node_workspace_ui["Channel navigation<br/>components<br/>[SideMenu.vue]"]
  node_channel_modals["Channel management<br/>modals<br/>[CreateChannel.vue]"]
  node_profile_ui["Profile UI<br/>components and modals<br/>[UserCard.vue]"]
end

subgraph group_media["Media and feedback"]
  node_attachments["Attachment UI<br/>media modals<br/>[Attachs.vue]"]
  node_notifications["Notification state<br/>composable"]
end

subgraph group_supabase["Supabase managed backend"]
  node_supabase_auth{{"Identity<br/>Supabase Auth"}}
  node_supabase_data[("Chat data<br/>Supabase database")]
  node_supabase_realtime["Realtime and presence<br/>Supabase Realtime"]
  node_supabase_storage[("Media storage<br/>Supabase Storage")]
end

node_config -->|"configures"| node_app
node_app -->|"mounts route"| node_messenger
node_app -->|"mounts route"| node_login
node_app -.->|"handles failures"| node_errors
node_styles -->|"styles"| node_app
node_login -->|"uses"| node_auth_ui
node_auth_ui -->|"auth requests"| node_supabase_plugin
node_messenger -->|"assembles"| node_workspace_ui
node_messenger -->|"shows identity"| node_profile_ui
node_workspace_ui -->|"manages channels"| node_channel_modals
node_messenger -->|"opens"| node_attachments
node_messenger -->|"uses backend client"| node_supabase_plugin
node_supabase_plugin -->|"authenticates"| node_supabase_auth
node_supabase_plugin -->|"reads and writes"| node_supabase_data
node_supabase_plugin -->|"subscribes"| node_supabase_realtime
node_attachments -->|"uploads media"| node_supabase_storage
node_supabase_storage -.->|"file references"| node_supabase_data
node_supabase_realtime -->|"remote updates"| node_messenger
node_notifications -.->|"feedback"| node_messenger
node_nuxt_server -.->|"managed backend dependency"| node_supabase_data

click node_config "https://github.com/vvl1m/simple/blob/main/nuxt.config.ts"
click node_app "https://github.com/vvl1m/simple/blob/main/app.vue"
click node_errors "https://github.com/vvl1m/simple/blob/main/error.vue"
click node_styles "https://github.com/vvl1m/simple/blob/main/assets/scss/main.scss"
click node_messenger "https://github.com/vvl1m/simple/blob/main/pages/index.vue"
click node_login "https://github.com/vvl1m/simple/blob/main/pages/login.vue"
click node_supabase_plugin "https://github.com/vvl1m/simple/blob/main/plugins/aneks.js"
click node_auth_ui "https://github.com/vvl1m/simple/blob/main/components/Auth.vue"
click node_workspace_ui "https://github.com/vvl1m/simple/blob/main/components/SideMenu.vue"
click node_channel_modals "https://github.com/vvl1m/simple/blob/main/components/modals/CreateChannel.vue"
click node_profile_ui "https://github.com/vvl1m/simple/blob/main/components/UserCard.vue"
click node_attachments "https://github.com/vvl1m/simple/blob/main/components/modals/Attachs.vue"
click node_notifications "https://github.com/vvl1m/simple/blob/main/composables/useNotifications.js"
click node_nuxt_server "https://github.com/vvl1m/simple/blob/main/server/tsconfig.json"

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_config,node_app,node_errors,node_styles,node_login,node_supabase_plugin,node_auth_ui,node_nuxt_server toneBlue
class node_messenger,node_workspace_ui,node_channel_modals,node_profile_ui toneAmber
class node_attachments,node_notifications toneMint
class node_supabase_auth,node_supabase_data,node_supabase_realtime,node_supabase_storage toneRose
```

## Components

### Nuxt application

- [Nuxt configuration](https://github.com/vvl1m/simple/blob/main/nuxt.config.ts): Nuxt config · Configures the application and Supabase environment integration. · `nuxt.config.ts`
- [Application shell](https://github.com/vvl1m/simple/blob/main/app.vue): Nuxt root · `app.vue`
- [Route error UI](https://github.com/vvl1m/simple/blob/main/error.vue): Nuxt error page · `error.vue`
- [Global styles](https://github.com/vvl1m/simple/blob/main/assets/scss/main.scss): SCSS · `assets/scss/main.scss`
- [Login and recovery](https://github.com/vvl1m/simple/blob/main/pages/login.vue): Nuxt pages · Authentication entry and password recovery flows. · `pages/login.vue`
- [Shared backend client](https://github.com/vvl1m/simple/blob/main/plugins/aneks.js): Nuxt plugin · Central client-side integration boundary for shared backend access. · `plugins/aneks.js`
- [Authentication UI](https://github.com/vvl1m/simple/blob/main/components/Auth.vue): `components/Auth.vue`
- [Nuxt server runtime](https://github.com/vvl1m/simple/blob/main/server/tsconfig.json): server layer · TypeScript-configured server surface; deployed as generated Nuxt output. · `server/tsconfig.json`

### Messenger workspace

- [Messenger route](https://github.com/vvl1m/simple/blob/main/pages/index.vue): Nuxt page · Primary authenticated chat surface. · `pages/index.vue`
- [Channel navigation](https://github.com/vvl1m/simple/blob/main/components/SideMenu.vue): components · Navigation and controls for the selected workspace. · `components/SideMenu.vue`
- [Channel management](https://github.com/vvl1m/simple/blob/main/components/modals/CreateChannel.vue): modals · Creates and inspects channels. · `components/modals/CreateChannel.vue`
- [Profile UI](https://github.com/vvl1m/simple/blob/main/components/UserCard.vue): components and modals · Displays and edits user identity details. · `components/UserCard.vue`

### Media and feedback

- [Attachment UI](https://github.com/vvl1m/simple/blob/main/components/modals/Attachs.vue): media modals · Selects attachments and displays pictures. · `components/modals/Attachs.vue`
- [Notification state](https://github.com/vvl1m/simple/blob/main/composables/useNotifications.js): composable · Shared transient notification dispatch and state. · `composables/useNotifications.js`

### Supabase managed backend

- **Identity**: Supabase Auth
- **Chat data**: Supabase database · Authoritative users, channels, memberships, and messages.
- **Realtime and presence**: Supabase Realtime
- **Media storage**: Supabase Storage

## Connections

- Nuxt configuration → Application shell: configures
- Application shell → Messenger route: mounts route
- Application shell → Login and recovery: mounts route
- Application shell → Route error UI: handles failures
- Global styles → Application shell: styles
- Login and recovery → Authentication UI: uses
- Authentication UI → Shared backend client: auth requests
- Messenger route → Channel navigation: assembles
- Messenger route → Profile UI: shows identity
- Channel navigation → Channel management: manages channels
- Messenger route → Attachment UI: opens
- Messenger route → Shared backend client: uses backend client
- Shared backend client → Identity: authenticates
- Shared backend client → Chat data: reads and writes
- Shared backend client → Realtime and presence: subscribes
- Attachment UI → Media storage: uploads media
- Media storage → Chat data: file references
- Realtime and presence → Messenger route: remote updates
- Notification state → Messenger route: feedback
- Nuxt server runtime → Chat data: managed backend dependency