Overview

Popup Hawk is a production SaaS popup builder enabling website owners to design, deploy and optimise on-site conversion campaigns. The platform provides real-time event tracking, subscription management and performance analytics within a secure, scalable full-stack architecture.

Architecture & Technical Implementation

Architected using a PERN + TypeScript + GraphQL stack with a distributed backend separating application logic, event ingestion and billing infrastructure.

• Distributed Node.js Backend: Three independent services — a primary Apollo GraphQL API governing user accounts, popup configuration and analytics queries; a dedicated REST event ingestion service for tracking impressions, interactions and conversions; and a Stripe webhook processor managing subscription lifecycle events.
• Frontend Application: React + TypeScript SPA consuming a typed GraphQL API via URQL, leveraging hooks and context for predictable state management and schema generation for end-to-end type safety.
• Popup Delivery & Tracking Script: Custom embeddable client-side script responsible for rendering popups, handling display logic and securely transmitting behavioural events via the Beacon API with minimal performance overhead.
• Relational Data Modelling: Designed a normalised PostgreSQL schema modelling users, campaigns, display rules, variants and event data, with SQL-based business logic supporting analytics and reporting queries.
• Infrastructure & Deployment: Deployed across isolated DigitalOcean droplets with Nginx reverse proxy configuration, SSL certificate management, DNS configuration and PM2 process management across staging and production environments.
• Security Hardening: JWT-based authentication, IP rate limiting, UFW firewall configuration, Fail2Ban intrusion protection and hardened server configuration.
• Testing Strategy: Unit testing with Jest + Mock Service Worker for API isolation, and end-to-end coverage with Cypress for campaign creation, event tracking and billing workflows.