State App - Features & Capabilities Report

Template Version: 1.0.0 Generated: 2026-01-22 Package: @epicdm/flowstate-app-state App ID: state

Table of Contents

1. Overview
2. App Identity
3. Feature Categories
4. Capabilities
5. Data Models
6. User Workflows
7. Architecture Summary

Overview

Purpose

The State App is a product lifecycle state management application that provides wizard-driven data collection and dashboard visualization for eight key areas of product development. It enables teams to systematically capture and track business planning, product information, goals, design, development, deployment, support, and marketing configurations.

Target Users

Value Proposition

• Comprehensive Coverage: Eight sections covering the full product lifecycle
• Guided Data Collection: Wizard-driven setup with JSON Schema validation
• Progress Visibility: Track completion across all lifecycle phases
• Dashboard Insights: Visual summaries with metrics and charts
• Persistent Storage: Data saved to localStorage for session continuity

App Identity

Entry Points

Feature Categories

Category 1: Global Dashboard

Central overview of product lifecycle status

Feature: Product Lifecycle Dashboard

Description: Central dashboard providing an overview of all eight lifecycle sections with progress tracking, completion metrics, and quick navigation to incomplete sections.

User Story: As a product manager, I want to see the overall status of my product lifecycle so that I can track progress and identify incomplete areas.

Acceptance Criteria:

• [x] Display overall completion percentage
• [x] Show completed vs remaining sections count
• [x] Display summary cards for each section with key metrics
• [x] Provide "Continue Setup" navigation to next incomplete section
• [x] Visual progress bar for overall completion

Implementation:

Routes:

• /dashboard - Global dashboard (default route)

Category 2: Business Planning

Company foundation and strategy

Feature: Business Planning Wizard

Description: Multi-step wizard for capturing business planning information including company info, business type, and core values/mission.

User Story: As a business analyst, I want to capture company information so that I can establish the business foundation for product planning.

Acceptance Criteria:

• [x] Step 1: Company Info (name, founded year, size, industry)
• [x] Step 2: Business Type (B2B, B2C, B2B2C, Marketplace)
• [x] Step 3: Core Values & Mission Statement
• [x] Progress indicator showing current step
• [x] Data persistence across steps

Implementation:

Routes:

• /business-planning/setup - Wizard setup
• /business-planning/dashboard - Dashboard view

Category 3: Product Information

Product details and requirements

Feature: Product Info Wizard

Description: Wizard for capturing product details including name, description, requirements, and tech stack.

User Story: As a product manager, I want to define product information so that the team understands what we're building.

Acceptance Criteria:

• [x] Capture product name and description
• [x] Define requirements list with completion tracking
• [x] Specify technology stack
• [x] View requirements completion metrics

Implementation:

Routes:

• /product-info/setup - Wizard setup
• /product-info/dashboard - Dashboard view

Category 4: Goals & Objectives

Targets and key metrics

Feature: Product Goals Wizard

Description: Wizard for defining product goals, sales targets (monthly/quarterly/annual), and custom metrics with targets.

User Story: As a product manager, I want to set goals and metrics so that I can measure product success.

Acceptance Criteria:

• [x] Define multiple goals with targets and current values
• [x] Set sales targets at different time intervals
• [x] Define custom metrics with units and targets
• [x] View goal progress on dashboard

Implementation:

Routes:

• /product-goals/setup - Wizard setup
• /product-goals/dashboard - Dashboard view

Category 5: Design & Roadmap

Features and milestones

Feature: Product Design Wizard

Description: Wizard for defining product features (with priority and status) and milestones (with due dates).

User Story: As a product manager, I want to define features and milestones so that I can plan the product roadmap.

Acceptance Criteria:

• [x] Define features with name, priority, and status
• [x] Create milestones with names and due dates
• [x] Track feature completion status
• [x] View milestone timeline on dashboard

Implementation:

Routes:

• /product-design/setup - Wizard setup
• /product-design/dashboard - Dashboard view

Category 6: Development

Codebases and team configuration

Feature: Product Development Wizard

Description: Wizard for configuring codebases (with repository URLs), team members (with roles), and time tracking settings.

User Story: As a development lead, I want to configure the development setup so that the team can organize their work.

Acceptance Criteria:

• [x] Define codebases with names and repository URLs
• [x] Add team members with roles
• [x] Configure time tracking (enabled, track by codebase/task/both)
• [x] View team and codebase metrics on dashboard

Implementation:

Routes:

• /product-development/setup - Wizard setup
• /product-development/dashboard - Dashboard view

Category 7: Deployment

Environments and pipelines

Feature: Product Deployment Wizard

Description: Wizard for configuring deployment environments (with URLs), CI/CD pipelines, and monitoring tools.

User Story: As a DevOps engineer, I want to configure deployment settings so that I can manage infrastructure.

Acceptance Criteria:

• [x] Define environments with names and URLs
• [x] Create pipelines linked to codebases
• [x] Configure monitoring (enabled, tools list)
• [x] View environment and pipeline metrics on dashboard

Implementation:

Routes:

• /product-deployment/setup - Wizard setup
• /product-deployment/dashboard - Dashboard view

Category 8: Support

Customer support configuration

Feature: Product Support Wizard

Description: Wizard for configuring support channels, issue categories, and SLA response times by severity.

User Story: As a support team lead, I want to configure support settings so that I can manage customer service.

Acceptance Criteria:

