Novu•7mo ago

Novu integration

Hey, I am a beginner developer with little experience in react.js and node js development I am currently doing a project for my university in which i need to integrate novu for basic in app notifications I am not good at reading documents so i am having trouble implementing this process Kindly guide me through, would really appreciate if there is any references tutorial link for a react and node js project integration

7 Replies

Ask Inkeep•7mo ago

Hi @Ammar Zahid, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Building a Notion-like system with Socket.io And React - Novu * Building a forum with React, NodeJS - Novu * Creating a registration and a login with two-factor authentication on React - Novu * [NV-1519] Feature: Next.js + Novu Integration Example ----------------------------- Answer I understand you're looking for a straightforward guide to integrate Novu for in-app notifications in a React and Node.js project. Here's a simplified step-by-step guide based on a Novu tutorial that might help you: 1. Install Novu SDKs: You'll need to install the Novu SDKs for both the client-side (React) and the server-side (Node.js). You can do this using npm:

   npm install @novu/notification-center # For the client
   npm install @novu/node # For the server

   npm install @novu/notification-center # For the client
   npm install @novu/node # For the server

(1) 2. Initialize Novu in Your Project: To create a Novu project, run the following in your terminal:

   npx novu init

   npx novu init

You'll be prompted to sign in with GitHub and set up your project details. 3. Add the Notification Center to Your React App: Inside your React project, you can add the notification bell icon to show notifications. Here's a simplified version of how you might do this:

   import React from 'react';
   import { NovuProvider, PopoverNotificationCenter, NotificationBell } from '@novu/notification-center';

   function Notify() {
     return (
       <div>
         <NovuProvider subscriberId='<YOUR_SUBSCRIBER_ID>' applicationIdentifier='<YOUR_APP_ID>'>
           <PopoverNotificationCenter colorScheme='light'>
             {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
           </PopoverNotificationCenter>
         </NovuProvider>
       </div>
     );
   }

   export default Notify;

   import React from 'react';
   import { NovuProvider, PopoverNotificationCenter, NotificationBell } from '@novu/notification-center';

   function Notify() {
     return (
       <div>
         <NovuProvider subscriberId='<YOUR_SUBSCRIBER_ID>' applicationIdentifier='<YOUR_APP_ID>'>
           <PopoverNotificationCenter colorScheme='light'>
             {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
           </PopoverNotificationCenter>
         </NovuProvider>
       </div>
     );
   }

   export default Notify;

Ask Inkeep•7mo ago

Replace <YOUR_SUBSCRIBER_ID> and <YOUR_APP_ID> with your specific IDs. 4. Send a Test Notification from Your Node.js Server: After setting up Novu in your React app, you can test sending an in-app notification from your Node.js server. You'll need to use your Novu API key to authenticate and send notifications through Novu. Unfortunately, the exact steps for sending a notification from the Node.js side are not detailed in the provided information sources. For this part, you would typically use the Novu Node.js SDK you installed earlier, creating an instance with your API key and using it to send notifications to your users. For a detailed tutorial and more insights into configuring and using Novu for in-app notifications, including creating notification templates and handling user subscriptions, please refer to the Novu documentation and the specific tutorial I've derived these steps from . This guide provides a high-level overview and should help you get started with integrating Novu into your project. If you have specific questions or run into issues, I suggest checking the Novu documentation for more detailed guidance.

Sources [1] Building a Notion-like system with Socket.io And React - Novu

Ask Inkeep•7mo ago

Got it. Tagging @Support for additional help.

Ammar ZahidOP•7mo ago

I followed these basic steps already, i added this notification bell icon its shows correctly when i click on it My project is basically about a social media platform like LinkedIn Now i wanted when a user likes a post of any user That user should get notification about it I used documentation and ai to add a trigger functionality in my backend api of liking a post now how can i use this

Pawan Jain•7mo ago

@DevRel could you please help @Ammar Zahid or share some of our required guides or apps

Ammar ZahidOP•7mo ago

I am trying to work in react using JavaScript will novu work in it?

sumitsaurabh927•7mo ago

Hey @Ammar Zahid yes, Novu works with js and react. For your use-case, I'd suggest triggering the workflow when the like count increase. In fact, you should use the digest feature so the the user isn't bombarded with notification if they get a lot of likes. If you want, you can take a look at this guide

Gaming

Programming

Novu integration