A comprehensive B2B SaaS customer health monitoring dashboard that demonstrates Document Driven Development (DDD) methodology through hands-on workshops. Built with modern React, TypeScript, and real-world API integrations.
This project serves as the primary example for Stillriver Software Solutions' Document Driven Development Workshop Series, delivered in partnership with ThisDot. Participants build a production-ready customer intelligence platform while learning to leverage AI for specification-driven code generation.
- ✅ Master DDD methodology - Specification-first development approach
- ✅ AI-assisted coding - Generate production code from detailed specifications
- ✅ Real-world integration - Connect to external APIs with proper error handling
- ✅ Business intelligence - Build meaningful customer health scoring algorithms
- ✅ Modern React patterns - Hooks, context, performance optimization
- ✅ Production readiness - Testing, security, deployment considerations
- Node.js 18+
- Basic React/TypeScript knowledge
# Clone the repository
git clone https://github.com/stillrivercode/customer-intelligence.git
cd customer-intelligence
# Run automated setup (installs dependencies, sets up workflows)
./install.sh
# No environment setup needed for basic functionality
# Start development server
npm run devThe Stillriver API is a public proxy service - no API key or registration needed. Just start the development server and begin building!
| Phase | Duration | Focus | Key Skills |
|---|---|---|---|
| Phase 1 | 30 min | Basic Dashboard | React components, mock data, localStorage |
| Phase 2 | 45 min | API Integration | Rate limiting, error handling, real data |
| Phase 3 | 45 min | Intelligence Layer | Health scoring, sentiment analysis, business logic |
| Phase 4 | 60 min | Advanced Features | Real-time updates, alerts, performance optimization |
- Workshop Guide - Complete workshop navigation
- Technical Overview - Architecture and setup details
- API Reference - Complete API integration guide
- Troubleshooting - Common issues and solutions
Core Widgets:
- Health Score Calculator - Multi-factor customer health assessment
- Market Intelligence Feed - Automated news monitoring with sentiment analysis
- Geographic Insights - Location-based business intelligence
- Engagement Optimizer - Communication timing and channel recommendations
Technical Stack:
- Frontend: React 18, TypeScript, Tailwind CSS
- Build Tool: Vite 6 with modern ES modules
- API Integration: Stillriver API (proxy for domain, news, geographic data)
- State Management: React Context with localStorage persistence
- Testing: Vitest with Happy DOM
- Code Quality: ESLint 9 (flat config), Prettier
Measurable Outcomes:
- 📊 Customer Health Scoring - Automated risk assessment
- 📰 Market Intelligence - Real-time company news analysis
- 🌍 Geographic Context - Location-based business insights
- 📞 Engagement Optimization - Data-driven communication strategies
- ⚡ Performance - Sub-2-second load times with intelligent caching
DDD transforms traditional development by putting specifications first:
- Write detailed specifications for each component
- Generate code using AI from these specifications
- Iterate and refine through testing and validation
- Scale efficiently with consistent patterns
For Developers:
- Learn cutting-edge AI-assisted development
- Master specification writing for better code quality
- Experience modern React and TypeScript patterns
- Build portfolio-worthy customer intelligence platform
For Organizations:
- Evaluate DDD methodology for team adoption
- Assess AI-powered development productivity gains
- Understand customer success platform architecture
- Pilot advanced development workflows
# Development
npm run dev # Start development server
npm run build # Production build
npm run preview # Preview production build
# Code Quality
npm run lint # ESLint checking
npm run lint:fix # Auto-fix linting issues
npm run format # Prettier formatting
npm run type-check # TypeScript validation
# Testing
npm run test # Run tests with Vitest
npm run test:ui # Visual test interface
npm run test:coverage # Coverage report
# Analysis
npm run analyze # Bundle size analysisTo enable AI-powered workflows (code reviews, etc.), configure these secrets in your repository settings:
OPENROUTER_API_KEY- Your API key from OpenRouter for AI code reviews- Required for the AI PR Review workflow to function
- Get your key at: https://openrouter.ai/keys
AI_MODEL- The AI model to use for reviews (defaults toanthropic/claude-3.5-sonnet)- Example values:
google/gemini-2.5-pro,openai/gpt-4-turbo - See available models at: https://openrouter.ai/models
- Example values:
- Go to your repository's Settings → Secrets and variables → Actions
- Add
OPENROUTER_API_KEYas a Repository Secret - (Optional) Add
AI_MODELas a Repository Variable
The AI PR Review workflow can be triggered manually:
- Add label:
ai-review-neededto any PR - Comment:
/reviewon any PR
- Customer Health Widget - Health scoring algorithm and implementation
- Market Intelligence Feed - News analysis and sentiment processing
- Geographic Insights - Location-based business intelligence
- Engagement Optimizer - Communication optimization algorithms
Each specification includes:
- Functional requirements and acceptance criteria
- Data sources and processing logic
- Visual design and user experience
- Performance requirements and optimization
- Testing strategies and validation
| Endpoint | Purpose | Dashboard Feature |
|---|---|---|
/whois |
Domain registration info | Company stability metrics |
/urllookup |
Website availability | Uptime monitoring |
/news |
Company news | Market intelligence |
/city |
Demographics | Location insights |
/timezone |
Time zone data | Communication optimization |
/holidays |
Holiday calendar | Engagement planning |
Features:
- Rate limiting (varies by endpoint: 100-1000 req/hour)
- Intelligent caching with dynamic TTL
- Built-in proxy layer for reliability
- Graceful error handling
- Offline mode support
- 90% complete Phase 1 & 2 (basic functionality)
- 80% complete Phase 3 (intelligence features)
- 60% attempt Phase 4 (advanced features)
- 4.5/5 average satisfaction rating
- < 2 seconds initial dashboard load time
- > 90% API integration success rate
- 100% health score calculation accuracy
- > 95% performance targets met
- CLI Tools Removed: This version focuses on the React application workshop experience
- API Simplified: Switched to Stillriver API - no API keys needed for workshop simplicity
- Setup Streamlined: Run
./install.shandnpm run devto get started immediately
For workshop participants: The setup is now even easier with zero configuration required!
Time Savings:
- Customer health reviews: 3 hours → 15 minutes
- Market research: 2 hours → automated
- Communication planning: 30 minutes → real-time
Risk Reduction:
- 20% improvement in churn prediction
- Early warning system for at-risk accounts
- Automated competitive intelligence
- Real-time Help: Instructor guidance throughout
- Comprehensive Docs: Step-by-step guides for each phase
- Code Examples: Working solutions provided
- Troubleshooting: Common issues documented with solutions
- Performance Guide: Optimization techniques
- API Documentation: Complete integration guide
- Best Practices: Modern React and TypeScript patterns
MIT License - Free for educational and commercial use.
This workshop is part of the Document Driven Development Series by Stillriver Software Solutions LLC, delivered in partnership with ThisDot. We specialize in AI-powered development methodologies that accelerate software delivery through specification-driven code generation.
Ready to experience the future of development?
git clone https://github.com/stillrivercode/customer-intelligence.git
cd customer-intelligence
./install.sh
npm run dev🎓 Start Your DDD Journey - Begin with the Workshop Guide