Skip to content

Add Product Documentation Website Implementation Plan#4

Draft
Eric-Flecher-Glean wants to merge 1 commit intomainfrom
add-product-docs-website-implementation-plan
Draft

Add Product Documentation Website Implementation Plan#4
Eric-Flecher-Glean wants to merge 1 commit intomainfrom
add-product-docs-website-implementation-plan

Conversation

@Eric-Flecher-Glean
Copy link
Owner

Description

This PR adds a comprehensive technical implementation plan for a test-driven simple website that lists product documentation from the Google Drive folder containing Medtronic product docs.

What's Included

  • Complete TDD Implementation Plan (demos/product-docs-website/IMPLEMENTATION_PLAN.md)
    • 10 detailed implementation phases with test cases for each phase
    • Technology stack: React + TypeScript + Vitest + Playwright
    • Google Drive API integration architecture
    • Component-by-component breakdown with comprehensive tests
    • CI/CD pipeline configuration with GitHub Actions
    • Security, performance, and accessibility considerations

Product Documentation Analyzed

Using Glean Document Reader, analyzed the Google Drive folder:
https://drive.google.com/drive/folders/1KuN_YhLOk4KTdORa0rdpG24hLyd4kjfP

Documentation Inventory:

  • 8+ Micra leadless pacemaker docs (VR2, AV2, MC1AVR1 models)
  • Coronary product catalog
  • Symplicity Spyral brochure
  • Product data files (CSV, markdown)
  • Total: 12+ documents across multiple product families

Key Features of the Plan

  1. Test-Driven Development Approach

    • Unit tests with Vitest + React Testing Library
    • E2E tests with Playwright
    • 80%+ code coverage target
    • Tests written before implementation for each component
  2. Architecture

    • React frontend with TypeScript
    • Google Drive API v3 integration
    • Document categorization by product family
    • Full-text search and filtering
    • Responsive design (mobile, tablet, desktop)
  3. Implementation Timeline (5 weeks)

    • Week 1: Project setup + Google Drive API integration
    • Week 2: Document list + search/filter components
    • Week 3: Category navigation + document preview
    • Week 4: Responsive design + performance optimization
    • Week 5: E2E testing + CI/CD + deployment
  4. Components with Test Coverage

    • DocumentList - displays all product docs with loading/error states
    • SearchFilter - search and filter by category/product family
    • CategorySidebar - navigate by document categories
    • DocumentPreview - view PDFs inline and download
    • GoogleDriveService - API integration with error handling

Tech Stack

  • Frontend: React 18, TypeScript, Vite
  • Styling: Tailwind CSS
  • Testing: Vitest, Playwright, Testing Library
  • API: Google Drive API v3 with service account
  • Deployment: Vercel/Netlify + GitHub Actions CI/CD

File Structure

demos/product-docs-website/
└── IMPLEMENTATION_PLAN.md  (745 lines, comprehensive plan)

Next Steps

This is a planning document only. Actual implementation would follow the TDD phases outlined in the plan, with each phase building upon the previous with full test coverage.

Testing

This PR adds documentation only (implementation plan). No code testing required.

The implementation plan itself includes:

  • 70+ test cases defined across all components
  • Unit test examples for all major components
  • E2E test scenarios with Playwright
  • Accessibility testing requirements
  • Performance testing criteria (Lighthouse scores, Web Vitals)

🤖 Generated by Glean Code Writer
📝 Chat link - https://app.glean.com/chat/593ef5f3e218438cbe47bec1b99745f9

This commit adds a comprehensive test-driven development (TDD)
implementation plan for a simple website that lists and provides
access to Medtronic product documentation stored in Google Drive.

The plan includes:
- Complete technology stack (React, TypeScript, Vitest, Playwright)
- Architecture overview with API integration for Google Drive
- Data model for product documents
- 10 TDD implementation phases covering:
  * Project setup and infrastructure
  * Google Drive API integration with tests
  * Document list, search, and filter components
  * Category navigation and document preview
  * Responsive design and accessibility
  * Performance optimization
  * E2E testing with Playwright
  * CI/CD pipeline with GitHub Actions
