# abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir architecture

> Architecture diagram of the GitHub repository abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir, 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/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir
- Repository: https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir

## Overview

Stories App is a Progressive Web App for browsing and sharing geolocated stories. The main user flow is authentication, story-list browsing with map markers, and opening story details; authenticated users can also create stories with photos and location. API access is mediated by the data layer, which uses IndexedDB for cached and offline stories and syncs queued stories when connectivity returns. The app also supports installability and push notifications. Some page and integration source was not sampled, so uncertain internal call paths are omitted; routes and capabilities are based on the tree and sampled code.

Main entry points: [`src/scripts/routes/routes.js`](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/routes/routes.js) (Routes and Auth), [`src/scripts/data/api.js`](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/data/api.js) (Story API), [`src/scripts/index.js`](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/index.js) (Startup and Sync), [`src/scripts/pages/home/home-page.js`](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/home/home-page.js) (Story Browser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_app["App Shell<br/>[app.js]"]
  node_routes["Routes and Auth<br/>[routes.js]"]
  node_login["Login<br/>[login-page.js]"]
  node_register["Registration<br/>[register-page.js]"]
  node_about["About Page<br/>[about-page.js]"]
  node_notfound["Not Found<br/>[not-found.js]"]
end

subgraph group_stories["Story Experience"]
  node_home["Story Browser<br/>[home-page.js]"]
  node_homepresenter["Home Presenter<br/>[home-presenter.js]"]
  node_storycreate["Story Creation<br/>[story-page.js]"]
  node_detail["Story Details<br/>[detail-page.js]"]
  node_templates["UI Templates<br/>[templates.js]"]
  node_map["Story Map<br/>[map.js]"]
  node_camera["Photo Capture<br/>[camera.js]"]
end

subgraph group_data["Data and Offline"]
  node_api["Story API<br/>[api.js]"]
  node_idbhelper["IndexedDB Access<br/>[indexed-db.js]"]
  node_idb[("Local Story Store")]
end

subgraph group_pwa["PWA Features"]
  node_network["Connectivity Status<br/>[network-status.js]"]
  node_entry["Startup and Sync<br/>[index.js]"]
  node_swregister["Worker Registration<br/>[sw-register.js]"]
  node_worker["Service Worker<br/>[sw.js]"]
  node_cache[("Browser Cache")]
  node_install["Install Support<br/>[pwa-install.js]"]
end

node_user(("User"))
node_remote{{"Stories Service"}}
node_push{{"Push Service"}}

node_user -->|"uses"| node_app
node_app -->|"resolves routes"| node_routes
node_routes -->|"selects page"| node_home
node_routes -->|"selects page"| node_login
node_routes -->|"selects page"| node_register
node_routes -->|"selects page"| node_about
node_routes -->|"selects page"| node_storycreate
node_routes -->|"selects page"| node_detail
node_routes -->|"fallback page"| node_notfound
node_home -->|"delegates"| node_homepresenter
node_home -->|"renders stories"| node_templates
node_home -->|"shows markers"| node_map
node_storycreate -->|"captures photo"| node_camera
node_login -->|"authenticates"| node_api
node_register -->|"registers account"| node_api
node_homepresenter -->|"loads stories"| node_api
node_detail -->|"loads detail"| node_api
node_storycreate -->|"submits story"| node_api
node_api -->|"requests API"| node_remote
node_api -->|"reads and writes"| node_idbhelper
node_idbhelper -->|"stores stories"| node_idb
node_entry -->|"starts app"| node_app
node_entry -->|"tracks connectivity"| node_network
node_entry -->|"syncs offline stories"| node_api
node_entry -->|"registers worker"| node_swregister
node_swregister -->|"registers"| node_worker
node_worker -->|"caches responses"| node_cache
node_worker -->|"fetches resources"| node_remote
node_worker -.->|"receives push"| node_push
node_entry -->|"enables install"| node_install
node_home -->|"subscribes to push"| node_swregister

click node_app "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/app.js"
click node_routes "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/routes/routes.js"
click node_home "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/home/home-page.js"
click node_homepresenter "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/home/home-presenter.js"
click node_login "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/login/login-page.js"
click node_register "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/register/register-page.js"
click node_about "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/about/about-page.js"
click node_storycreate "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/story/story-page.js"
click node_detail "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/detail/detail-page.js"
click node_notfound "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/not-found/not-found.js"
click node_templates "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/templates.js"
click node_map "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/map.js"
click node_camera "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/camera.js"
click node_api "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/data/api.js"
click node_idbhelper "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/indexed-db.js"
click node_network "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/network-status.js"
click node_entry "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/index.js"
click node_swregister "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/sw-register.js"
click node_worker "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/public/sw.js"
click node_install "https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/pwa-install.js"

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_login,node_register,node_about,node_notfound,node_user toneBlue
class node_home,node_homepresenter,node_storycreate,node_detail,node_templates,node_map,node_camera toneAmber
class node_api,node_idbhelper,node_idb toneMint
class node_network,node_entry,node_swregister,node_worker,node_cache,node_install toneRose
class node_remote,node_push toneIndigo
```

## Components

### App Navigation

- [App Shell](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/app.js): `src/scripts/pages/app.js`
- [Routes and Auth](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/routes/routes.js): `src/scripts/routes/routes.js`
- [Login](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/login/login-page.js): `src/scripts/pages/login/login-page.js`
- [Registration](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/register/register-page.js): `src/scripts/pages/register/register-page.js`
- [About Page](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/about/about-page.js): `src/scripts/pages/about/about-page.js`
- [Not Found](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/not-found/not-found.js): `src/scripts/pages/not-found/not-found.js`

### Story Experience

- [Story Browser](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/home/home-page.js): `src/scripts/pages/home/home-page.js`
- [Home Presenter](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/home/home-presenter.js): `src/scripts/pages/home/home-presenter.js`
- [Story Creation](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/story/story-page.js): `src/scripts/pages/story/story-page.js`
- [Story Details](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/pages/detail/detail-page.js): `src/scripts/pages/detail/detail-page.js`
- [UI Templates](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/templates.js): `src/scripts/templates.js`
- [Story Map](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/map.js): `src/scripts/utils/map.js`
- [Photo Capture](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/camera.js): `src/scripts/utils/camera.js`

### Data and Offline

- [Story API](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/data/api.js): `src/scripts/data/api.js`
- [IndexedDB Access](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/indexed-db.js): `src/scripts/utils/indexed-db.js`
- **Local Story Store**

### PWA Features

- [Connectivity Status](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/network-status.js): `src/scripts/utils/network-status.js`
- [Startup and Sync](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/index.js): `src/scripts/index.js`
- [Worker Registration](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/sw-register.js): `src/scripts/utils/sw-register.js`
- [Service Worker](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/public/sw.js): `src/public/sw.js`
- **Browser Cache**
- [Install Support](https://github.com/abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir/blob/main/src/scripts/utils/pwa-install.js): `src/scripts/utils/pwa-install.js`

### Other components

- **User**
- **Stories Service**
- **Push Service**

## Connections

- User → App Shell: uses
- App Shell → Routes and Auth: resolves routes
- Routes and Auth → Story Browser: selects page
- Routes and Auth → Login: selects page
- Routes and Auth → Registration: selects page
- Routes and Auth → About Page: selects page
- Routes and Auth → Story Creation: selects page
- Routes and Auth → Story Details: selects page
- Routes and Auth → Not Found: fallback page
- Story Browser → Home Presenter: delegates
- Story Browser → UI Templates: renders stories
- Story Browser → Story Map: shows markers
- Story Creation → Photo Capture: captures photo
- Login → Story API: authenticates
- Registration → Story API: registers account
- Home Presenter → Story API: loads stories
- Story Details → Story API: loads detail
- Story Creation → Story API: submits story
- Story API → Stories Service: requests API
- Story API → IndexedDB Access: reads and writes
- IndexedDB Access → Local Story Store: stores stories
- Startup and Sync → App Shell: starts app
- Startup and Sync → Connectivity Status: tracks connectivity
- Startup and Sync → Story API: syncs offline stories
- Startup and Sync → Worker Registration: registers worker
- Worker Registration → Service Worker: registers
- Service Worker → Browser Cache: caches responses
- Service Worker → Stories Service: fetches resources
- Service Worker → Push Service: receives push
- Startup and Sync → Install Support: enables install
- Story Browser → Worker Registration: subscribes to push