Got Enough Stuff – Custom Stateful Donation App

Project Overview

The Got Enough Stuff project was a custom-built stateful Single Page Application (SPA) that enabled users to donate to multiple causes through a clean, wireframe-style interface.
Developed using vanilla JavaScript (ES5/ES6) and compiled via Webpack and Babel, the app served as an early precursor to modern React-based architectures — proving the concept of platform-independent, self-contained front-end apps long before headless CMS became standard practice.

The solution empowered users to:

• Log in, select charitable causes, and create personalized donation messages.
• Preview and send dynamically generated emails for selected causes.
• Complete donations via SnapScan’s QR-based payment gateway.
• Automatically store transactions, templates, and recipient data within a custom WordPress backend.

Key Features

• Custom STATE Engine: Managed all session data, screen transitions, and authentication flow.
• Dynamic Email Generation: Personalized email templates for each donor and cause.
• Secure Payments: Integrated SnapScan API with order confirmation callbacks.
• Headless Backend: WordPress used purely as a content and transaction API.
• Wireframe UI: Built on Bootstrap for responsive, lightweight design.
• Reusable Architecture: Built for portability across any backend system.

Architecture & Implementation

Frontend

• Developed with vanilla JavaScript using ES5/ES6 syntax.
• Compiled with Webpack and Babel for browser compatibility and performance.
• Implemented a modular STATE object that tracked data between screens and login sessions.
• Two-screen SPA flow:
  1. Login and Cause Selection
  2. Message Composer & Donation Preview

Backend

• Headless WordPress CMS stored causes, transactions, orders, and users.
• Custom PHP + MySQL plugin handled authentication, data storage, and API requests.
• Implemented cookie-based authentication for seamless SPA login without page reloads.
• Integrated SnapScan API for real-time payment verification.
• Built dynamic email templating using Foundation for Emails 2 (Zurb framework).

Hosting

• Deployed on a Virtual Private Server (VPS) with SSL and hardened firewall rules.
• Configured CORS and custom REST endpoints for secure front-end communication.
• Lightweight “wireframe-look” landing page created to host and promote the app.

Key Innovations

Cookie-Based Dual Authentication

By reverse-engineering WordPress’ session logic, Anton implemented client-side cookie authentication, enabling JavaScript-based logins typically impossible under server-rendered WordPress constraints.
This provided simultaneous front-end and back-end access without compromising security.

Dynamic Email Templating

The app dynamically adjusted each transactional email layout based on the selected causes, inserting text, images, and donation links in real time before sending.
This ensured every message remained unique, responsive, and visually optimized.

Payment Gateway Integration

Using SnapScan’s API, the system automatically processed payments, logged orders, and stored transactional metadata for future reporting or re-issue.

Technical Excellence

Performance & Security

• Optimized for minimal load using modular JS bundling.
• Full SSL encryption between client and server.
• Custom API endpoints with restricted CORS policies.
• Lightweight SPA architecture with zero dependencies on WordPress rendering.

Scalability

The self-contained app was designed to be portable — capable of integrating with any future backend without significant refactoring, laying the groundwork for Anton’s future React-based SaaS systems.

Implementation Results

“The functionality of the app turned out quite nicely. It is 100% working and stable, and the client already started generating revenue from his new venture.”

Business Impact

• Fast MVP delivery on a limited budget
• Revenue-generating donation platform for a new nonprofit initiative
• Secure and portable architecture for future enhancements
• Proof-of-concept for modern headless applications before the M.E.R.N. transition