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

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

Transcript

1. View Slide

2. WORKSHOP!!!
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Lean Focus:
   In-App Notifications
   In-App Notifications
   In-App Notifications
   

   View Slide

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.
   

   View Slide

9. ENTER…..
   NOVU
   

   View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

27. THANK YOU!
    Connect with me on
    Twitter: @unicodeveloper
    

    View Slide