{"id":30497583,"url":"https://github.com/cedmandocdoc/sx-product-manager","last_synced_at":"2025-08-25T03:12:34.520Z","repository":{"id":310335781,"uuid":"1039386020","full_name":"cedmandocdoc/sx-product-manager","owner":"cedmandocdoc","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-17T11:10:08.000Z","size":45,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-17T13:09:03.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cedmandocdoc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-17T05:28:45.000Z","updated_at":"2025-08-17T11:10:11.000Z","dependencies_parsed_at":"2025-08-17T13:09:08.622Z","dependency_job_id":"c3e5bce1-5f95-48b1-ac1a-97b59c71bd31","html_url":"https://github.com/cedmandocdoc/sx-product-manager","commit_stats":null,"previous_names":["cedmandocdoc/sx-product-manager"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/cedmandocdoc/sx-product-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedmandocdoc%2Fsx-product-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedmandocdoc%2Fsx-product-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedmandocdoc%2Fsx-product-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedmandocdoc%2Fsx-product-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedmandocdoc","download_url":"https://codeload.github.com/cedmandocdoc/sx-product-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedmandocdoc%2Fsx-product-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272001503,"owners_count":24856379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-25T03:12:31.509Z","updated_at":"2025-08-25T03:12:34.514Z","avatar_url":"https://github.com/cedmandocdoc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Product Manager (Remote App)\n\nA microfrontend remote application for managing products with real-time state synchronization capabilities.\n\n## Setup\n\n### Prerequisites\n\n- Node.js \u003e= 22.14.0 (use `nvm use` if you have nvm installed)\n- npm\n\n### Environment\n\nCopy `.env.sample` to `.env` and configure the following variables:\n\n- `VITE_PORT` - Port for the development server (default: 4001)\n\n### Running\n\n1. **Install dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n2. **Start the server:**\n\n   ```bash\n   npm start\n   ```\n\n3. **Access the application:**\n   Open http://localhost:4001 (or your custom VITE_PORT)\n\n**Full list of available building script**\n| Script | Command | Description |\n|-----------|---------------------|----------------------------------------------------------------|\n| `dev` | `npm run dev` | Start the development server with hot module replacement |\n| `start` | `npm start` | Run the application for production |\n| `build` | `npm run build` | Build the application for production deployment |\n| `preview` | `npm run preview` | Preview the production build locally before deployment |\n\n## Architecture\n\n### Dual Mode Operation\n\nThis application can operate in two modes:\n\n#### Standalone Mode\n\n- **Independent Operation**: Run as a complete product management application\n- **Full UI**: Includes all product management features (create, view, toggle status)\n- **Local State**: Manages its own state using React Context\n- **Direct Usage**: Access directly via browser for development and testing\n\n#### Microfrontend Mode\n\n- **Remote Integration**: Consumed by host applications via Module Federation\n- **Exposed Components**: Makes the main App component available to host apps\n- **State Broadcasting**: Communicates state changes via custom DOM events\n\n### State Propagation\n\nThe application uses **Custom DOM Events** to communicate state changes to host applications:\n\n#### Communication Events\n\nEvents follow the pattern: `sx-product-manager:{event-name}`\n\n**Dispatched Events:**\n\n- `sx-product-manager:product-added` - When a new product is created\n\n  ```javascript\n  {\n    detail: {\n      product: Product;\n    }\n  }\n  ```\n\n- `sx-product-manager:product-status-toggled` - When product status changes\n  ```javascript\n  {\n    detail: {\n      productId: string,\n      oldStatus: 'active' | 'inactive',\n      newStatus: 'active' | 'inactive'\n    }\n  }\n  ```\n\n#### Event Broadcasting\n\n- **Automatic**: Events are dispatched automatically on state changes\n- **Bubbling**: Events bubble up to the window level for cross-app communication\n- **Decoupled**: No direct dependencies on consuming applications\n\n### Module Federation\n\nUses **Module Federation** from Vite to expose components as remotely consumable modules:\n\n- **Exposed Module**: `./App` - Main application component\n- **Shared Dependencies**: React and React-DOM are shared with host applications\n- **Runtime Loading**: Components are loaded dynamically by host applications\n- **Independent Deployment**: Can be built and deployed separately from host apps\n\n### State Management\n\n- **React Context**: Uses ProductsContext for centralized state management\n- **Event-Driven Updates**: UI updates trigger custom event dispatch\n\n### Application Structure\n\n```\nsrc/\n├── components/\n│   ├── ProductForm.tsx          # Product creation form\n│   └── ProductTable.tsx         # Product listing and management\n├── contexts/\n│   └── ProductsContext.tsx      # State management context\n├── models/\n│   └── Product.ts               # Product data model definitions\n├── types/\n│   └── events.d.ts              # Custom event type definitions\n├── utils/\n│   └── dispatchCustomEvent.ts   # Custom event dispatching utility\n└── App.tsx                      # Main application component\n```\n\n### Key Features\n\n- **Product Management**: Create products with title, SKU, price, and status\n- **Status Toggle**: Switch products between active and inactive states\n\n## Testing\n\n### Available Test Scripts\n\n| Script            | Command                   | Description                               |\n| ----------------- | ------------------------- | ----------------------------------------- |\n| `test:e2e`        | `npm run test:e2e`        | Run all e2e tests in headless mode        |\n| `test:e2e:update` | `npm run test:e2e:update` | Run all e2e tests with updating snapshots |\n\n### Quick Start\n\n```bash\n# Install Playwright browsers (one-time setup)\nnpx playwright install\n\n# Run all tests\nnpm run test:e2e\n\n# Run all tests with update snapshots\nnpm run test:e2e:update\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedmandocdoc%2Fsx-product-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedmandocdoc%2Fsx-product-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedmandocdoc%2Fsx-product-manager/lists"}