Claude PM Portfolio Manager

A React-based dashboard for monitoring and managing projects within the Claude PM framework.

🚀 Live Dashboard

• Production: GitHub Pages Deployment
• Status: Automatically deployed from main branch

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Features

• 📊 Dashboard Overview: Real-time project health and metrics
• 📁 Project Management: Browse and monitor Claude PM projects
• 🎫 Ticket Integration: TrackDown ticket tracking and management
• 📈 Analytics: Performance metrics and progress tracking
• 🔗 Git Integration: Commit activity and branch monitoring

Development

Prerequisites

• Node.js >= 16
• npm >= 8

Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run test         # Run tests
npm run check        # Run Biome linting and formatting
npm run type-check   # TypeScript type checking
npm run ci           # Run complete CI pipeline locally

🔄 Local CI/CD Pipeline

Local Development with Auto-Deployment

# Start complete local CI/CD pipeline
npm run local:start

# Or run individual components
npm run local:dev          # Dev server + file watching + tests
npm run local:prod         # Production build + serve + monitoring
npm run health:monitor     # Health monitoring only

Automated Local Workflows

• File Watching: Auto-reload on code changes
• Test Monitoring: Tests run automatically on changes
• Data Watching: Monitors Claude PM TrackDown files for updates
• Health Monitoring: Checks dashboard health every 30 seconds
• Build Validation: TypeScript and test validation before start

Features

• Live Reload: Dashboard updates instantly when code changes
• Test Automation: Tests run in watch mode during development
• Health Logs: Monitoring data saved to logs/health.log
• Data Integration: Watches ~/Projects/Claude-PM/ for TrackDown changes
• Performance Tracking: Response time monitoring

Project Structure

src/
├── components/      # React components
├── hooks/          # Custom hooks
├── services/       # API services
├── stores/         # State management
├── types/          # TypeScript types
└── utils/          # Utility functions

Configuration

This project integrates with the Claude PM framework by:

• Reading projects from ~/Projects/managed/
• Parsing TrackDown tickets from ~/Projects/Claude-PM/trackdown/
• Monitoring CLAUDE.md compliance
• Tracking milestone progress (M01_, M02_, etc.)

Technology Stack

• React 18 with TypeScript
• Vite for fast development and building
• Tailwind CSS for styling
• React Query for data fetching
• Zustand for state management
• Biome for code quality

License

MIT