docuseal/docs/backlog/KANBAN_README.md

FloDoc Stories Kanban Board

🎯 Overview

The Kanban Board is an interactive story management tool that allows you to visually organize and track all 42 FloDoc user stories across 5 workflow columns.

📊 Columns

Column	Color	Purpose
Backlog	Gray	Stories not yet started
To Do	Yellow	Stories ready to be worked on
In Progress	Blue	Stories currently being developed
Review	Red	Stories awaiting QA/review
Done	Green	Completed stories

🎨 Features

Core Functionality

• ✅ Drag & Drop: Move stories between columns by dragging
• ✅ State Persistence: Your board state is saved automatically in browser storage
• ✅ Search: Find stories by number, title, epic, or content
• ✅ Story Details: Click "View" to see full story information in a modal
• ✅ Quick Actions: Move stories to next column with one click
• ✅ Progress Tracking: Real-time statistics showing total and completed stories

Design

• ✅ FloDoc Design System: Purple (#784DC7) theme
• ✅ Visual Indicators: Priority badges, effort tags, epic names
• ✅ Responsive: Works on desktop and tablet
• ✅ Keyboard Friendly: Escape to close modals

🚀 How to Use

Opening the Board

cd docs/backlog
xdg-open stories-kanban.html

Basic Operations

1. View a Story: Click the "View" button on any card
2. Move a Story: Drag a card to a different column
3. Quick Move: Click the "→" button to move to the next column
4. Search: Type in the search box to filter stories
5. Save: Click "Save" to persist your current board state
6. Reset: Click "Reset" to move all stories back to Backlog

Workflow Example

Backlog → To Do → In Progress → Review → Done

1. Start with all stories in Backlog
2. Move stories to To Do when planning Sprint 1
3. Drag to In Progress when development starts
4. Move to Review when ready for QA
5. Complete by moving to Done

💾 Data Persistence

• Automatic Save: Board state saves to browser localStorage after each change
• Manual Save: Use the "Save" button to explicitly save
• Reset: Use "Reset" to clear all progress and start fresh
• No Server Required: All data stays in your browser

🎨 Design System

The Kanban board follows the FloDoc design system:

• Primary Color: #784DC7 (Purple)
• Column Colors: Match FloDoc status indicators
• Typography: Segoe UI / System fonts
• Shadows: Subtle elevation with purple tint
• Radius: 7.5px for cards, 12px for columns

📱 Responsive Design

• Desktop: Full 5-column layout
• Tablet: Scrollable horizontal board
• Mobile: Optimized for touch interactions

🎯 Use Cases

Sprint Planning

1. Move stories from Backlog to To Do
2. Prioritize within To Do column
3. Start development by moving to In Progress

Daily Standups

1. Review In Progress column
2. Move completed work to Review
3. Discuss blockers visually

Sprint Review

1. Filter by Done column
2. Review all completed stories
3. Generate summary from completed work

Backlog Grooming

1. Search for specific stories
2. View details to understand requirements
3. Reorganize based on new priorities

🔧 Technical Details

Storage

• Key: flodoc-kanban-state
• Format: JSON object mapping story numbers to column IDs
• Example: {"1.1": "done", "1.2": "progress", ...}

State Structure

{
  "1.1": "backlog",
  "1.2": "todo",
  "1.3": "progress",
  "2.1": "review",
  "2.2": "done"
}

Events

• dragstart: Story picked up
• dragover: Hovering over column
• drop: Story dropped in column
• click: View story details

📚 Related Files

• stories-kanban.html - The Kanban board application
• stories-viewer-enhanced.html - Alternative viewer with navigation
• stories-presentation.html - Original full-screen slides
• STORIES_SUMMARY.md - Quick story reference
• STORIES_INDEX.md - Complete story index

🚀 Deployment

Local Development

python3 -m http.server 8000
# Access: http://localhost:8000/stories-kanban.html

GitHub Pages

1. Push to GitHub repository
2. Enable GitHub Pages
3. Access: https://username.github.io/repo/stories-kanban.html

Netlify

1. Drag stories-kanban.html to Netlify Drop
2. Get instant URL
3. Share with team

CodePen

1. Copy HTML content
2. Paste into CodePen
3. Save and share link

🎯 Tips

1. Use with Team: Share your screen during planning meetings
2. Save Frequently: Click Save before closing browser
3. Search First: Use search to find stories quickly
4. Keyboard Shortcuts: Use Escape to close modals
5. Mobile Friendly: Works great on tablets for standups

🐛 Troubleshooting

Stories not dragging?

• Ensure you're dragging the card body, not buttons
• Try refreshing the page

State not saving?

• Check browser localStorage is enabled
• Try manual Save button

Search not working?

• Clear search box to show all stories
• Check for typos

Modal won't close?

• Click outside the modal
• Press Escape key

---

Generated: 2026-01-15 Stories: 42 Columns: 5 File Size: 130KB