CD Practices Dependency Visualization

Interactive web application to visualize Continuous Delivery practices and their dependencies based on MinimumCD.org.

Status

🎯 Project Overview

This application shows how different Continuous Delivery practices relate to and depend on each other, helping teams understand the path to achieving CD.

🚀 Quick Start (Local Development)

Prerequisites

• Node.js 22+ (Download)
• Git (Download)

1. Clone the Repository

git clone https://github.com/bdfinst/interactive-cd.git
cd interactive-cd

2. Install Dependencies

npm ci

3. Run Development Server

npm start

Open http://localhost:5173 in your browser.

4. Run Tests

# Run unit tests
npm test

# Run E2E tests
npm run test:e2e

See the Testing section for more test commands.

📊 Data Architecture

This application uses a file-based architecture for simplicity and performance:

• Data source: src/lib/data/cd-practices.json (46KB)
• Repository pattern: FilePracticeRepository.js for data access

Data Structure

{
  "practices": [
    {
      "id": "continuous-delivery",
      "name": "Continuous Delivery",
      "type": "root",
      "category": "practice",
      "description": "...",
      "requirements": [...],
      "benefits": [...]
    }
  ],
  "dependencies": [
    {
      "practice_id": "continuous-delivery",
      "depends_on_id": "continuous-integration"
    }
  ],
  "metadata": {
    "version": "1.5.0",
    "source": "MinimumCD.org"
  }
}

See docs/FILE-BASED-DATA.md for complete architecture documentation.

🎨 Technology Stack

Frontend

• SvelteKit
• Tailwind CSS

🧪 Testing

Unit Tests (Vitest)

# Run unit tests
npm test

# Watch mode
npm run test:watch

# With UI
npm run test:ui

End-to-End Tests (Playwright)

# Run E2E tests
npm run test:e2e

# Interactive UI mode
npm run test:e2e:ui

🎯 Development Practices

This project follows strict development practices documented in CLAUDE.md:

BDD → ATDD → TDD Workflow

1. BDD (Behavior-Driven Development) - Define features with Gherkin
2. ATDD (Acceptance Test-Driven Development) - Write acceptance tests
3. TDD (Test-Driven Development) - Write unit tests first, then code

Functional Programming Principles

• ✅ Pure Functions - No side effects, referentially transparent
• ✅ Immutability - Object.freeze() for all data structures
• ✅ Function Composition - Build complex operations from simple functions
• ✅ No Classes - Factory functions instead of ES6 classes
• ✅ Type Safety - Type markers (_type) for runtime type checking

🚀 Deployment

Netlify (Recommended)

The application is a static site and deploys easily to Netlify:

1. Connect Repository

   • Push to GitHub
   • Connect repository in Netlify dashboard

2. Configure Build

   • Build command: npm run build
   • Publish directory: build

3. Deploy

   • Deploys automatically

Manual Deployment

# Build the static site
npm run build

# Deploy the build/ directory to any static hosting provider

The build output is a fully static site that can be hosted anywhere (Netlify, Vercel, GitHub Pages, S3, etc.)

See docs/RELEASE-WORKFLOW.md for automated release process.

📖 Documentation

File	Description
CLAUDE.md	Development guidelines (BDD/TDD/FP)
docs/practices/	Comprehensive practices guide
docs/TESTING-GUIDE.md	Complete testing practices
docs/FILE-BASED-DATA.md	File-based architecture documentation
docs/RELEASE-WORKFLOW.md	Automated release process
docs/COMMIT-CONVENTIONS.md	Commit message format
docs/CONTRIBUTING.md	Contributor guidelines and Git workflow

🔧 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm test	Run unit tests
npm run test:e2e	Run E2E tests
npm run lint	Run ESLint

🤝 Contributing

This project is based on practices from MinimumCD.org and Bryan Finster's original CD dependency diagram fro 2015.

Code Style: Pure JavaScript (no TypeScript), Functional Programming (no classes), TDD/BDD approach, Conventional Commits

Adding practices: Edit src/lib/data/cd-practices.json and submit a pull request.

See docs/CONTRIBUTING.md and docs/COMMIT-CONVENTIONS.md for details.

📄 License

MIT

🔗 Resources

• MinimumCD.org
• 2015 Bryan Finster CD Dependency Tree