# How to build dev.to In-App Notification System in 20 minutes > In this guide, you'll learn how to build a dev.to In-App Notification Center in 20 minutes. Canonical: https://novu.co/blog/how-to-build-dev-to-in-app-notification-system-in-20-minutes/ Markdown: https://novu.co/blog/how-to-build-dev-to-in-app-notification-system-in-20-minutes.md Last updated: 2024-04-23T08:54:23.000Z In this guide, you'll learn how to build a dev.to In-App Notification Center in 20 minutes. Authors: Prosper Otemuyiwa Published: 2024-04-23T08:54:23.000Z Category: How to [dev.to]() is a very popular community for developers. It’s a platform for thousands of developers to collaborate, learn, publish and explore new ways of making programming languages and technology work for them. I’m an avid reader of [dev.to]() and publish a lot of articles on the platform. My favorite thing to do is to check my [notifications]() to see who posted a new article, commented or liked any of my posts. I’ll guide you on how to swiftly build an In-App Notification system for your next app using [Novu]() and the dev.to API. While it might not exactly resemble the system mentioned above, it’ll have many similarities. If you want to explore the code right away, you can  [**view the completed code**]() on GitHub. ## Grab your dev.to API key You can get your dev.to API key from your [settings page](). ## Set up a Next.js app To create a Next.js app, open your terminal, `cd` into the directory you’d like to create the app in, and run the following command: ```bash npx create-next-app@latest devto ``` Go through the prompts, select your preference, install and run the app in your browser with: ```bash npm run dev ``` ## Set up and integrate Novu Run the following command to install the Novu node SDK: ```bash npm install @novu/node ``` Run the following command to install the Novu Notification Center package: ```bash npm install @novu/notification-center ``` The Novu Notification Center package provides a React component library that adds a notification center to your React app. The [package is also available for non-React apps](). Before we can start sending and receiving notifications, we need to set up a few things: 1. Create a workflow for sending notifications, 1. Create a subscriber – recipient of notifications. ## Create a Novu Workflow A workflow is a blueprint for notifications. It includes the following: - Workflow name and Identifier - Channels: – Email, SMS, Chat, In-App and Push Create a workflow by following the steps below: 1. Click **Workflow** on the left sidebar of your Novu dashboard. 1. Click the **Add a Workflow** button on the top left. You can select a Blank workflow or use one of the existing templates. 1. The name of the new workflow is currently **“Untitled”**. Rename it to `Devto Notifications`. 1. Select **In-App** as the channel you want to add. 5. Click on the recently added **“In-App”** channel and add the following text to it. Once you’re done, click **“Update”** to save your configuration. Enable the “Add an Avatar” button to allow the notifications coming in show a default avatar. ## Create a Subscriber to receive notifications A subscriber is the recipient of a notification. Essentially, your app users are subscribers. As a logged-in user on dev.to, you are a subscriber. To send notifications to a user on your app, you’ll need to register that user as a subscriber on Novu. If you click **“Subscriber”** on the left sidebar of the [**Novu Dashboard**](), you’ll see the subscriber list. As a first time Novu user, it will be an empty list. Open your terminal and run the following script to create a subscriber: ```bash curl --location '' \\ --header 'Content-Type: application/json' \\ --header 'Accept: application/json' \\ --header 'Authorization: ApiKey ' \\ --data-raw '{ "firstName": "John", "lastName": "Doe", "email": "johndoe@domain.com", "phone": "+1234567890" }' ``` **Note:** Grab your **NOVU API Key** from the [settings section]() of your Novu dashboard. Refresh the Subscribers page on your Novu dashboard. You should see the recently added subscriber now! You can also add a subscriber to Novu by running this [API endpoint](). **Note:** The best option to add a subscriber is via code in your backend. With Node.js code, you can run the following code to create a subscriber: ```javascript import { Novu } from "@novu/node"; // Insert your Novu API Key here const novu = new Novu(""); // Create a subscriber on Novu await novu.subscribers.identify("132", { email: "john.doe@domain.com", firstName: "John", lastName: "Doe", phone: "+13603963366", }); ``` For the sake of this article, we’ll make do with adding a subscriber via the terminal to speed the process up. ## Set up Novu Notification Center in the Next.js app Head over to `scr/pages/index.js`. We’ll modify this page to include the Novu Notification Center. Import the Notification Center components from the Novu notification center package like so: ```javascript ... import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; ``` Display the Notification Center by adding the imported components like so: ```javascript ... return ( Dev.to In-App Notifications

