From e-mail to e-ink: an inbox-powered feed for TRMNL

#devchallenge #postmarkchallenge #webdev #api

This is a submission for the Postmark Challenge: Inbox Innovators.

Since 2014, Postmark has been my email backend of choice for business, client, and personal web apps.

When I joined the TRMNL team last year, it was no surprise to find Postmark in their Rails app, too. They had even developed an analytics dashboard for the TRMNL itself for users to track their e-mail health.

That works great for monitoring outbound email, but this week's challenge is all about inbound messages. So I decided to build a new fun plugin that works in the other direction.

What I Built

PSTMRK is an e-ink dashboard for TRMNL that transforms a Postmark inbound email address into a personal microblog for display around the home or workplace.

Simply send a message to the inbound address and the display automatically updates. The dashboard displays the five latest messages, including their date, sender, subject, and body. Keep the message contents brief and plain-text - this is a 7.5" screen, after all!

The plugin and its backing web services are fully open-source. TRMNL owners can easily fork the plugin recipe and customize it to fit their needs.

Some use cases:

Send yourself a quick reminder, or area of focus for the day
Set up a forwarding rule in your primary inbox to redirect important messages to the plugin
Connect the email address to a third-party notification service
Share the inbound address with friends and family so they can send you private messages, honey-dos, and dad jokes

Demo

You can see the latest updates to my personal feed on the recipe page.

It's easy to set up your own demo using either a TRMNL, a compatible third-party e-ink display, or even bring your own device (BYOD).

Sign up for Pipedream and create a new workflow from the template. Copy the trigger URL to your clipboard.
Sign up for Postmark, configure the Default Inbound Stream, and paste in the trigger URL from step 1.
In your TRMNL account, fork the recipe. Copy the webhook URL from the plugin settings.
Back in Pipedream, create a new the project variable PLUGIN_WEBHOOK_URL and paste in the webhook URL from step 3.

There is no step five – everything should be all wired up. Sending a message to the inbound address triggers a chain of events that fires off a webhook from Postmark, then Pipedream posts a webhook to the TRMNL plugin, the screen is re-rendered, and finally the device displays it.

Code Repository

https://github.com/schrockwell/trmnl-postmark-challenge

The Git repo contains both the TRMNL plugin source under trmnl/ and the Pipedream workflow steps under pipedream/.

How I Built It

There are two main pieces to this project:

A TRMNL plugin which accepts data via webhooks
A Pipedream workflow that transforms Postmark's webhook into the format expected by TRMNL

Pipedream workflow

It was actually a link in Postmark's docs that led me to Pipedream and its AI coding assistant, String. After some back-and-forth where I described the input and output formats of the webhooks, String understood the assignment and wrote, tested, and deployed an endpoint to Pipedream.

Sometimes, it's cool living in The Future.

TRMNL plugin

To design the plugin itself, I leveraged TRMNL's UI framework to build a pixel-perfect feed with HTML, CSS, and Liquid. The recipe was designed, tested, and submitted from within the web-based editor.

It now joins the 200+ user-created plugins for TRMNL, with subjects ranging from webcomics to public transit schedules.

In Summary

This challenge was a fun mashup combining one of the Internet's oldest protocols with the latest in display technology.

And it's all to make mail look like paper again.

Top comments (4)

Hulk • May 29

Hulk like PSTMRK. It remind Hulk of when Hulk small and write messages on stones. Throw stone to friend, like sending email. Make Hulk smile. Hulk like good dad joke too. Send one to Hulk. Hulk laugh.