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

Workshop that walks through building in-app notifications in web apps.

Transcript

2. WORKSHOP!!!
3. The Complete Guide To Building In-App Notifications in Web Apps Prosper, Otemuyiwa Open Source Advocate, Novu Co-founder, Eden Life
4. Let Your Apps Breathe… DON’T SUFFOCATE THEM Prosper, Otemuyiwa Open Source Advocate, Novu
5. What do you know about notifications in general? In Web & Mobile Apps
6. Focus Today: Web Apps ….but a little about mobile too.
7. Lean Focus: In-App Notifications In-App Notifications In-App Notifications
8. 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.
9. ENTER….. NOVU
10. 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.
11. Workshop in steps… 1. Sign up on https://bit.ly/novu-web
12. JOIN THE COMMUNITY - DISCORD https://discord.com/invite/novu
13. Workshop in Steps: 2. Create a Workflow or choose from the Workflow Template Store
14. Workshop in Steps: 3. Add the In-App Channel & Configure
15. 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!
16. Frontend: Clone, replace the credentials & run https://github.com/unicodeveloper/osca-workshop-fr ontend
17. BACKEND APP URL: Trigger a notification https://osca-workshop-backend.vercel.app/api/trigge r-notification
19. BACKEND APP URL: Create a Subscriber https://osca-workshop-backend.vercel.app/api/creat e-subscriber
20. Workshop in Steps: Topics: An easy interface for triggering notifications to multiple subscribers at once.
21. BACKEND APP URL: Let’s create a topic https://osca-workshop-backend.vercel.app/api /create-topic
22. BACKEND APP URL: Let’s add subscribers to a topic https://osca-workshop-backend.vercel.app/api /add-subscriber-to-topic
23. 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.
24. BACKEND APP URL: Trigger Notification to topic https://osca-workshop-backend.vercel.app/api /trigger-notification-to-topic
25. 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
26. One more thing: Novu welcomes you to contribute to it & please don’t forget to star the repo. 🌟
27. THANK YOU! Connect with me on Twitter: @unicodeveloper