# nabixka/ekskul-data architecture

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

- Interactive diagram: https://gitdiagram.com/nabixka/ekskul-data
- Repository: https://github.com/nabixka/ekskul-data

## Overview

This is a school extracurricular-management application: students and administrators use a Vue client to authenticate and manage clubs, membership, activities, and documentation through a NestJS API. The main student workflow is browse clubs, join one, then view its members, activities, and gallery; administrators have club-management and dashboard views. The graph includes the documented client routes and sampled controller-to-service calls. Several backend services and integrations were not excerpted, so uncertain links to storage and other capabilities are omitted.

Main entry points: [`application/src/index.js`](https://github.com/nabixka/ekskul-data/blob/main/application/src/index.js) (Route Registry), [`application/src/api.js`](https://github.com/nabixka/ekskul-data/blob/main/application/src/api.js) (API Client), [`service/src/app.module.ts`](https://github.com/nabixka/ekskul-data/blob/main/service/src/app.module.ts) (Module Composition), [`service/src/auth/auth.service.ts`](https://github.com/nabixka/ekskul-data/blob/main/service/src/auth/auth.service.ts) (Auth Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue Client"]
  node_router["Route Registry<br/>[index.js]"]
  node_shell["App Shell<br/>[App.vue]"]
  node_sidebar["Sidebar<br/>[sidebar.vue]"]
  node_api["API Client<br/>[api.js]"]
  node_memberdash["Student Dashboard<br/>[Dashboard.vue]"]
end

subgraph group_identity["Identity"]
  node_authviews["Login &amp; Register<br/>[Login.vue]"]
  node_authcontroller["Auth Controller<br/>[auth.controller.ts]"]
  node_authservice["Auth Service<br/>[auth.service.ts]"]
  node_usersdb[("User Records")]
  node_token["JWT Signer"]
end

subgraph group_clubs["Club Management"]
  node_clubbrowse["Club Directory<br/>[ListEkskul.vue]"]
  node_clubdetail["Club Detail<br/>[EkskulDetail.vue]"]
  node_myclubs["My Clubs<br/>[MyEkskul.vue]"]
  node_myclubdetail["Membership Detail<br/>[MyEkskulDetail.vue]"]
  node_admindash["Admin Dashboard<br/>[Dashboard.vue]"]
  node_adminclubs["Admin Club List<br/>[ListEkskul.vue]"]
  node_adminclubdetail["Admin Club Detail<br/>[EkskulDetail.vue]"]
  node_clubcontroller["Club Controller"]
  node_clubservice["Club Service<br/>[ekskul.service.ts]"]
  node_membercontroller["Member Controller"]
  node_memberservice["Member Service<br/>[member.service.ts]"]
  node_admincontroller["Admin Controller"]
  node_adminservice["Admin Service<br/>[admin.service.ts]"]
end

subgraph group_activities["Activities &amp; Media"]
  node_activitycontroller["Activity Controller"]
  node_activityservice["Activity Service"]
  node_doccontroller["Documentation Controller"]
  node_docservice["Documentation Service"]
end

subgraph group_platform["API Platform"]
  node_appmodule["Module Composition<br/>[app.module.ts]"]
end

node_user(("Student / Admin"))

node_user -->|"navigates"| node_router
node_router -->|"routes to"| node_authviews
node_router -->|"routes to"| node_memberdash
node_router -->|"routes to"| node_clubbrowse
node_router -->|"routes to"| node_clubdetail
node_router -->|"routes to"| node_myclubs
node_router -->|"routes to"| node_myclubdetail
node_router -->|"routes to"| node_admindash
node_router -->|"routes to"| node_adminclubs
node_router -->|"routes to"| node_adminclubdetail
node_shell -->|"renders routes"| node_router
node_shell -->|"renders"| node_sidebar
node_authviews -->|"calls"| node_api
node_memberdash -->|"calls"| node_api
node_clubbrowse -->|"calls"| node_api
node_clubdetail -->|"calls"| node_api
node_myclubs -->|"calls"| node_api
node_myclubdetail -->|"calls"| node_api
node_admindash -->|"calls"| node_api
node_adminclubs -->|"calls"| node_api
node_adminclubdetail -->|"calls"| node_api
node_api -.->|"HTTP requests"| node_authcontroller
node_api -->|"HTTP requests"| node_membercontroller
node_api -->|"HTTP requests"| node_doccontroller
node_authcontroller -->|"delegates"| node_authservice
node_authservice -->|"reads / writes"| node_usersdb
node_authservice -->|"signs token"| node_token
node_clubcontroller -->|"delegates"| node_clubservice
node_membercontroller -->|"delegates"| node_memberservice
node_admincontroller -->|"delegates"| node_adminservice
node_activitycontroller -->|"delegates"| node_activityservice
node_doccontroller -->|"delegates"| node_docservice
node_appmodule -->|"registers module"| node_authcontroller
node_appmodule -->|"registers module"| node_clubcontroller
node_appmodule -->|"registers module"| node_membercontroller
node_appmodule -->|"registers module"| node_admincontroller
node_appmodule -->|"registers module"| node_activitycontroller
node_appmodule -->|"registers module"| node_doccontroller

click node_router "https://github.com/nabixka/ekskul-data/blob/main/application/src/index.js"
click node_shell "https://github.com/nabixka/ekskul-data/blob/main/application/src/App.vue"
click node_sidebar "https://github.com/nabixka/ekskul-data/blob/main/application/src/components/sidebar.vue"
click node_api "https://github.com/nabixka/ekskul-data/blob/main/application/src/api.js"
click node_authviews "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Auth/Login.vue"
click node_memberdash "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/Dashboard.vue"
click node_clubbrowse "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/ListEkskul.vue"
click node_clubdetail "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/EkskulDetail.vue"
click node_myclubs "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/MyEkskul.vue"
click node_myclubdetail "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/MyEkskulDetail.vue"
click node_admindash "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/Dashboard.vue"
click node_adminclubs "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/ListEkskul.vue"
click node_adminclubdetail "https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/EkskulDetail.vue"
click node_authcontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/auth/auth.controller.ts"
click node_authservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/auth/auth.service.ts"
click node_clubcontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/ekskul/ekskul.controller.ts"
click node_clubservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/ekskul/ekskul.service.ts"
click node_membercontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/member/member.controller.ts"
click node_memberservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/member/member.service.ts"
click node_admincontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/admin/admin.controller.ts"
click node_adminservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/admin/admin.service.ts"
click node_activitycontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/kegiatan/kegiatan.controller.ts"
click node_activityservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/kegiatan/kegiatan.service.ts"
click node_doccontroller "https://github.com/nabixka/ekskul-data/blob/main/service/src/dokumentasi/dokumentasi.controller.ts"
click node_docservice "https://github.com/nabixka/ekskul-data/blob/main/service/src/dokumentasi/dokumentasi.service.ts"
click node_appmodule "https://github.com/nabixka/ekskul-data/blob/main/service/src/app.module.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_router,node_shell,node_sidebar,node_api,node_memberdash toneBlue
class node_authviews,node_authcontroller,node_authservice,node_usersdb,node_token toneAmber
class node_clubbrowse,node_clubdetail,node_myclubs,node_myclubdetail,node_admindash,node_adminclubs,node_adminclubdetail,node_clubcontroller,node_clubservice,node_membercontroller,node_memberservice,node_admincontroller,node_adminservice toneMint
class node_activitycontroller,node_activityservice,node_doccontroller,node_docservice toneRose
class node_appmodule,node_user toneIndigo
```

## Components

### Vue Client

- [Route Registry](https://github.com/nabixka/ekskul-data/blob/main/application/src/index.js): `application/src/index.js`
- [App Shell](https://github.com/nabixka/ekskul-data/blob/main/application/src/App.vue): `application/src/App.vue`
- [Sidebar](https://github.com/nabixka/ekskul-data/blob/main/application/src/components/sidebar.vue): `application/src/components/sidebar.vue`
- [API Client](https://github.com/nabixka/ekskul-data/blob/main/application/src/api.js): `application/src/api.js`
- [Student Dashboard](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/Dashboard.vue): `application/src/page/MainPage/Dashboard.vue`

### Identity

- [Login & Register](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Auth/Login.vue): `application/src/page/Auth/Login.vue`
- [Auth Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/auth/auth.controller.ts): `service/src/auth/auth.controller.ts`
- [Auth Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/auth/auth.service.ts): `service/src/auth/auth.service.ts`
- **User Records**
- **JWT Signer**

### Club Management

- [Club Directory](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/ListEkskul.vue): `application/src/page/MainPage/ListEkskul.vue`
- [Club Detail](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/EkskulDetail.vue): `application/src/page/MainPage/EkskulDetail.vue`
- [My Clubs](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/MyEkskul.vue): `application/src/page/MainPage/MyEkskul.vue`
- [Membership Detail](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/MainPage/MyEkskulDetail.vue): `application/src/page/MainPage/MyEkskulDetail.vue`
- [Admin Dashboard](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/Dashboard.vue): `application/src/page/Admin/Dashboard.vue`
- [Admin Club List](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/ListEkskul.vue): `application/src/page/Admin/ListEkskul.vue`
- [Admin Club Detail](https://github.com/nabixka/ekskul-data/blob/main/application/src/page/Admin/EkskulDetail.vue): `application/src/page/Admin/EkskulDetail.vue`
- [Club Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/ekskul/ekskul.controller.ts): `service/src/ekskul/ekskul.controller.ts`
- [Club Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/ekskul/ekskul.service.ts): `service/src/ekskul/ekskul.service.ts`
- [Member Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/member/member.controller.ts): `service/src/member/member.controller.ts`
- [Member Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/member/member.service.ts): `service/src/member/member.service.ts`
- [Admin Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/admin/admin.controller.ts): `service/src/admin/admin.controller.ts`
- [Admin Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/admin/admin.service.ts): `service/src/admin/admin.service.ts`

### Activities & Media

- [Activity Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/kegiatan/kegiatan.controller.ts): `service/src/kegiatan/kegiatan.controller.ts`
- [Activity Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/kegiatan/kegiatan.service.ts): `service/src/kegiatan/kegiatan.service.ts`
- [Documentation Controller](https://github.com/nabixka/ekskul-data/blob/main/service/src/dokumentasi/dokumentasi.controller.ts): `service/src/dokumentasi/dokumentasi.controller.ts`
- [Documentation Service](https://github.com/nabixka/ekskul-data/blob/main/service/src/dokumentasi/dokumentasi.service.ts): `service/src/dokumentasi/dokumentasi.service.ts`

### API Platform

- [Module Composition](https://github.com/nabixka/ekskul-data/blob/main/service/src/app.module.ts): `service/src/app.module.ts`

### Other components

- **Student / Admin**

## Connections

- Student / Admin → Route Registry: navigates (evidence: `application/src/index.js`)
- Route Registry → Login & Register: routes to (evidence: `application/src/index.js`)
- Route Registry → Student Dashboard: routes to (evidence: `application/src/index.js`)
- Route Registry → Club Directory: routes to (evidence: `application/src/index.js`)
- Route Registry → Club Detail: routes to (evidence: `application/src/index.js`)
- Route Registry → My Clubs: routes to (evidence: `application/src/index.js`)
- Route Registry → Membership Detail: routes to (evidence: `application/src/index.js`)
- Route Registry → Admin Dashboard: routes to (evidence: `application/src/index.js`)
- Route Registry → Admin Club List: routes to (evidence: `application/src/index.js`)
- Route Registry → Admin Club Detail: routes to (evidence: `application/src/index.js`)
- App Shell → Route Registry: renders routes (evidence: `application/src/main.js`)
- App Shell → Sidebar: renders (evidence: `application/src/App.vue`)
- Login & Register → API Client: calls (evidence: `application/src/page/Auth/Login.vue`)
- Student Dashboard → API Client: calls (evidence: `application/src/page/MainPage/Dashboard.vue`)
- Club Directory → API Client: calls (evidence: `application/src/page/MainPage/ListEkskul.vue`)
- Club Detail → API Client: calls (evidence: `application/src/page/MainPage/EkskulDetail.vue`)
- My Clubs → API Client: calls (evidence: `application/src/page/MainPage/MyEkskul.vue`)
- Membership Detail → API Client: calls (evidence: `application/src/page/MainPage/MyEkskulDetail.vue`)
- Admin Dashboard → API Client: calls (evidence: `application/src/page/Admin/Dashboard.vue`)
- Admin Club List → API Client: calls (evidence: `application/src/page/Admin/ListEkskul.vue`)
- Admin Club Detail → API Client: calls (evidence: `application/src/page/Admin/EkskulDetail.vue`)
- API Client → Auth Controller: HTTP requests
- API Client → Member Controller: HTTP requests
- API Client → Documentation Controller: HTTP requests
- Auth Controller → Auth Service: delegates (evidence: `service/src/auth/auth.controller.ts`)
- Auth Service → User Records: reads / writes (evidence: `service/src/auth/auth.service.ts`)
- Auth Service → JWT Signer: signs token (evidence: `service/src/auth/auth.service.ts`)
- Club Controller → Club Service: delegates (evidence: `service/src/ekskul/ekskul.controller.ts`)
- Member Controller → Member Service: delegates (evidence: `service/src/member/member.controller.ts`)
- Admin Controller → Admin Service: delegates (evidence: `service/src/admin/admin.controller.ts`)
- Activity Controller → Activity Service: delegates (evidence: `service/src/kegiatan/kegiatan.controller.ts`)
- Documentation Controller → Documentation Service: delegates (evidence: `service/src/dokumentasi/dokumentasi.controller.ts`)
- Module Composition → Auth Controller: registers module (evidence: `service/src/app.module.ts`)
- Module Composition → Club Controller: registers module (evidence: `service/src/app.module.ts`)
- Module Composition → Member Controller: registers module (evidence: `service/src/app.module.ts`)
- Module Composition → Admin Controller: registers module (evidence: `service/src/app.module.ts`)
- Module Composition → Activity Controller: registers module (evidence: `service/src/app.module.ts`)
- Module Composition → Documentation Controller: registers module (evidence: `service/src/app.module.ts`)