shopify-reference-architecture

# Shopify Reference Architecture ## Overview Production-ready architecture based on Shopify's official Remix app template. Covers project structure, session storage with Prisma, extension architecture, and the recommended app patterns. ## Prerequisites - Understanding of Remix framework basics - Shopify CLI 3.x installed - Familiarity with Prisma ORM ## Instructions ### Step 1: Official Project Structure (Remix Template) ``` my-shopify-app/ ├── app/ │ ├── routes/ │ │ ├── app._index.tsx # Main app dashboard │ │ ├── app.products.tsx # Product management page │ │ ├── app.settings.tsx # App settings │ │ ├── auth.$.tsx # OAuth catch-all route │ │ ├── auth.login/ │ │ │ └── route.tsx # Login page │ │ └── webhooks.tsx # Webhook handler │ ├── shopify.server.ts # Shopify API config (singleton) │ ├── db.server.ts # Database connection │ └── root.tsx ├── extensions/ │ ├── theme-app-extension/ # Theme blocks for Online Store │ │ ├── blocks/ │ │ │ └── product-rating.liquid │ │ └── locales/ │ ├── checkout-ui/ # Checkout UI extension │ └── product-discount/ # Shopify Function ├── prisma/ │ ├── schema.prisma # Database schema │ └── migrations/ ├── shopify.app.toml # App configuration ├── shopify.web.toml # Web process config ├── remix.config.js └── package.json ``` ###...