A donation app built and shipped on a startup budget

Stack. Vanilla JavaScript (ES5/ES6) single-page app, compiled with WebPack and Babel to keep it small and working in most browsers, styled with Bootstrap and kept wireframe-plain, as the client asked. Headless WordPress CMS back end with a custom plugin in PHP and MySQL. SnapScan payment API, and ZURB Foundation for Emails for the email templates.

Decoupled by design. The app kept its own self-contained state for login sessions and the data passed between screens, so it never depended on the back end. The back end could later be swapped out without rebuilding the app, and the app could be dropped onto another website and still use the same back end.

Logging in from the browser. WordPress expects logins to happen server-side, through its own login pages and a page reload, and I was told a JavaScript app in the browser couldn't log in to it. The way through was WordPress's cookies: it needs one session cookie for the front end and a second one for the back end, each holding the user name, a secret key hash and a timestamp. I built a private login endpoint, locked down with CORS, on a server behind SSL and a firewall I set up. The browser sent the username and password over the encrypted connection; the server checked them; on success it issued both cookies, tied to the username and a session timestamp; and the browser stored them and was logged in to WordPress. Further security steps are left out here on purpose.

Orders and payments. The back end called SnapScan to generate the payment QR codes. When SnapScan reported a payment as successful or failed, the whole order was saved as a WordPress custom post with every transaction detail, a reference code, who placed it and which causes they picked. Keeping the full order meant emails that got stuck or failed could be reissued later, with a bit of extra functionality added. A copy of each transaction, its email content and its selected causes was stored as well.

Emails that fit the choice. The app sent the message and chosen causes to the back end as JSON, and the plugin built the email from a responsive template every time. People picked different numbers of causes, two, three or six, so the template adjusted its layout to whatever it received.

Hosting. A VPS for both the app and the CMS, with SSL, domain and firewall set up, plus a small showcase website for the app. Delivered 2018 as an MVP, on the client's budget.