Skip to content

Implement product docs backend API (Stories 1 & 2)#6

Draft
Eric-Flecher-Glean wants to merge 4 commits intomainfrom
product-docs-backend-implementation
Draft

Implement product docs backend API (Stories 1 & 2)#6
Eric-Flecher-Glean wants to merge 4 commits intomainfrom
product-docs-backend-implementation

Conversation

@Eric-Flecher-Glean
Copy link
Owner

Description

This PR implements the first two stories from the technical implementation plan for a test-driven product documentation listing site.

Story 1: Data Layer & Service Logic ✅

  • Created static JSON data store (docs-data/docs.json) with Medtronic product documentation metadata (8 products across 5 categories)
  • Implemented TypeScript type definitions (Doc interface)
  • Built document service (docsService.ts) with data access and filtering:
    • getAllDocs() - returns all documents sorted by order then title
    • findDocById(id) - retrieves single document by ID
    • filterDocs(query) - filters by search query and/or category (case-insensitive)
  • Added comprehensive unit tests (11 tests covering sorting, retrieval, and filtering edge cases)

Story 2: Express REST API ✅

  • Implemented Express API with two endpoints:
    • GET /api/docs - list all docs with optional filtering via query params (?q=search&category=Micra)
    • GET /api/docs/:id - get single document by ID (returns 404 if not found)
  • Added CORS support for frontend integration
  • Separated Express app from HTTP server for testability
  • Created integration tests using Supertest (8 tests covering all endpoints and query combinations)

Files Added

  • demo/product-docs-site/README.md - Documentation for the project
  • demo/product-docs-site/docs-data/docs.json - Product metadata (8 documents)
  • demo/product-docs-site/backend/ - Complete TypeScript backend with Node.js + Express
    • src/types/Doc.ts - Shared TypeScript interface
    • src/services/docsService.ts - Data access layer (60 lines)
    • src/routes/docs.ts - Express routes (20 lines)
    • src/index.ts - Express app setup (10 lines)
    • src/server.ts - HTTP server bootstrap (10 lines)
    • test/docsService.test.ts - Service unit tests (120 lines, 11 tests)
    • test/docsRoutes.test.ts - API integration tests (100 lines, 8 tests)
    • Configuration files: package.json, tsconfig.json, jest.config.cjs, .gitignore

Testing

Test Results

All 19 tests passing (ran via npm test in demo/product-docs-site/backend/):

PASS test/docsService.test.ts
PASS test/docsRoutes.test.ts

Test Suites: 2 passed, 2 total
Tests:       19 passed, 19 total
Time:        2.574 s

Test Coverage

  • ✅ Service layer unit tests (11 tests):

    • Document sorting by order and title
    • Document retrieval by ID (found and not found cases)
    • Filtering with no query (returns all)
    • Case-insensitive category filtering
    • Search query filtering across title, tags, category, product_family
    • Combined category + query filters (AND logic)
    • Empty results for non-matching queries
  • ✅ API route integration tests (8 tests):

    • GET /api/docs returns 200 and array of documents
    • Document structure validation
    • Query parameter filtering (?q=Micra)
    • Category parameter filtering (?category=Micra)
    • Combined filters (?q=technical&category=Micra)
    • Empty array for no matches
    • GET /api/docs/:id returns 200 for valid ID
    • GET /api/docs/:id returns 404 for invalid ID

Manual Testing

Backend server can be started with:

cd demo/product-docs-site/backend
npm install
npm run dev  # Starts on http://localhost:4000

API examples:

curl http://localhost:4000/api/docs
curl http://localhost:4000/api/docs?q=Micra
curl http://localhost:4000/api/docs?category=Micra
curl http://localhost:4000/api/docs/micra-vr2-technical-specifications

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

This commit implements the first two stories from the technical implementation
plan for a test-driven product documentation listing site:

Story 1: Data Layer & Service Logic
- Created static JSON data store (docs-data/docs.json) with Medtronic product
  documentation metadata
- Implemented TypeScript type definitions (Doc interface)
- Built document service with filtering and search capabilities:
  - getAllDocs(): Returns all documents sorted by order then title
  - findDocById(id): Retrieves single document by ID
  - filterDocs(query): Filters by search query and/or category
- Added comprehensive unit tests (11 tests, all passing)

Story 2: Express REST API
- Implemented Express API endpoints:
  - GET /api/docs - List all docs with optional filtering via query params
  - GET /api/docs/:id - Get single document by ID
- Added CORS support for frontend integration
- Created integration tests using Supertest (8 tests, all passing)
- Separated app definition from server bootstrap for testability

Test Results:
- All 19 tests passing (11 service + 8 API tests)
- Test coverage includes:
  - Document sorting and retrieval
  - Case-insensitive filtering by category
  - Search query filtering across title, tags, and metadata
  - Combined filter logic (AND operation)
  - HTTP status codes and error handling

Project Structure:
- docs-data/docs.json - Product documentation metadata
- backend/src/types/Doc.ts - TypeScript interface
- backend/src/services/docsService.ts - Data access layer
- backend/src/routes/docs.ts - Express routes
- backend/src/index.ts - Express app setup
- backend/src/server.ts - HTTP server bootstrap
- backend/test/ - Unit and integration tests
- backend/package.json - Dependencies and scripts

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
glean-code-writer and others added 3 commits January 12, 2026 15:23
This commit implements Story 3 from the implementation plan: a complete
React frontend with components and comprehensive tests.

Frontend Implementation:
- React + TypeScript + Vite setup with proper configuration
- Component architecture:
  - FiltersBar: Search input and category dropdown for filtering
  - DocCard: Individual document display with PDF link
  - DocsList: Renders list of DocCard or empty state message
  - App: Main component with API integration and state management
- API integration:
  - Fetches docs from /api/docs on mount
  - Filters by search query and category via URL params
  - Vite proxy configured to backend at http://localhost:4000
- Styling: Inline styles with clean, modern UI

Test Implementation:
- Vitest + React Testing Library setup
- Component tests:
  - FiltersBar.test.tsx (4 tests): User interactions, callbacks
  - DocsList.test.tsx (4 tests): Rendering logic, empty state
  - App.test.tsx (7 tests): Mocked fetch, API integration, filtering
- All 15 tests passing

Test Results:
✅ FiltersBar: 4/4 tests passing
✅ DocsList: 4/4 tests passing
✅ App: 7/7 tests passing
✅ Total: 15/15 tests passing

Files Added:
- frontend/package.json - Dependencies and scripts
- frontend/vite.config.ts - Vite config with API proxy
- frontend/src/App.tsx - Main app component
- frontend/src/main.tsx - Entry point
- frontend/src/components/*.tsx - React components
- frontend/src/tests/*.test.tsx - Component tests
- frontend/src/types/Doc.ts - TypeScript interface
- Configuration: tsconfig.json, .gitignore, index.html

How to Run:
cd demo/product-docs-site/frontend
npm install
npm test              # Run all tests
npm run dev           # Start dev server on http://localhost:5173

Full Stack Demo Now Complete:
- Backend API: Node.js + Express + Jest (19 tests passing)
- Frontend: React + Vite + Vitest (15 tests passing)
- Total: 34 tests passing across the stack

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