Overview

In a nutshell, the app allows website owners to create their own popups and track performance of them.

Technical Implementation

I chose the PERNTG tech stack (Postgres, Express, React, Node, TypeScript & GraphQL) and the work included the following to create the minimum viable product:

• Three Back-end Node Apps: a primary Apollo GraphQL server governing user activity; a RESTFUL tracking server for processing tracking events; and a RESTFUL Stripe webhook server processing Stripe events
• A Front-end React App: information fetched from the database via an URQL GraphQL client and presented to users, using hooks and context for state management and a GraphQL type generator
• Deploying on VMs: a test server on my raspberry pi and staging and production servers on Digital Ocean droplets. Nginx configuration involving SSL certificate creation, DNS, PM2, port forwarding, etc
• Relational Database Design: creating the Postgres database by listing the requirements, entities and attributes and coming up with an appropriate schema
• Database Interactions: creating CRUD resolvers and methods used by the front-end, tracking and Stripe webhook servers using SQL. Also included affiliate crons and stored procedures
• Tracking Script: a client-based tracking script sending the data to a RESTFUL API safely via a beacon when the user leaves the page
• Security: IP-based rate-limit throttling, JWT-based authentication, firewall on the server using UFW, changing the port, fail2ban, etc
• Testing: using mock service worker for Jest unit tests and Cypress for E2E tests
• Investigations: a lot of of investigatory work to figure out how to go about everything, such as using AWS SES for sending emails, lots of Linux and headless CLI packages, etc