# 🛍 Shopify Webhook Product Viewer

A Node.js + Express application that listens to Shopify product update webhooks, verifies webhook authenticity using HMAC, fetches product metafields via Shopify Admin API, and displays structured product data in a clean UI dashboard instead of raw JSON.

## 🚀 Features

- Shopify webhook HMAC verification
- Real-time product update handling
- Fetch product metafields using Shopify Admin API
- Displays product details including:
  - Title
  - Description
  - Vendor
  - Tags
  - Variants (price, SKU, inventory)
  - Custom metafields
- Clean browser-based UI dashboard
- Environment-based configuration using `.env`
- Beginner-friendly and interview-ready project

## 🧰 Tech Stack

- Node.js
- Express.js
- Shopify Admin API
- Crypto (HMAC verification)
- node-fetch
- dotenv

## ⚙️ Setup & Installation

```bash
git clone <your-repo-url>
cd spgetter
npm install

📦 Environment Variables

Create a .env file in the root directory:

PORT=3000
SHOPIFY_STORE=your-store.myshopify.com
SHOPIFY_ADMIN_API_TOKEN=your_admin_api_token
SHOPIFY_WEBHOOK_SECRET=your_webhook_secret

▶️ Run the Project

node app.js

Server will run at:

http://localhost:3000

🔗 Webhook Configuration

Webhook endpoint:

POST /webhooks/product-update

For local testing, expose your server using ngrok:

ngrok http 3000

Use the generated HTTPS URL in Shopify webhook settings.

🧪 How It Works

1. Shopify sends a product update webhook
2. Server verifies request using HMAC signature
3. Product data is extracted from the webhook payload
4. Metafields are fetched using Shopify Admin API
5. Data is stored in memory
6. UI dashboard displays the latest product in a structured format

🖥 UI Access

Open in browser:

http://localhost:3000

The UI displays:

• Product title, vendor, description

• Variants with price, SKU, and stock

• Custom metafields such as:

  • custom.product_name
  • custom.collection
  • custom.gender
  • custom.limited_edition
  • custom.features_1

⚠️ Notes

• Ensure metafields are created and assigned in Shopify admin

• Webhook must be properly configured in Shopify

• Use ngrok for local development

• API token must include:

  • read_products
  • read_metafields

🎯 Use Cases

• Shopify webhook integration learning
• Backend API + webhook handling practice
• QA / SQA testing scenarios
• Real-time product monitoring system
• Portfolio / interview project

👨‍💻 Author

Shehroz fazal(SQA)