Architecture Overview

Store Shield is a Shopify app that protects online stores from various threats including content theft, bots, spy tools, and fraud. This document provides a high-level view of how the system is designed.

Tech Stack

Layer	Technology
Frontend	React Router 7 (Remix) + Shopify Polaris
Backend	Remix server on Fly.io
Edge Processing	Cloudflare Workers
Real-time Database	Cloudflare D1 (SQLite at edge)
Primary Database	SQLite via Prisma (Fly.io)
Theme Integration	Shopify Theme App Extension
External APIs	SerpAPI (Google, Amazon, eBay, etc.)

System Diagram

┌─────────────────────────────────────────────────────────────────┐
│                    MERCHANT'S STOREFRONT                         │
│         (Theme Extension: Heartbeat + Pixel Tracking)            │
└─────────────────────────────┬───────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                   CLOUDFLARE WORKERS (Edge)                      │
│  • POST /api/pixels - Receive all tracking data                  │
│  • POST /api/heartbeat - Sync protection config                  │
│  • GET /api/check-ip-access - IP/Country blocking                │
│  • Real-time aggregation in D1                                   │
└─────────────────────────────┬───────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    CLOUDFLARE D1 DATABASE                        │
│  • Visitor sessions and identities                               │
│  • Bot/Spy/IP blocking signals                                   │
│  • Daily metrics and aggregations                                │
│  • Protection configuration cache                                │
└─────────────────────────────┬───────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    REMIX APP (Fly.io)                            │
│  • Shopify embedded admin dashboard                              │
│  • Fetches analytics from Workers                                │
│  • Manages scans, billing, alerts                                │
│  • Background workers for threat scanning                        │
└─────────────────────────────┬───────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    PRISMA DATABASE (Fly.io)                      │
│  • Merchant settings and billing                                 │
│  • Fraud orders                                                  │
│  • Phishing/Marketplace scans                                    │
│  • Product scan jobs and results                                 │
│  • Takedown requests                                             │
└─────────────────────────────────────────────────────────────────┘

Key Design Decisions

1. Edge-First Architecture

All real-time protection happens at the edge via Cloudflare Workers. This provides:

• Low latency: Protection checks happen in under 50ms globally
• High availability: Cloudflare's edge network ensures uptime
• Cost efficiency: No server compute for pixel processing
• Scalability: Handles traffic spikes automatically

2. Dual Database Strategy

We use two databases for different purposes:

Database	Purpose	Why
D1	Real-time events, sessions, analytics	Edge location, fast writes, automatic aggregation
Prisma	Scans, billing, settings	Complex queries, relationships, transaction support

See Dual Database Strategy for details.

3. Theme Extension for Data Collection

The Shopify Theme App Extension injects JavaScript into merchant storefronts to:

• Track visitor sessions (fingerprinting)
• Detect bots and spy tools
• Enforce content protection (right-click, copy, etc.)
• Report events to edge workers

4. Background Processing

Long-running tasks like threat scanning happen in background workers:

• Phishing detection: Scans domain variations for fake sites
• Marketplace monitoring: Searches for counterfeit listings
• Image similarity: Compares product images across platforms

Component Responsibilities

Component	Responsibilities
Theme Extension	Client-side protection, pixel emission, heartbeat
Cloudflare Workers	Pixel ingestion, IP blocking, config serving, analytics API
Remix App	Dashboard UI, settings management, worker coordination
Background Workers	Phishing scans, marketplace monitoring, image analysis
Shopify APIs	Billing, product data, order webhooks