Novu React Quickstart

This sample app demonstrates how to integrate Novu's Notification Center in a React app.

It demonstrates how to trigger notifications from any backend and view them in real-time within the app.

You can refer to this guide to know more about it.

Configuration

Create a free account in Novu

1. Go to Novu and click Sign Up.
2. Use GitHub Account to login.

Obtain Credentials

Your project needs to be configured with the following:

1. App Identifier
2. API key from your Novu dashboard.
3. SubscriberId to send notifications to.

Run the project

To run the project, first, clone the repo.

cd Front-end

npm install

Create a .env file and the following variables - REACT_APP_SUB_ID and REACT_APP_APP_ID to it.

REACT_APP_SUB_ID is the identifier for the 'SubscriberID' and it is used to identify the subscriber you're sending notifications to.

You can obtain the 'SubscriberID' from the Novu dashboard. REACT_APP_APP_ID, on the other hand, is the identifier for the application.

You can get your own application identifier from the Novu dashboard settings.

Start the front-end using:

npm start

Now, we'll set up the backend:

cd ../Back-end

npm install

Create a .env file and the variable - NOVU_API_KEY to it. It has been logged in novu.js at line 6. Use it to confirm your key value. You can get your API key from the Novu dashboard.

Fire up the backend server using:

npm start

⭐️ Why Novu?

Novu provides a unified API that makes it simple to send notifications through multiple channels, including In-App, Push, Email, SMS, and Chat. With Novu, you can create custom workflows and define conditions for each channel, ensuring that your notifications are delivered in the most effective way possible.

✨ Features

• 🌈 Single API for all messaging providers (In-App, Email, SMS, Push, Chat)
• 💅 Easily manage notifications over multiple channels
• 🚀 Equipped with a CMS for advanced layouts and design management
• 🛡 Built-in protection for missing variables (Coming Soon)
• 📦 Easy to set up and integrate
• 🛡 Debug and analyze multi-channel messages in a single dashboard
• 📦 Embeddable notification center with real-time updates
• 👨‍💻 Community driven