How mohd-owais-shah/for-practice-public works
This is a React Router template for an embedded Shopify app. A merchant enters through the login flow, then uses the authenticated app shell and its product-data demo; the demo creates a product, updates a variant, and upserts a metaobject through Shopify Admin GraphQL. The template also demonstrates additional app navigation and webhook handling for scope changes and uninstall cleanup. Session storage is configured through Prisma. Webhook and storage relationships are supported by the shown source; the additional page implementation was not sampled.
Main entry points: shopify.server.js Shopify app services · app._index.jsx Product demo action · app.jsx Embedded app shell · db.server.js Prisma client
Components 17
App interface
- Landing page
app/routes/_index/route.jsx - Embedded app shell
app/routes/app.jsx - Additional page
app/routes
Authentication
- Login route
app/routes/auth.login/route.jsx - Login validation
app/routes/auth.login/error.server.jsx - Auth fallback
app/routes/auth.$.jsx - Shopify app services
app/shopify.server.js
Shopify data
- Product demo action
app/routes/app._index.jsx - Product creation
app/routes/app._index.jsx - Variant update
app/routes/app._index.jsx - Metafield and metaobject
app/routes/app._index.jsx
Webhook handling
- Scope update webhook
app/routes/webhooks.app.scopes_update.jsx - Uninstall webhook
app/routes/webhooks.app.uninstalled.jsx
Session persistence
- Prisma client
app/db.server.js - Session storage
prisma/schema.prisma
Other components
- Merchant
- Shopify platform
Connections 27
- Merchant → Landing page: opens
app/routes/_index/route.jsx - Landing page → Login route: submits login
app/routes/_index/route.jsx - Landing page → Embedded app shell: redirects shop
app/routes/_index/route.jsx - Login route → Shopify app services: calls login
app/routes/auth.login/route.jsx - Login route → Login validation: formats errors
app/routes/auth.login/route.jsx - Shopify app services → Shopify platform: authenticates
app/shopify.server.js - Embedded app shell → Shopify app services: authenticates
app/routes/app.jsx - Embedded app shell → Additional page: links to
app/routes/app.jsx - Embedded app shell → Product demo action: renders outlet
app/routes/app.jsx - Product demo action → Shopify app services: authenticates
app/routes/app._index.jsx - Product demo action → Product creation: runs mutation
app/routes/app._index.jsx - Product demo action → Variant update: runs mutation
app/routes/app._index.jsx - Product demo action → Metafield and metaobject: runs mutations
app/routes/app._index.jsx - Product creation → Shopify platform: creates product
app/routes/app._index.jsx - Variant update → Shopify platform: updates variant
app/routes/app._index.jsx - Metafield and metaobject → Shopify platform: writes custom data
app/routes/app._index.jsx - Shopify platform → Scope update webhook: sends webhook
README.md - Shopify platform → Uninstall webhook: sends webhook
README.md - Scope update webhook → Shopify app services: authenticates webhook
app/routes/webhooks.app.scopes_update.jsx - Uninstall webhook → Shopify app services: authenticates webhook
app/routes/webhooks.app.uninstalled.jsx - Scope update webhook → Prisma client: updates session
app/routes/webhooks.app.scopes_update.jsx - Uninstall webhook → Prisma client: deletes sessions
app/routes/webhooks.app.uninstalled.jsx - Shopify app services → Prisma client: configures storage
app/shopify.server.js - Shopify app services → Session storage: uses session adapter
app/shopify.server.js - Prisma client → Session storage: persists sessions
README.md - Merchant → Auth fallback: authenticates
app/routes/auth.$.jsx - Auth fallback → Shopify app services: authenticates admin
app/routes/auth.$.jsx