Diese Angular-19-Anwendung dient zur Verwaltung einer User Story Map mit lokalem Persistenzspeicher über IndexedDB (Dexie.js). Ziel ist es, User Journeys, User Steps, Issues (Mock-Daten) und Releases interaktiv zu verwalten – komplett offlinefähig, modern und performant.

Die Anwendung verwendet:

• Angular 19 mit standalone components
• Signal-basierter State
• Dexie.js für IndexedDB
• Drag & Drop zur Story-Zuordnung
• Dark Mode Switch
• Undo-Funktion
• Unit Tests (Jasmine/Karma)

• Node.js ≥ 18
• npm ≥ 9
• Angular CLI (global installiert):

  npm install -g @angular/cli

git clone https://github.com/payam2104/userStories.git
cd user-story-map

npm install

npm start

http://localhost:4200

• User Journeys als Spalten erstellen
• Steps unterhalb der Journeys anlegen
• Drag & Drop von GitLab Issues auf Steps
• Persistent über IndexedDB gespeichert

• 15 Issues werden initial angezeigt
• Zuordnung per Drag & Drop auf Steps
• „Nicht zugeordnet“-Spalte für offene Issues

• Releases erstellen (z. B. „Release Q3 2025“)
• Issues aus Steps Releases zuweisen
• Tabellarische Ansicht aller Releases + zugehörige Issues

• Undo Rückgängig-Funktion bei Verschieben/Löschen von Issues
• Dark Mode Theme-Umschalter für Light/Dark
• JSON Export und Import (JSON-Datei)
• Unit Tests Unit-Tests mit karma und jasmine (npm test)

npm test

src/
├── app/
│ ├── components/
│ ├── core/
│   ├── models/
│   ├── services/
│   ├── stores/
├── assets/
│   ├── data/
│     ├── json-dateien
├── styles/
├── styles.scss
└── main.ts

• Es werden keine NgModule verwendet (standalone: true)
• Styling erfolgt mit SCSS, keine Tailwind-Klassen
• Moderne Angular Syntax: @for, @if, signal(), computed()
• Das Drag & Drop System basiert auf dem Angular CDK und nutzt dessen abstrahierte Drag & Drop-Implementierung (basierend auf der HTML5-API).
• Lokale Datenhaltung über Dexie.js (IndexedDB Wrapper)

Payam Koushkbaghi