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

• Node.js
• Express.js
• Socket.io
• TypeScript

Dev tools:

• nodemon
• ts-node
• ESLint

Resources

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

• base Node.js with TypeScript code base → you can click "Use template" to copy it and use it as a base
• flexbox froggy → web dev game for learning CSS flexbox layouts
• Stream-friendly royalty-free chill music playlist: Chill, Soul & Jazz

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).