mcpengine/servers/shopify/src/apps

Shopify MCP React Apps

✅ Complete: All 18 Apps Built

Each app follows the MANDATORY quality requirements:

Structure (4 files per app):

• index.html - Entry point
• main.tsx - React mount with ErrorBoundary + Suspense + LoadingSkeleton
• App.tsx - Main component with hooks (useDebounce, useToast, useTransition, useMemo) + stats cards + data grid + empty state
• styles.css - Dark theme with CSS vars, shimmer animation, toast notifications, responsive grid

Apps List:

1. product-catalog - Browse/search/filter products with images, variants, pricing
2. order-management - Order list with status filters, order details, fulfillment status
3. customer-directory - Customer list with search, customer details, order history
4. inventory-tracker - Inventory levels across locations, low stock alerts
5. collection-manager - Browse/manage collections, add/remove products
6. discount-dashboard - Active discounts, price rules, usage stats
7. fulfillment-center - Pending fulfillments, tracking, fulfillment workflow
8. shipping-manager - Shipping zones, rates, carrier services
9. theme-editor - Theme list, asset browser, preview
10. page-manager - CMS pages list, edit
11. blog-manager - Blog posts, articles, publishing
12. analytics-dashboard - Shop overview, recent events, key metrics
13. webhook-manager - Webhook subscriptions, delivery status
14. store-settings - Shop info, configuration overview
15. sales-dashboard - Revenue, orders over time, top products
16. returns-center - Refunds, returns tracking
17. marketing-hub - Discounts + collections overview for campaigns
18. variant-manager - Product variants, pricing, inventory per variant

Quality Features (in every app):

Hooks & Performance:

• ✅ useDebounce (300ms) for search inputs
• ✅ useToast for success/error notifications
• ✅ useTransition for non-blocking UI updates
• ✅ useMemo for filtered/computed data

UI Components:

• ✅ 4 stats cards with key metrics
• ✅ Data grid/table for main content
• ✅ Empty state when no results
• ✅ Mock data for demo/testing

Error Handling:

• ✅ ErrorBoundary class component with retry
• ✅ Suspense with loading skeleton
• ✅ React.lazy() for code splitting

Styling:

• ✅ Dark theme (--bg-primary: #0f172a, etc.)
• ✅ Skeleton shimmer animation
• ✅ Card hover effects (translateY + shadow)
• ✅ Toast slide-in animations
• ✅ Responsive grid (auto-fit minmax)
• ✅ Mobile breakpoints (768px, 480px)

TypeScript Note

The React apps show TypeScript errors in the server context because:

• They're standalone UI apps meant to be built separately
• React dependencies are not in the server's node_modules
• This is expected and correct behavior

Each app would be built independently with its own React build process (e.g., Vite, Create React App, Next.js, etc.)

File Count

• 18 apps × 4 files = 72 total files ✅
• All apps complete and following quality requirements