• [x] Define support channels
• [x] Create issue categories
• [x] Set SLA times for critical/high/medium/low severity
• [x] View SLA metrics on dashboard

Implementation:

Routes:

• /product-support/setup - Wizard setup
• /product-support/dashboard - Dashboard view

Category 9: Marketing

Marketing channels and conversion goals

Feature: Product Marketing Wizard

Description: Wizard for configuring marketing channels (with types), conversion goals (with target rates), and analytics settings.

User Story: As a marketing team member, I want to configure marketing settings so that I can plan campaigns.

Acceptance Criteria:

• [x] Define channels with types (social, email, paid, organic)
• [x] Create conversion goals with target rates
• [x] Configure analytics provider and tracking ID
• [x] View marketing metrics on dashboard

Implementation:

Routes:

• /product-marketing/setup - Wizard setup
• /product-marketing/dashboard - Dashboard view

Category 10: Schema-Driven Wizards

Reusable wizard component system

Feature: SchemaWizard Component

Description: A reusable multi-step wizard component that renders forms from JSON Schema definitions with progress tracking and localStorage persistence.

User Story: As a developer, I want a reusable wizard component so that I can quickly create data collection flows.

Acceptance Criteria:

• [x] Render forms from JSON Schema definitions
• [x] Support multi-step navigation
• [x] Display progress indicator
• [x] Persist step data to localStorage
• [x] Custom widgets (text, textarea, select, checkbox, number, email, URL)
• [x] Custom templates (field, object, array, error list)

Implementation:

Category 11: Dashboard Components

Reusable dashboard visualization components

Feature: Dashboard Components

Description: Reusable dashboard components including layout, header, grid, and metric cards with trend indicators.

User Story: As a developer, I want reusable dashboard components so that I can quickly build section dashboards.

Acceptance Criteria:

• [x] DashboardLayout with section name
• [x] DashboardHeader with completion status and setup button
• [x] DashboardGrid for responsive card layout
• [x] MetricCard with title, value, subtitle, trend, and icon

Implementation:

Category 12: Chart Components

Data visualization with Recharts

Feature: Chart Components

Description: Reusable chart components built on Recharts for visualizing time series, comparisons, and distributions.

User Story: As a user, I want visual charts so that I can understand my data at a glance.

Acceptance Criteria:

• [x] Line chart for time series data
• [x] Bar chart for comparisons
• [x] Pie chart for distributions

Implementation:

Capabilities

Core Capabilities

Technical Capabilities

Integration Capabilities

Data Models

Section Data Types

Storage Structure

localStorage
├── state-business-planning      # BusinessPlanningData
├── state-business-planning-wizard  # Wizard state (transient)
├── state-product-info           # ProductInfoData
├── state-product-info-wizard    # Wizard state (transient)
├── state-product-goals          # ProductGoalsData
├── state-product-design         # ProductDesignData
├── state-product-development    # ProductDevelopmentData
├── state-product-deployment     # ProductDeploymentData
├── state-product-support        # ProductSupportData
└── state-product-marketing      # ProductMarketingData

Key Data Flows

User Action --> Wizard Step --> onChange --> useSectionData --> localStorage
                                                     |
                                                     v
Dashboard --> useSectionData --> localStorage --> Render Metrics

User Workflows

Workflow 1: Complete Business Planning Section

Set up company foundation

Trigger: Navigate to Business Planning from sidebar or Global Dashboard

Steps:

Success Outcome: Section marked complete with checkmark in sidebar Failure Handling: Validation errors shown, wizard state preserved

Workflow 2: Track Overall Progress

Monitor product lifecycle completion

Trigger: Navigate to Global Dashboard

Steps:

Success Outcome: Clear view of overall progress Failure Handling: N/A (read-only view)

Workflow 3: Edit Existing Section

Modify previously completed section

Trigger: Navigate to section dashboard

Steps:

Success Outcome: Section data updated Failure Handling: Previous data preserved if wizard abandoned

Architecture Summary

Directory Structure

src/
├── components/          # UI components
│   ├── charts/         # Recharts wrappers (3 files)
│   ├── dashboard/      # Dashboard components (5 files)
│   ├── layout/         # Layout components (3 files)
│   └── wizard/         # Wizard system (6 files)
├── hooks/              # Custom React hooks (3 files)
│   ├── useLocalStorage.ts
│   ├── useSectionData.ts
│   └── index.ts
├── schemas/            # JSON Schema definitions (9 files)
│   ├── business-planning.schema.ts
│   ├── product-info.schema.ts
│   ├── product-goals.schema.ts
│   ├── product-design.schema.ts
│   ├── product-development.schema.ts
│   ├── product-deployment.schema.ts
│   ├── product-support.schema.ts
│   ├── product-marketing.schema.ts
│   └── index.ts
├── pages/              # Page components (10 directories)
│   ├── global-dashboard/
│   ├── business-planning/
│   ├── product-info/
│   ├── product-goals/
│   ├── product-design/
│   ├── product-development/
│   ├── product-deployment/
│   ├── product-support/
│   └── product-marketing/
├── types/              # TypeScript definitions
├── db/                 # RxDB configuration (optional)
├── utils/              # Utility functions
├── App.tsx             # Main app with routing
├── plugin.ts           # FlowState plugin
├── standalone.tsx      # Standalone entry
└── index.ts            # Package export

Key Architectural Patterns

Hooks Overview

Schema Overview

Appendix

Related Documentation

Dependencies

Version History