Logo

dev-resources.site

for different kinds of informations.

How to build dev.to Community Digest with Novu

Published at
4/29/2024
Categories
javascript
devto
notifications
digest
Author
unicodeveloper
Author
14 person written this
unicodeveloper
open
How to build dev.to Community Digest with Novu

dev.to is a widely recognized and highly esteemed community dedicated to developers from all around the globe. It serves as a platform for thousands of developers to learn, share, and publish their experiences with leveraging technology in their work.

One other thing that piqued my curiosity is the dev.to community Digest I frequently get in my inbox. The email digest helps me stay informed about some of the top articles I am interested in.

Dev.to Email Community Digest

In the first part of this article, I covered how to develop a system similar to dev.to's In-App Notification system in less than 30 minutes. Now, I'll show you how to build an automated email community digest similar to this using Novu.

Add a Digest & Email Node to Existing Workflow on Novu

All notifications are sent via a workflow. A workflow acts as a container for the logic and blueprint associated with any type of notification in your app.

All the channels (Email, SMS, In-App, Push) are tied together under a single entity in a workflow.

In the previous article, we already created a workflow. Now, let's add a Digest node to it:

  • Open the existing Devto Notifications Workflow.
  • Click on the + icon under the In-App node and select Digest.

- Click on the Digest node. A modal will open where you can set how long events need to be digested before the next action. In this case, the next action will be sending an email to subscribers.

  • Set 1 minute for the digest. Feel free to experiment with this. You can set any custom minute or hour needed.
  • The digest node allows you to set a specific time interval for when notifications should be sent.
  • We need to access all the digested event payloads in order to show the subscriber all or parts of the events included in this digest. For example: β€œProsper and 2 others liked your photo.”
  • In our case, we need all post titles and links that have been published by anyone in the past minute to be sent in one email to subscribers.

- Click on the + icon again to add the Email channel.

  • Click on the Email channel node to add content. Don't forget to click the Update button when you're finished.

    • Add the content below to it. This is a digest template:
<p> Hey Dev.to Subscriber, <p>
<p>Here are some recent community posts just for you </p>

{{#each step.events}}
<a href="{{article_url}}" style="font-weight:bold;">
  <h3>{{article_title}}</h3>
</a>
<br/>
{{/each}}
Enter fullscreen mode Exit fullscreen mode

As part of the digested template, you will have access to a few properties:

  • step.events: An array of all the events aggregated under this digest.
  • step.total_count: The number of total events in this digest.
  • step.digest: A boolean flag to indicate if we are in digest mode right now.

In the code above, we are looping through the step.events to grab all the events that have happened in the action before sending an email.

The action here is on In-App push notifications. Novu collects all the In-App push notifications that occur within a one-minute digest time. It then uses the specified payload (in this case, article_url and article_title) to determine the content to display in the email sent to subscribers. It's quite impressive!

Publish to dev.to via the API with POSTMAN or Insomnia

Fire up either POSTMAN or Insomnia again and publish as many articles as possible within the space of a minute.

Firstly, the In-App notifications will appear as intended. No surprises here. We already went through this in the previous part of this series.

Wait for a minute. You should receive an email after a minute with all of the articles published within that timeframe.

The email just arrived in my inbox. Just like on dev.to!

The body of the email contains a digest of all the content published within a minute.

That's all. Now, we have a dev.to email community digest.

Note: Feel free to style the email content to look as pretty as dev.to’s community digest.

More on Using Digest

There are numerous scenarios where using a notification digest in your app can be beneficial.

  • For instance, if you're developing a social media app like Instagram, TikTok, or a LinkedIn-like app that requires frequent user interaction notifications, it's wise to digest these notifications. To avoid overwhelming users and risking app uninstalls or notification disabling, manage your notification volume effectively.
  • Similarly, if you're building the next GitHub or a web app requiring constant email notifications, take care with your notification strategy. Using an email digest can be a practical solution!

For more information, refer to this comprehensive guide on the different types of digests available and learn how you can configure them in your app with Novu.

Conclusion

We have successfully incorporated an email community digest into our app without making any changes to the existing codebase. We only made a few changes in our Novu dashboard.

I prayed for days like these a decade ago. They're here and they powerfully demonstrate how we can leverage excellent tools to move quickly, iterate, focus on business logic and build a million-dollar business 😁

I’ll leave you with these two guides that show in detail how to:

Don’t hesitate to ask any questions or request support. You can find me on Discord and Twitter. Please feel free to reach out.

notifications Article's
30 articles in total
Favicon
Build a Crypto Price Alert System with Telegram and AWS Lambda
Favicon
Code. Battery notifier.
Favicon
Tech Deregulation Plus Layoff
Favicon
DIY Desktop Notifications with Python
Favicon
Implement Remote Push Notification Badges (IOS) on background React Native Apps
Favicon
Notifications For Your App: Should you build or buy?
Favicon
How Product-Development Friction Ruins User Experience with Notifications
Favicon
The right way to email your users
Favicon
Improved Device Detection
Favicon
Get Notified On Invoice Payments
Favicon
4 Ways to Send Notifications to a Mobile Phone
Favicon
A Code-First Approach to Managing Notification Workflows
Favicon
How to build dev.to Community Digest with Novu
Favicon
How to build dev.to In-App Notification System in 20 minutes
Favicon
How to Preview Laravel Notification Emails
Favicon
Building an Investor List App with Novu and Supabase
Favicon
The Ultimate Guide to Laravel Reverb
Favicon
The Ultimate Guide to Laravel Reverb: Real-Time Notifications
Favicon
What's new in Novu 0.24?
Favicon
How to set up AWS Budget Alerts to prevent surprises
Favicon
Learn about push notification types! And the effective Push Notification elements
Favicon
Implementing Internationalization in Apps: How to Translate Notifications
Favicon
The Power of Community
Favicon
Boost Your Productivity with ntfy.sh: The Ultimate Notification Tool for Command-Line Users
Favicon
The Unstoppable Wave of Misdirected Mobile Notifications and Why It Matters
Favicon
Handling Firebase Notifications in Flutter: Practical Tips
Favicon
What's new in Novu 0.22?
Favicon
Laravel 10 OneSignal Web Push Notification
Favicon
Unlocking the Power of AWS Notifications and Email Services for Your Business
Favicon
Integrating Argo CD and Slack for Real-time Notifications

Featured ones: