Hearst (Houston Chronicle)

Beauty Deals Finder ReactJS Application and Custom Sailthru Email Alerts

Beauty Deals Finder is a custom application built with ReactJS + Redux Toolkit and SCSS modules. It is configured and hosted on Houston Chronicle’s local commerce website (aka “Chron Shopping”) via WordPress.

Users may search for deals by selecting various brands and then save their selections as preferences. When a user saves their brand preferences, they are added to an email mailing list in Sailthru to receive automated, personalized daily alerts. The email notifies the user how many new deals have been added for their chosen brands, if any at all, within the past 24 hours. Clicking a link in the email takes the user to the Beauty Deals Finder application, automatically signing them in to review their latest deals.

All deal data displayed in the application and the Sailthru emails is requested from a separate internal service.


Sailthru Email Template Local Development Toolkit and Process Improvements

While working full-time as a Software Engineer with Hearst, I took on additional responsibilities by becoming our team’s Sailthru email template engineer. We did not have a very good development process in place to work with Sailthru’s custom templating language (Zephyr), so I also took it upon myself to implement a toolkit.

Since the email templates contain Zephyr markup, I used Sailthru’s API endpoint for previewing Zephyr email templates. That allowed me to edit the templates on my local machine and then render the email in my web browser. For further testing, I could simply tick a checkbox to send a test email of my changes instead.

Additionally, I wrote two other scripts for downloading Sailthru email template contents and “include” template parts respectively. We use Sailthru in advanced ways at Hearst with custom Data Feed configurations, so I architected the toolkit to support that. Synching the template code locally from Sailthru provided a lot of key benefits:

  • Version control and code backups via Git (which also facilitates proper code review process)
  • Easily make changes to existing email templates using the developer’s own code editor
  • Code searchability via terminal commands such as grep (which also means easier code auditing)
  • Ability to mix custom code with Sailthru’s WYSIWYG editor to reduce custom code burden
  • Detailed template error messaging via the Preview endpoint’s response