Midday is all about being on top of your business. Stay informed about your business insights, track when you get paid, receive updates on new transactions, and access general information how your business actually are doing. And that includes well-timed notifications via emails and push notifications, carefully curated for your convenience.
The challenge: Implementing a unified infrastructure for notifications
From the beginning, we knew the importance of a unified approach to managing our notifications. From past experiences of stitching together different solutions to support various notification needs, we were determined to create a system that could seamlessly support web, desktop, and mobile applications. Our goal is to ensure that our notification system can scale alongside our growth.
The solution: Novu
While we tried a bunch of different providers we decided to
go with Novu based on our requirements:
- Support Resend, Expo
- In App notifications
- User Preferences
Novu not only ticked every box they also got a huge bonus for being open source and
you get 30K events/month for free.
Implementation and SDKs
We started with created our own package @midday/notifications where
we installed @novu/node dependency, where we register our notification
types for convenience:
export enum Templates {
Transaction = "transaction",
Transactions = "transactions",
Inbox = "inbox",
Match = "match",
}
export enum Events {
TransactionNewInApp = "transaction_new_in_app",
TransactionsNewInApp = "transactions_new_in_app",
TransactionNewEmail = "transaction_new_email",
InboxNewInApp = "inbox_new_in_app",
MatchNewInApp = "match_in_app",
}
And using our New Transactions email as an example, which is sent from a background job using Trigger.dev when you have new transactions.
import { Notifications, Types, Events } from "@midday/notifications";
const html = await renderAsync(
TransactionsEmail({
fullName: user.full_name,
transactions,
locale: user.locale,
})
);
await Notifications.trigger({
name: Events.TransactionNewEmail,
payload: {
type: Types.Transaction,
subject: t("transactions.subject"),
html,
},
user: {
subscriberId: user.id,
teamId: team_id,
email: user.email,
fullName: user.full_name,
avatarUrl: user.avatar_url,
},
});
Because we are sending the email with the variables subject and html with the generated content we are just adding those to Novu and then we're done.
And to send In App Notifications it's just a matter of changing the Events and
Types.
import { Notifications, Types, Events } from "@midday/notifications";
await Notifications.trigger({
name: Events.TransactionNewInApp,
payload: {
recordId: transaction.id,
type: Types.Transaction,
description: t("notifications.transaction", {
from: transaction.name,
}),
},
user: {
subscriberId: user.id,
teamId: team_id,
email: user.email,
fullName: user.full_name,
avatarUrl: user.avatar_url,
},
});
The results: Beautiful In App Notificaitons and Emails
Thanks to the SDK @novu/headless we implemented the notification center for Midday
in a matter of hours to match our branding exacly like we wanted while Novu delivers
the notifications in realtime.
And for user preferences we just use their API together with a simple server action.
The future of Midday x Novu
We are really happy that we chose to use Novu, We have several smart notifications planned that will offer valuable business insights. Plus, Novu will integrate smoothly with our upcoming mobile app, allowing us to send push notifications effortlessly via Expo by just connecting a new provider.
GitHub
While this is just a draft on how we are using Novu in production you can dig deeper into the codebase in our repository.
