How abid-abdi/dicoding-belajar_pengembangan_web_intermediate-project_akhir works
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: routes.js Routes and Auth · api.js Story API · index.js Startup and Sync · home-page.js Story Browser
Components 25
App Navigation
- App Shell
src/scripts/pages/app.js - Routes and Auth
src/scripts/routes/routes.js - Login
src/scripts/pages/login/login-page.js - Registration
src/scripts/pages/register/register-page.js - About Page
src/scripts/pages/about/about-page.js - Not Found
src/scripts/pages/not-found/not-found.js
Story Experience
- Story Browser
src/scripts/pages/home/home-page.js - Home Presenter
src/scripts/pages/home/home-presenter.js - Story Creation
src/scripts/pages/story/story-page.js - Story Details
src/scripts/pages/detail/detail-page.js - UI Templates
src/scripts/templates.js - Story Map
src/scripts/utils/map.js - Photo Capture
src/scripts/utils/camera.js
Data and Offline
- Story API
src/scripts/data/api.js - IndexedDB Access
src/scripts/utils/indexed-db.js - Local Story Store
PWA Features
- Connectivity Status
src/scripts/utils/network-status.js - Startup and Sync
src/scripts/index.js - Worker Registration
src/scripts/utils/sw-register.js - Service Worker
src/public/sw.js - Browser Cache
- Install Support
src/scripts/utils/pwa-install.js
Other components
- User
- Stories Service
- Push Service
Connections 31
- 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