{({ unseenCount }) => ( )} ... ``` Check your app, you should immediately see a notification bell. Click the notification bell. The Notification Center will immediately pop up like so: Add the following to your `.env` values: ```javascript NEXT_PUBLIC_SUBSCRIBER_ID= NEXT_PUBLIC_NOVU_APP_ID= NEXT_PUBLIC_NOVU_API_KEY= ``` Grab your **Novu API Key** and **APP ID** from the [Settings]() section of your Novu dashboard. Get the Identifier of the subscriber we created earlier and add it to the `.env` values. In a real world app, the ID of the logged-in user should be passed to the **subscriberID** property of the **NovuProvider** component. **Note**: We’re using it as an env variable because we’re not incorporating an authentication system in this tutorial. Ideally, once the user registers, the user ID should immediately be created as a subscriber and the ID be passed to the component. Reload your app and the notification center should be squeaky clean like so: ## Build the API to publish dev.to articles and trigger In-App Notifications Create a `publish-devto-article.js` file in the `src/pages/api` directory. Add the code below to it to import the Novu SDK and specify the workflow trigger ID: ```javascript import { Novu } from "@novu/node"; const novu = new Novu(process.env.NEXT_PUBLIC_NOVU_API_KEY); export const workflowTriggerID = "devto-notifications"; ``` **Note:** The `@novu/node` Novu SDK can be used only in server-side. The `workflowTriggerID` value is obtained from the workflow dashboard. Earlier, when we set up a workflow titled `Devto Notifications`, Novu created a slug from this title to serve as the trigger ID. You can see it here: Now add the following functions to the code in the `publish-devto-article.js` file: ```javascript ... export default async function handler(req, res) { const { article } = req.body; const response = await fetch("", { method: "POST", headers: { "Content-Type": "application/json", "API-Key": process.env.NEXT_PUBLIC_DEVTO_API_KEY, }, body: JSON.stringify({ article: article }), }); /** * Get response of the published article from Dev.to */ const dataFromDevto = await response.json(); /** * Extra the essential details needed from the Dev.to response */ const { title, url, published_timestamp, user } = dataFromDevto; /** * Send notification that a new article has been published */ sendInAppNotification(user, title, url); return res.json({ message: dataFromDevto }); } /** * SEND IN-APP NOTIFICATION VIA NOVU * @param {*} userDetails * @param {*} articleTitle * @param {*} articleURL * @returns json */ async function sendInAppNotification(userDetails, articleTitle, articleURL) { await novu.trigger(workflowTriggerID, { to: { subscriberId: process.env.NEXT_PUBLIC_SUBSCRIBER_ID, }, payload: { name: userDetails.name, article_url: articleURL, article_title: articleTitle, profile_image: userDetails.profile_image_90, }, }); return res.json({ finish: true }); } ``` The `sendInAppNotification` function block of code above triggers the notification via the Novu SDK: - Accepts the workflow trigger ID to determine which workflow to trigger. - Accepts the subscriber ID value to identify the notification recipient. - Accepts a payload object that represents the parameters to inject into the workflow variables. The `handler` function block above makes a POST request to dev.to to publish an article and then calls the `sendInAppNotification` to fire an In-App notification indicating that someone just published an article. **Note:** The request body is passed from POSTMAN or Insomnia. Next, we will test our API with any of these API software tools. ## Test the API with POSTMAN or Insomnia – publish to dev.to Fire up either **POSTMAN** or **Insomnia** and make a request to the API we created and post a JSON request to publish an article on dev.to. **Our API url:**[http://localhost:3000/api/publish-devto-article]() I personally use and prefer Insomnia because it has a snappy and lovely UI. As you can see below, we passed some parameters (pulled from [dev.to API docs]()) to enable our publishing an article. Next, check your app. You should see an instant notification about the new published article on dev.to. Click on the new post title. It should take you directly to the article on dev.to! You can try publishing as many as possible. The Notification Center provides a lot of functions built-in. A user can mark all notifications as read, mark one notification as read, and delete a notification. The Notification Center ships with a lot of [props and options to customize the whole experience](). [Header, footer, colors]() can be customized to conform with your app. ## Center the Notification Center, just like on dev.to You might be wondering, the dev.to Notification Center isn’t a popover; it’s centered on the page. How do I achieve that? Simply replace the `PopoverNotificationCenter` component with the `NotificationCenter` component from the Novu package. It should look something like this: ```javascript ``` However, Next.js uses Server side rendering so you might come across this issue on your page because the `<NotificationCenter />` component makes use of the window object. Let’s fix this issue by wrapping the component in a way that disables ssr and lazy loads it. Create a `components/notifications` folder in the `src/` directory. Go ahead and add these two files with the code below to them respectively: `index.js` ```javascript export { default } from "./notifications"; ``` `notifications.js` ```javascript import { NotificationCenter } from "@novu/notification-center"; import dynamic from "next/dynamic"; import React, { useCallback } from "react"; const Notifications = () => { const onNotificationClick = useCallback((notification) => { if (notification?.cta?.data?.url) { window.location.href = notification.cta.data.url; } }, []); return ( ); }; export default dynamic(() => Promise.resolve(Notifications), { ssr: false, }); ``` The code above does the following: - It imports the original `<NotificationCenter />` component from Novu. - It uses Next’s dynamic functionality that allows us to dynamically load a component on the client side, and to use the `ssr` option to disable server-rendering. - It defines a notificationClick handler for the onNotificationClick prop of the NotificationCenter component (The function that is called when the notification item is clicked). - The `colorScheme` is one of the props you can pass to the NotificationCenter component. It takes in either “light” or “dark” values to enable you set the UI mode. Finally, head back to the `pages/index.js` file, import our newly created component and use it in the `NovuProvider` parent component like so: ```javascript ... import Notification from "../components/notifications"; ... ... ... ... ... ... ``` Lastly, let’s adjust the components’ position to place the Notification Center in the middle of the page. _pages/index.js_ ```cshtml import Image from "next/image"; import { Inter } from "next/font/google"; import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; import Notification from "../components/notifications"; const inter = Inter({ subsets: ["latin"] }); export default function Home() { return ( Dev.to In-App Notifications

" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer" > Docs{" "} -> Find in-depth information about Next.js features and API.

" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer" > Learn{" "} -> Learn about Next.js in an interactive course with quizzes!

" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer" > Templates{" "} -> Discover and deploy boilerplate example Next.js projects.

" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer" > Deploy{" "} -> Instantly deploy your Next.js site to a shareable URL with Vercel.

); } ``` **Note:** Ensure this is the full code of the `pages/index.js` file to avoid missing anything. Now, reload your app. It should resemble dev.to’s centered Notification page. Yaayyyy!! Publish a new article on dev.to and observe how the notifications arrive via the centralized Notifications component, even without a notification bell. The Notification unseen counter shows right there. Go one step further, make the background light mode and change the Notification Center to light mode. ## Up next: build dev.to email community digest You’ve learned how to develop an In-App Notification System in under 30 minutes. Over time, I’ve learned that the best developers use battle-tested tools to build their apps and systems. Fortunately, there’s more. I have additional tips to share with you. 😉 Next, I’ll demonstrate how to use Novu to build an Email Community Digest, similar to the excellent digest from dev.to, which keeps us updated on the top published articles. Stay tuned for the next part of this article! Don’t hesitate to ask any questions or request support. You can find me on [Discord]() and [Twitter](). Please feel free to reach out.