StackPrism
Commerce and marketplaces

Tech stack for a Shopify app (2026)

Product bundles app for Shopify, designed by StackPrism from one sentence: 12 components, a reason for each, and the live checks that watch them.

The stack

  • Next.js
  • Node.js
  • Inngest
  • PostgreSQL
  • Shopify
  • Sentry
ShopifyE-commerceEmbedded appUpdated
The idea someone typed
“A Shopify app that lets merchants create product bundles and volume discounts: an admin embedded in the Shopify admin, a widget on the storefront, discounts applied at checkout, and billing through Shopify.”

Make it yours. Open this stack in the editor to check its health, harden it and hand it to your coding agent. No sign-up, nothing to generate.

Start from this stack
goes down

Select a component to see what it does and what it connects to, or pick one above to see what breaks if it goes down. Pinch or use the buttons to zoom.

Why this stack

Merchants install the app through Shopify OAuth and manage bundles in an admin UI that runs inside the Shopify admin through App Bridge. That admin and the storefront widget, a theme app extension on the merchant’s store, both call a Node.js API on Vercel. The API keeps bundle rules in PostgreSQL, syncs products and discounts with the Shopify Admin API, reads storefront data through the Storefront API and has Shopify apply the discounts at checkout. Merchants pay through the Shopify Billing API, Inngest runs background jobs and Sentry reports errors.

Why each piece

All 12 components on the diagram: what each one does, what it talks to, and what stops if it goes down.

  1. Storefront Widget

    Theme app extension. Calls Node.js API (fetches).

    Nothing else on the diagram depends on it.

  2. Embedded Admin UI

    In Vercel

    Next.js React app. Calls Node.js API and Shopify App Bridge (renders).

    Nothing else on the diagram depends on it.

  3. Node.js API

    In Vercel

    Shopify app backend. Calls PostgreSQL (reads/writes), Inngest (triggers), Sentry (reports), Shopify Admin API (syncs), Shopify Storefront API (reads), Shopify Checkout (applies), Shopify OAuth (authenticates) and Shopify Billing API (manages). Called by Embedded Admin UI and Storefront Widget (fetches).

    If it goes down, 2 of 11 components stop working.

  4. Inngest

    In Vercel

    Async jobs. Called by Node.js API (triggers).

    If it goes down, 1 of 11 components degrades.

  5. PostgreSQL

    Supabase hosted. Called by Node.js API (reads/writes).

    If it goes down, 3 of 11 components stop working.

  6. Shopify OAuth

    In External Services

    Merchant login. Called by Node.js API (authenticates).

    If it goes down, 3 of 11 components stop working.

  7. Shopify Checkout

    In External Services

    Discount application. Called by Node.js API (applies).

    If it goes down, 1 of 11 components degrades.

  8. Shopify Admin API

    In External Services

    Catalog and discounts. Called by Node.js API (syncs).

    If it goes down, 1 of 11 components degrades.

  9. Shopify Storefront API

    In External Services

    Storefront data. Called by Node.js API (reads).

    If it goes down, 1 of 11 components degrades.

  10. Shopify Billing API

    In External Services

    Subscription billing. Called by Node.js API (manages).

    If it goes down, 1 of 11 components degrades.

  11. Shopify App Bridge

    In External Services

    Embedded app runtime. Called by Embedded Admin UI (renders).

    If it goes down, 1 of 11 components degrades.

  12. Sentry

    In External Services

    Error tracking. Called by Node.js API (reports).

    If it goes down, 1 of 11 components degrades.

When this stack fits

  • Merchants manage everything without leaving the Shopify admin.
  • Charges should appear on the merchant’s Shopify bill rather than a separate card form.
  • Bundle rules need their own database, beyond what Shopify stores.

When to pick something else

  • Your logic has to run inside checkout itself: that’s Shopify Functions, which this diagram doesn’t show.
  • The discounts are simple and for one store: Shopify’s built-in automatic discounts may be enough.

What you need to build this

12 components across 6 areas of the stack.

Build it with your AI agent

Hand the stack to Claude Code, Codex, Cursor or any coding agent as a brief: how it connects, install steps and a build plan.

Frontend2

  • Embedded Admin UI · Next.js

    Next.js React app

    npm install next

    Docs

  • Storefront Widget

    Theme app extension

Backend & APIs5

  • Node.js API

    Shopify app backend

    Docs

  • Inngest

    Async jobs

  • Shopify Admin API

    Catalog and discounts

    Docs

  • Shopify Storefront API

    Storefront data

    Docs

  • Shopify App Bridge

    Embedded app runtime

    Docs

Data1

  • PostgreSQL

    Supabase hosted

    Docs

Auth1

  • Shopify OAuth

    Merchant login

    Docs

Payments2

  • Shopify Checkout

    Discount application

    Docs

  • Shopify Billing API

    Subscription billing

    Docs

Observability1

  • Sentry

    Error tracking

    npm install @sentry/nextjs

    Docs

Install

npm install next @sentry/nextjs

SDKs only. Pick your own database driver or ORM.

See all 30 example stacks