The Complete Guide to building In-App Notifications in Web Apps

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

WORKSHOP!!!

Slide 3

Slide 3 text

The Complete Guide To Building In-App Notifications in Web Apps Prosper, Otemuyiwa Open Source Advocate, Novu Co-founder, Eden Life

Slide 4

Slide 4 text

Let Your Apps Breathe… DON’T SUFFOCATE THEM Prosper, Otemuyiwa Open Source Advocate, Novu

Slide 5

Slide 5 text

What do you know about notifications in general? In Web & Mobile Apps

Slide 6

Slide 6 text

Focus Today: Web Apps ….but a little about mobile too.

Slide 7

Slide 7 text

Lean Focus: In-App Notifications In-App Notifications In-App Notifications

Slide 8

Slide 8 text

Pain Points in Building Notification Features / Systems 1. Setting up Notification Providers. 2. Writing custom code every time from project to project. 3. Adding Multiple Channels. 4. Adding & Switching Between Multiple Providers. 5. Building Digest & Delay Systems.

Slide 9

Slide 9 text

ENTER….. NOVU

Slide 10

Slide 10 text

What Novu is & provides… 1. Single API for all messaging providers(In-App, Email, SMS, Chat) 2. Easily Manage notifications over multiple channels. 3. Ships with CMS for layouts & design management. 4. Analyze multi-channel messages in a single dashboard. 5. Embeddable Notification Center with real-time updates.

Slide 11

Slide 11 text

Workshop in steps… 1. Sign up on https://bit.ly/novu-web

Slide 12

Slide 12 text

JOIN THE COMMUNITY - DISCORD https://discord.com/invite/novu

Slide 13

Slide 13 text

Workshop in Steps: 2. Create a Workflow or choose from the Workflow Template Store

Slide 14

Slide 14 text

Workshop in Steps: 3. Add the In-App Channel & Configure

Slide 15

Slide 15 text

Workshop in Steps: 4. Clone this backend: https://github.com/unicodeveloper/osca-worksh op-backend 5. Run it locally - npm install & npm run dev …let’s add the appropriate env variables. ALTERNATIVE: Fire up postman & let’s use that!

Slide 16

Slide 16 text

Frontend: Clone, replace the credentials & run https://github.com/unicodeveloper/osca-workshop-fr ontend

Slide 17

Slide 17 text

BACKEND APP URL: Trigger a notification https://osca-workshop-backend.vercel.app/api/trigge r-notification

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

BACKEND APP URL: Create a Subscriber https://osca-workshop-backend.vercel.app/api/creat e-subscriber

Slide 20

Slide 20 text

Workshop in Steps: Topics: An easy interface for triggering notifications to multiple subscribers at once.

Slide 21

Slide 21 text

BACKEND APP URL: Let’s create a topic https://osca-workshop-backend.vercel.app/api /create-topic

Slide 22

Slide 22 text

BACKEND APP URL: Let’s add subscribers to a topic https://osca-workshop-backend.vercel.app/api /add-subscriber-to-topic

Slide 23

Slide 23 text

Workshop in Steps: Topics make it possible to trigger a notification to all subscribers assigned to a topic. It helps avoid listing all subscriber ids in the `to` field of the notification trigger.

Slide 24

Slide 24 text

BACKEND APP URL: Trigger Notification to topic https://osca-workshop-backend.vercel.app/api /trigger-notification-to-topic

Slide 25

Slide 25 text

Resources to learn about Novu & In-App Notifications - https://docs.novu.co/ - https://www.youtube.com/@novuhq - https://dev.to/novu - https://novu.co/blog

Slide 26

Slide 26 text

One more thing: Novu welcomes you to contribute to it & please don’t forget to star the repo. 🌟

Slide 27

Slide 27 text

THANK YOU! Connect with me on Twitter: @unicodeveloper