# daniel160407/courses-redberry architecture

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

- Interactive diagram: https://gitdiagram.com/daniel160407/courses-redberry
- Repository: https://github.com/daniel160407/courses-redberry

## Overview

Courses Website is a Vue learning platform for discovering courses, creating an account and profile, enrolling in courses, and tracking progress. The main evidenced workflow is opening a course page, loading its details and schedule options, enrolling, and managing or rating that enrollment; authentication and profile completion gate enrollment behavior. CRUD composables own requests through the shared Axios layer, while the global store holds user and course state. README-described catalog browsing and dashboard capabilities are represented, though their page implementations were not sampled, so uncertain wiring is omitted.

Main entry points: [`src/composables/useAxios.ts`](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAxios.ts) (HTTP Client), [`src/composables/useAuthorize.ts`](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAuthorize.ts) (Authentication), [`src/stores/GlobalStore.ts`](https://github.com/daniel160407/courses-redberry/blob/main/src/stores/GlobalStore.ts) (Global State), [`src/router/router.ts`](https://github.com/daniel160407/courses-redberry/blob/main/src/router/router.ts) (Route Table)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_main["App Bootstrap<br/>[main.ts]"]
  node_router["Route Table<br/>[router.ts]"]
  node_appview["App Shell<br/>[App.vue]"]
  node_store[("Global State<br/>[GlobalStore.ts]")]
end

subgraph group_discovery["Course Discovery"]
  node_dashboard["Dashboard<br/>[DashboardPage.vue]"]
  node_catalog["Course Catalog<br/>[CatalogPage.vue]"]
  node_catalogdata["Catalog Data<br/>[useCatalogCrud.ts]"]
  node_courses["Course Operations<br/>[useCoursesCrud.ts]"]
end

subgraph group_identity["Identity and Profile"]
  node_authui["Auth and Profile Forms"]
  node_authorize["Authentication<br/>[useAuthorize.ts]"]
  node_validation["Form Validation<br/>[useValidate.ts]"]
end

subgraph group_learning["Learning Management"]
  node_coursepage["Course Details"]
  node_schedules["Schedule Operations<br/>[useScheduleCrud.ts]"]
  node_enrollments["Enrollment Operations"]
end

subgraph group_services["Data Access"]
  node_http["HTTP Client<br/>[useAxios.ts]"]
  node_api["Courses API"]
  node_cookies[("Token Cookies")]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_appview
node_main -->|"mounts"| node_appview
node_main -->|"installs"| node_router
node_router -->|"routes"| node_dashboard
node_router -->|"routes"| node_catalog
node_router -->|"routes"| node_coursepage
node_appview -->|"fetches user"| node_authorize
node_appview -->|"sets user"| node_store
node_authui -->|"validates forms"| node_validation
node_authui -->|"submits forms"| node_authorize
node_authui -->|"loads progress courses"| node_courses
node_authorize -->|"sends requests"| node_http
node_authorize -->|"stores token"| node_cookies
node_authorize -->|"reads auth state"| node_store
node_coursepage -->|"loads and rates"| node_courses
node_coursepage -->|"loads schedules"| node_schedules
node_coursepage -->|"manages enrollment"| node_enrollments
node_enrollments -->|"sets enrollments"| node_store
node_courses -->|"sets courses"| node_store
node_courses -->|"sends requests"| node_http
node_schedules -->|"sends requests"| node_http
node_enrollments -->|"sends requests"| node_http
node_http -->|"transfers data"| node_api
node_http -->|"reads or clears token"| node_cookies
node_http -->|"opens login modal"| node_store

click node_main "https://github.com/daniel160407/courses-redberry/blob/main/src/main.ts"
click node_router "https://github.com/daniel160407/courses-redberry/blob/main/src/router/router.ts"
click node_appview "https://github.com/daniel160407/courses-redberry/blob/main/src/App.vue"
click node_dashboard "https://github.com/daniel160407/courses-redberry/blob/main/src/views/DashboardPage.vue"
click node_catalog "https://github.com/daniel160407/courses-redberry/blob/main/src/views/CatalogPage.vue"
click node_catalogdata "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useCatalogCrud.ts"
click node_coursepage "https://github.com/daniel160407/courses-redberry/blob/main/src/views/InsideCoursePage.vue"
click node_authui "https://github.com/daniel160407/courses-redberry/blob/main/src/components/common/AuthorizationModals.vue"
click node_authorize "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAuthorize.ts"
click node_validation "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useValidate.ts"
click node_courses "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useCoursesCrud.ts"
click node_schedules "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useScheduleCrud.ts"
click node_enrollments "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useEnrollmentsCrud.ts"
click node_store "https://github.com/daniel160407/courses-redberry/blob/main/src/stores/GlobalStore.ts"
click node_http "https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAxios.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,node_router,node_appview,node_store toneBlue
class node_dashboard,node_catalog,node_catalogdata,node_courses toneAmber
class node_authui,node_authorize,node_validation toneMint
class node_coursepage,node_schedules,node_enrollments toneRose
class node_http,node_api,node_cookies,node_learner toneIndigo
```

## Components

### Application Shell

- [App Bootstrap](https://github.com/daniel160407/courses-redberry/blob/main/src/main.ts): `src/main.ts`
- [Route Table](https://github.com/daniel160407/courses-redberry/blob/main/src/router/router.ts): `src/router/router.ts`
- [App Shell](https://github.com/daniel160407/courses-redberry/blob/main/src/App.vue): `src/App.vue`
- [Global State](https://github.com/daniel160407/courses-redberry/blob/main/src/stores/GlobalStore.ts): `src/stores/GlobalStore.ts`

### Course Discovery

- [Dashboard](https://github.com/daniel160407/courses-redberry/blob/main/src/views/DashboardPage.vue): `src/views/DashboardPage.vue`
- [Course Catalog](https://github.com/daniel160407/courses-redberry/blob/main/src/views/CatalogPage.vue): `src/views/CatalogPage.vue`
- [Catalog Data](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useCatalogCrud.ts): `src/composables/useCatalogCrud.ts`
- [Course Operations](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useCoursesCrud.ts): `src/composables/useCoursesCrud.ts`

### Identity and Profile

- [Auth and Profile Forms](https://github.com/daniel160407/courses-redberry/blob/main/src/components/common/AuthorizationModals.vue): `src/components/common/AuthorizationModals.vue`
- [Authentication](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAuthorize.ts): `src/composables/useAuthorize.ts`
- [Form Validation](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useValidate.ts): `src/composables/useValidate.ts`

### Learning Management

- [Course Details](https://github.com/daniel160407/courses-redberry/blob/main/src/views/InsideCoursePage.vue): `src/views/InsideCoursePage.vue`
- [Schedule Operations](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useScheduleCrud.ts): `src/composables/useScheduleCrud.ts`
- [Enrollment Operations](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useEnrollmentsCrud.ts): `src/composables/useEnrollmentsCrud.ts`

### Data Access

- [HTTP Client](https://github.com/daniel160407/courses-redberry/blob/main/src/composables/useAxios.ts): `src/composables/useAxios.ts`
- **Courses API**
- **Token Cookies**

### Other components

- **Learner**

## Connections

- Learner → App Shell: uses
- App Bootstrap → App Shell: mounts
- App Bootstrap → Route Table: installs
- Route Table → Dashboard: routes
- Route Table → Course Catalog: routes
- Route Table → Course Details: routes
- App Shell → Authentication: fetches user
- App Shell → Global State: sets user
- Auth and Profile Forms → Form Validation: validates forms
- Auth and Profile Forms → Authentication: submits forms
- Auth and Profile Forms → Course Operations: loads progress courses
- Authentication → HTTP Client: sends requests
- Authentication → Token Cookies: stores token
- Authentication → Global State: reads auth state
- Course Details → Course Operations: loads and rates
- Course Details → Schedule Operations: loads schedules
- Course Details → Enrollment Operations: manages enrollment
- Enrollment Operations → Global State: sets enrollments
- Course Operations → Global State: sets courses
- Course Operations → HTTP Client: sends requests
- Schedule Operations → HTTP Client: sends requests
- Enrollment Operations → HTTP Client: sends requests
- HTTP Client → Courses API: transfers data
- HTTP Client → Token Cookies: reads or clears token
- HTTP Client → Global State: opens login modal