MonitorManager

Administrative dashboard for Proxcop and Pokecop staff to configure the monitoring infrastructure. Follows a clear hierarchy: Websites → Products → Webhooks. Staff define which sites to monitor, configure each product (URL, keywords, variants), and assign Discord webhook destinations per product. Access is gated to Discord guild members via OAuth — no separate user system needed. Every CRUD operation fires an audit webhook to an admin Discord channel. Real-time updates between the dashboard and monitor processes run over Socket.io. Built with Vue 3, Ant Design Vue 4, Node.js, Express 5, and MongoDB.

Overview

MonitorManager is the administrative control plane for the Proxcop and Pokecop monitoring ecosystems. Staff, moderators, and admins use it to define which websites to monitor, configure the products tracked on each site, manage Discord webhook destinations, and control who has access to the system.

The system follows a clean hierarchy: Websites → Products → Webhooks. Each website is an independent monitoring target (e.g., a Shopify store or brand site). Each website contains products with their own configuration — keywords, URLs, variants. Webhook URLs determine where Discord notifications are sent when a monitor fires.

Authentication is Discord OAuth-based — only users who are members of the correct Discord guild can log in, making access control automatic and tied to existing community membership. Real-time updates between the dashboard and monitors run over Socket.io.

Screenshots

Dashboard — products table

Create product modal

Website management sidebar

Key Features

🔐

Discord OAuth Auth

Login is gated to Discord guild members. No invite — no access. JWT cookies secure subsequent requests. No separate user database required.

🌐

Website Management

Full CRUD for monitoring targets. Each website is a named entity with its own product list, configuration, and webhook endpoints.

📦

Product Configuration

Per-product settings including target URLs, variant keywords, and size filters. Each product can have multiple webhook destinations for different channels.

🔔

Webhook Management

Array input widget for managing multiple Discord webhook URLs per product. The MultipleInputWidget handles validation, addition, and deletion in one clean UI.

⚡

Real-Time Updates

Socket.io keeps the dashboard in sync with monitor processes. Product status changes, new detections, and configuration changes reflect instantly without page refresh.

📣

Discord Audit Log

Every CRUD operation (product created, edited, deleted) fires a Discord webhook notification to an admin channel. Full audit trail of who changed what, when.

Tech Stack

Vue 3Composition API; component-per-modal architecture — over 20 modal components for all CRUD interactions

Ant Design Vue 4Table, form, modal, notification, and layout components — consistent enterprise UI out of the box

Socket.io-clientReal-time bidirectional events between dashboard and monitor processes

Node.js + Express 5REST API with JWT middleware; all routes protected except the OAuth flow

MongoDB + Mongoose 9Website and product schemas; Mongoose validation enforced at model level

Discord OAuth2Guild membership check on every login — automatic access control tied to community membership

API Endpoints

Auth

POST/user/discordLoginInitiate Discord OAuth flow — returns redirect URL

GET/discord/callbackOAuth callback, exchange code for token, verify guild membership, issue JWT

GET/checkDiscordCookieValidate JWT cookie before rendering protected routes

Products

GET/product/listFetch all products for a given website (filtered by headers)

POST/product/addCreate product + fire Discord audit webhook

PUT/product/editUpdate product + fire Discord audit webhook

DELETE/product/deleteRemove product + fire Discord audit webhook

Websites

GET/websites/listReturn all configured monitoring targets

POST/websites/addRegister a new website to monitor

PUT/websites/editUpdate website configuration

DELETE/websites/delete/:idRemove website and all its products

Architecture Highlights

Guild-Gated Access Control

Instead of a custom user management system, MonitorManager delegates access control entirely to Discord. When a user authenticates via Discord OAuth, the backend calls the Discord API to verify they are a member of the required guild. Non-members are rejected at the authentication layer — no admin UI needed to manage who has access.

Header-Based Multi-Tenancy

Products are scoped to websites using custom request headers (privateKey, websiteName, cookGroup). The same API instance serves multiple independent monitoring groups without separate deployments or databases.

Component-Per-Modal Pattern

Every CRUD action has its own dedicated modal component (CreateProduct, EditProduct, DeleteProduct, etc.). This avoids a single bloated form that handles all modes — each component has a single, clear purpose and can be modified without touching the others.

← Back to Projects