Workflow: Inspecting Product Lifecycle State

Overview

This guide walks you through inspecting your product lifecycle state across all sections, identifying gaps, and understanding your overall progress.

Time Required: 5-10 minutes Skill Level: Beginner

Prerequisites

• Access to State App
• At least one section partially or fully completed
• Understanding of the eight lifecycle sections

Steps

Step 1: Open the Global Dashboard

Navigate to the main dashboard to get an overview of your entire product lifecycle.

1. Open State App from the FlowState launcher
2. Click Dashboard in the sidebar navigation (or navigate to /state/dashboard)

The Global Dashboard displays:

• Overall completion percentage
• Progress bar visualization
• Completed vs remaining section count
• Summary cards for each section

Step 2: Review Overall Progress

Examine the progress indicators at the top of the dashboard.

+------------------------------------------+
|  Product Lifecycle Progress              |
|  =============================           |
|  [##########..........] 37.5%            |
|  3 of 8 sections complete                |
+------------------------------------------+

Key metrics to note:

• Completion Percentage - Shows progress toward full lifecycle documentation
• Section Count - Completed sections vs total sections (8)
• Continue Setup Button - Quick link to next incomplete section

Step 3: Inspect Section Summary Cards

Each section has a summary card showing its current state.

Review each card to understand:

• Which sections are complete
• What key data exists in each section
• Which sections need attention

Step 4: Drill Into a Specific Section

For detailed inspection, navigate to an individual section's dashboard.

1. Click on a section name in the sidebar, OR
2. Click the Dashboard link on a summary card

Each section dashboard provides:

• Detailed metrics specific to that area
• Charts visualizing your data
• Quick access to edit via the Setup button

Example: Business Planning Dashboard

+------------------------------------------+
|  Business Planning Dashboard              |
+------------------------------------------+
|  Company: Acme Corp                       |
|  Founded: 2020                            |
|  Size: 50-100 employees                   |
|  Industry: Technology                     |
|                                           |
|  Business Type: B2B                       |
|                                           |
|  Core Values: 4 defined                   |
|  Mission Statement: Set                   |
+------------------------------------------+

Step 5: Inspect Raw Data (Advanced)

For technical inspection, access the raw localStorage data.

1. Open browser Developer Tools (F12)
2. Navigate to Console tab
3. Run the inspection commands below

View all State App data:

// List all State App storage keys
Object.keys(localStorage).filter(k => k.startsWith('state-'));

Inspect a specific section:

// View Business Planning data
const data = JSON.parse(localStorage.getItem('state-business-planning'));
console.log(data);

Check completion status:

// Check if a section is complete (has completedAt timestamp)
const data = JSON.parse(localStorage.getItem('state-product-info'));
console.log('Complete:', !!data?.completedAt);
console.log('Completed at:', data?.completedAt);

View all sections with status:

// Get status of all sections
const sections = [
  'business-planning', 'product-info', 'product-goals',
  'product-design', 'product-development', 'product-deployment',
  'product-support', 'product-marketing'
];

sections.forEach(section => {
  const key = `state-${section}`;
  const data = localStorage.getItem(key);
  const parsed = data ? JSON.parse(data) : null;
  console.log(`${section}: ${parsed?.completedAt ? 'Complete' : 'Incomplete'}`);
});

Step 6: Identify Gaps and Next Steps

Based on your inspection, identify what needs attention.

1. Incomplete sections - Use Continue Setup to fill in missing data
2. Missing metrics - Return to Setup to add required information
3. Outdated information - Edit sections to update with current data

Create an action plan:

Expected Results

After completing this workflow, you should have:

• Clear understanding of overall lifecycle completion
• Knowledge of which sections are complete/incomplete
• Insight into the data stored in each section
• Action plan for filling gaps

Troubleshooting

Issue: Dashboard shows 0% but I completed sections

Solution: Ensure you clicked Complete on the final step of each wizard. Navigate back to the section, go through the wizard, and click Complete.

Issue: Section shows complete but data is wrong

Solution: The section may have been completed with placeholder data. Click Setup to edit the section and update with correct information.

Issue: Can't see localStorage data

Solution: Ensure you're on the correct domain and not in private browsing mode. Some browsers restrict localStorage access in certain contexts.

Related Workflows

• Getting Started - Initial setup guide
• Troubleshooting - Common issues and solutions