techygrrrl
techygrrrl's blog

techygrrrl's blog

Coding stream → Building Stream alerts

Coding stream → Building Stream alerts

Custom stream alerts for custom apps

techygrrrl's photo
techygrrrl
·Dec 29, 2021·

2 min read

Table of contents

  • Overview
  • Tech Stack
  • Resources
  • Development Process
  • Video

Overview

I did a stream where I built custom stream alerts to support my a custom merch solution (which I have not yet completed). While there's stream alerts for common events like follows, subscribes, and merch stores set up via the alerts provider, when building your own custom integrations, you need to build your own custom stream alerts. This blog post and related stream are about building the stream alerts solution. It does not include any content about building a custom merch store.

You can check out a quick demo of the custom stream alerts working here:

Tech Stack

Dev tools:

Resources

These are the resources for my recent coding stream on how to build stream alerts:

Development Process

  1. Set up the base code base (the one linked above)
  2. Set up router-based routing in Express
  3. Implement authentication middleware
  4. Serve static web files from a ./public directory
  5. Implement HTML and CSS for the alert. Include jQuery and trigger the alert with mock data.
  6. Send alert data to a new endpoint POST /api/alerts/merch which contains the username and items purchased.
  7. Set up web sockets with socket-io on the backend and the front-end for custom broadcast message merch-alert which contains stringified JSON data.
  8. On a new merch-alert event, trigger the alert for real.
  9. Add a sound clip (m4a) to play when the alert is triggered.

Video

You can watch the video of the stream for a limited time here (approximately 3.5 hours).

 
Share this