- File structure and project organization
- Security considerations and environment setup
- Success metrics and future enhancements
- 5-week estimated timeline

Product documentation inventory analyzed from:
https://drive.google.com/drive/folders/1KuN_YhLOk4KTdORa0rdpG24hLyd4kjfP

Includes documentation for Micra leadless pacemakers (VR2, AV2),
coronary products, and other cardiac devices.

Generated by Glean Code Writer
@Eric-Flecher-Glean Eric-Flecher-Glean added the glean-code-writer Modified by Glean Code Writer label Jan 12, 2026 — with glean-github-app-oauth
Eric-Flecher-Glean pushed a commit that referenced this pull request Jan 12, 2026
This commit implements the first story of work from the implementation
plan: a fully test-driven Express.js backend API for serving Medtronic
product documentation metadata.

## What's Implemented

### Data Layer
- Created docs-data/docs.json with 12 product documents:
  * 8 Micra leadless pacemaker documents (VR2, AV2, MC1AVR1)
  * 1 Coronary product catalog
  * 1 Symplicity Spyral hypertension treatment brochure
  * 2 reference data files (CSV catalog, data dictionary)

### Backend API (Test-Driven Development)
- Express.js + TypeScript with strict mode
- RESTful API with two endpoints:
  * GET /api/docs - List/filter all documents
  * GET /api/docs/:id - Get single document by ID
- CORS enabled for frontend integration
- In-memory caching for performance

### Service Layer (src/services/docsService.ts)
- getAllDocs() - Returns sorted documents (by order, then title)
- findDocById() - Finds document by ID
- filterDocs() - Filters by category and/or search query
  * Case-insensitive search
  * Searches across title, category, product_family, tags
  * AND logic for combined filters

### Test Coverage (TDD)
- 22 comprehensive tests covering:
  * Service layer (docsService.test.ts)
    - Document loading and caching
    - Sorting algorithms
    - Filter logic (category, search, combined)
    - Edge cases (empty queries, non-existent IDs)
    - Case-insensitive search
  * API layer (docsRoutes.test.ts)
    - HTTP status codes (200, 404)
    - Query parameter handling
    - Response structure validation
    - CORS headers
    - Error responses

### Configuration
- TypeScript strict mode (tsconfig.json)
- Jest test framework (jest.config.cjs)
- Package.json with dev/test/build scripts
- .gitignore for Node.js projects

### Documentation
- Main README with project overview
- Backend README with API documentation
- API endpoint examples with curl commands
- Development and testing instructions

## File Structure

```
demos/product-docs-website/
├── README.md                           # Main project documentation
├── docs-data/
│   └── docs.json                       # 12 product documents
└── backend/
    ├── README.md                       # Backend API documentation
    ├── package.json
    ├── tsconfig.json
    ├── jest.config.cjs
    ├── .gitignore
    ├── src/
    │   ├── index.ts                    # Express app
    │   ├── server.ts                   # HTTP server
    │   ├── routes/
    │   │   └── docs.ts                 # Document routes
    │   ├── services/
    │   │   └── docsService.ts          # Data access layer
    │   └── types/
    │       └── Doc.ts                  # TypeScript interfaces
    └── test/
        ├── docsService.test.ts         # Service tests
        └── docsRoutes.test.ts          # API integration tests
```

## Testing

All tests pass:
- Service layer: 15 tests
- API layer: 7 tests
- Total: 22 tests
- Aiming for 80%+ coverage

## Next Steps

- Phase 2: Frontend implementation (React + Vite)
- Phase 3: E2E testing and deployment

## Related

- Implementation plan: demos/product-docs-website/IMPLEMENTATION_PLAN.md
- PR #4: Technical implementation plan

Generated by Glean Code Writer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

glean-code-writer Modified by Glean Code Writer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants