# abdallah01win/starterapp architecture

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

- Interactive diagram: https://gitdiagram.com/abdallah01win/starterapp
- Repository: https://github.com/abdallah01win/starterapp

## Overview

StarterApp is a Vue SaaS starter kit whose main user workflow is sign-in, session initialization and guarded navigation into dashboard or user-management pages. Those pages sit within a shared application layout and can use reusable forms, tables and UI primitives. The repository also provides API access, permissions, notifications, localization, theming and profile features. The graph reflects README capabilities and sampled wiring; page internals and several integrations are represented only at their supported directory or module paths.

Main entry points: [`src/router/index.ts`](https://github.com/abdallah01win/starterapp/blob/dev/src/router/index.ts) (Router), [`src/stores/authStore.ts`](https://github.com/abdallah01win/starterapp/blob/dev/src/stores/authStore.ts) (Auth store), [`src/main.ts`](https://github.com/abdallah01win/starterapp/blob/dev/src/main.ts) (App bootstrap), [`src/App.vue`](https://github.com/abdallah01win/starterapp/blob/dev/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_boot["Application shell"]
  node_entry["App bootstrap<br/>[main.ts]"]
  node_app["App shell<br/>[App.vue]"]
  node_layout["App layout<br/>[AppLayout.vue]"]
  node_router["Router<br/>[index.ts]"]
end

subgraph group_identity["Identity and access"]
  node_login["Sign-in page<br/>[index.vue]"]
  node_authguard["Auth guard<br/>[authentication.ts]"]
  node_permissions["Permission guard<br/>[permissions.ts]"]
  node_auth["Auth store<br/>[authStore.ts]"]
  node_cookie[("Session cookie")]
end

subgraph group_product["Application features"]
  node_dashboard["Dashboard<br/>[index.vue]"]
  node_users["User management<br/>[index.vue]"]
  node_profile["Profile<br/>[index.vue]"]
  node_stores["Feature stores<br/>[userStore.ts]"]
end

subgraph group_foundation["Shared foundation"]
  node_api["HTTP client<br/>[axios.ts]"]
  node_notifications["Notifications"]
  node_components["Domain components"]
  node_ui["UI primitives"]
  node_i18n["Localization<br/>[i18n.ts]"]
  node_theme["Color mode<br/>[colorMode.ts]"]
  node_toast["Toast display<br/>[Sonner.vue]"]
end

node_user(("User"))
node_backend{{"API service"}}

node_user -->|"submits credentials"| node_login
node_entry -->|"mounts"| node_app
node_entry -->|"installs"| node_router
node_entry -->|"installs"| node_i18n
node_entry -->|"provides theme"| node_theme
node_app -->|"renders"| node_layout
node_app -->|"renders routes"| node_router
node_router -->|"checks session"| node_authguard
node_router -->|"checks access"| node_permissions
node_router -->|"dispatches route"| node_login
node_router -->|"dispatches route"| node_dashboard
node_router -->|"dispatches route"| node_users
node_router -->|"dispatches route"| node_profile
node_login -->|"calls login"| node_auth
node_authguard -->|"initializes session"| node_auth
node_auth -->|"sends requests"| node_api
node_api -->|"HTTP requests"| node_backend
node_auth -->|"reads/writes token"| node_cookie
node_auth -->|"redirects"| node_router
node_auth -->|"sets notifications"| node_notifications
node_dashboard -->|"uses"| node_components
node_users -->|"uses"| node_components
node_profile -->|"uses"| node_components
node_components -->|"composes"| node_ui
node_app -->|"renders toaster"| node_toast
node_entry -->|"initializes store system"| node_notifications

click node_entry "https://github.com/abdallah01win/starterapp/blob/dev/src/main.ts"
click node_app "https://github.com/abdallah01win/starterapp/blob/dev/src/App.vue"
click node_layout "https://github.com/abdallah01win/starterapp/blob/dev/src/layouts/AppLayout.vue"
click node_router "https://github.com/abdallah01win/starterapp/blob/dev/src/router/index.ts"
click node_login "https://github.com/abdallah01win/starterapp/blob/dev/src/pages/index.vue"
click node_authguard "https://github.com/abdallah01win/starterapp/blob/dev/src/router/middleware/authentication.ts"
click node_permissions "https://github.com/abdallah01win/starterapp/blob/dev/src/router/middleware/permissions.ts"
click node_auth "https://github.com/abdallah01win/starterapp/blob/dev/src/stores/authStore.ts"
click node_api "https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/axios.ts"
click node_dashboard "https://github.com/abdallah01win/starterapp/blob/dev/src/pages/dashboard/index.vue"
click node_users "https://github.com/abdallah01win/starterapp/blob/dev/src/pages/users/index.vue"
click node_profile "https://github.com/abdallah01win/starterapp/blob/dev/src/pages/profile/index.vue"
click node_stores "https://github.com/abdallah01win/starterapp/blob/dev/src/stores/userStore.ts"
click node_notifications "https://github.com/abdallah01win/starterapp/blob/dev/src/stores/notificationStore.ts"
click node_components "https://github.com/abdallah01win/starterapp/tree/dev/src/components"
click node_ui "https://github.com/abdallah01win/starterapp/tree/dev/src/components/ui"
click node_i18n "https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/i18n.ts"
click node_theme "https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/colorMode.ts"
click node_toast "https://github.com/abdallah01win/starterapp/blob/dev/src/components/ui/sonner/Sonner.vue"

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_entry,node_app,node_layout,node_router,node_user toneBlue
class node_login,node_authguard,node_permissions,node_auth,node_cookie toneAmber
class node_dashboard,node_users,node_profile,node_stores,node_backend toneMint
class node_api,node_notifications,node_components,node_ui,node_i18n,node_theme,node_toast toneRose
```

## Components

### Application shell

- [App bootstrap](https://github.com/abdallah01win/starterapp/blob/dev/src/main.ts): `src/main.ts`
- [App shell](https://github.com/abdallah01win/starterapp/blob/dev/src/App.vue): `src/App.vue`
- [App layout](https://github.com/abdallah01win/starterapp/blob/dev/src/layouts/AppLayout.vue): `src/layouts/AppLayout.vue`
- [Router](https://github.com/abdallah01win/starterapp/blob/dev/src/router/index.ts): `src/router/index.ts`

### Identity and access

- [Sign-in page](https://github.com/abdallah01win/starterapp/blob/dev/src/pages/index.vue): `src/pages/index.vue`
- [Auth guard](https://github.com/abdallah01win/starterapp/blob/dev/src/router/middleware/authentication.ts): `src/router/middleware/authentication.ts`
- [Permission guard](https://github.com/abdallah01win/starterapp/blob/dev/src/router/middleware/permissions.ts): `src/router/middleware/permissions.ts`
- [Auth store](https://github.com/abdallah01win/starterapp/blob/dev/src/stores/authStore.ts): `src/stores/authStore.ts`
- **Session cookie**

### Application features

- [Dashboard](https://github.com/abdallah01win/starterapp/blob/dev/src/pages/dashboard/index.vue): `src/pages/dashboard/index.vue`
- [User management](https://github.com/abdallah01win/starterapp/blob/dev/src/pages/users/index.vue): `src/pages/users/index.vue`
- [Profile](https://github.com/abdallah01win/starterapp/blob/dev/src/pages/profile/index.vue): `src/pages/profile/index.vue`
- [Feature stores](https://github.com/abdallah01win/starterapp/blob/dev/src/stores/userStore.ts): `src/stores/userStore.ts`

### Shared foundation

- [HTTP client](https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/axios.ts): `src/plugins/axios.ts`
- [Notifications](https://github.com/abdallah01win/starterapp/blob/dev/src/stores/notificationStore.ts): `src/stores/notificationStore.ts`
- [Domain components](https://github.com/abdallah01win/starterapp/tree/dev/src/components): `src/components`
- [UI primitives](https://github.com/abdallah01win/starterapp/tree/dev/src/components/ui): `src/components/ui`
- [Localization](https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/i18n.ts): `src/plugins/i18n.ts`
- [Color mode](https://github.com/abdallah01win/starterapp/blob/dev/src/plugins/colorMode.ts): `src/plugins/colorMode.ts`
- [Toast display](https://github.com/abdallah01win/starterapp/blob/dev/src/components/ui/sonner/Sonner.vue): `src/components/ui/sonner/Sonner.vue`

### Other components

- **User**
- **API service**

## Connections

- User → Sign-in page: submits credentials
- App bootstrap → App shell: mounts
- App bootstrap → Router: installs
- App bootstrap → Localization: installs
- App bootstrap → Color mode: provides theme
- App shell → App layout: renders
- App shell → Router: renders routes
- Router → Auth guard: checks session
- Router → Permission guard: checks access
- Router → Sign-in page: dispatches route
- Router → Dashboard: dispatches route
- Router → User management: dispatches route
- Router → Profile: dispatches route
- Sign-in page → Auth store: calls login
- Auth guard → Auth store: initializes session
- Auth store → HTTP client: sends requests
- HTTP client → API service: HTTP requests
- Auth store → Session cookie: reads/writes token
- Auth store → Router: redirects
- Auth store → Notifications: sets notifications
- Dashboard → Domain components: uses
- User management → Domain components: uses
- Profile → Domain components: uses
- Domain components → UI primitives: composes
- App shell → Toast display: renders toaster
- App bootstrap → Notifications: initializes store system