Visual notification for unread messages in a topic

[Agustin_Carozo (Agustin M. Carozo)]

Hi Romain

A notification system is quite complex.

The majority of the logic will happen on your backEnd.

Here are a couple posts of members trying to figure out a solution:

How to implement notifications for my web app dashboard?

Hello everyone, I’m also trying to implement notifications to my web app dashboard, but I’m still figuring out how am I going to build this. Could you please share your thoughts on how to build it? Should I create a table to keep all notifications that are being sent? How to trigger notifications to specific users? How to manage notifications that have already been read by the user? I’m using an icon like this one to show that there are notifications for the user. [image] Thank you.

Using a third party service:

Anyone using KNOCK with WeWeb for notifications?

Yeah - the NPM has dependencies so it appears to need a custom. There is a repo in VUE 3 for a feed so shouldn’t be a huge lift.

Other than that I tried asking ChatGpt on how you could start to create this system and this is what it came up with:

ChatGPT Answer

How to build a Discourse-like notification system with Xano + WeWeb

To build a forum notification system like Discourse (blue dots for new topics or unread replies), you’ll need:

---

1. Backend data model (Xano)

Make sure you have:

• Users table
• Topics table
• Posts table (each topic can have multiple posts)
• UserTopicView table (logs when a user last viewed a topic)
• UserCategoryView table (optional, for category-level dots)

---

2. Logic to check unread content

When user loads the app, run a query:

• For each topic in a category → check if the last_post_date is after the last_viewed_date in UserTopicView
• If yes → mark as unread
• Sum up unread topics to show a blue dot on category
• For each topic → show a dot if there are unread posts

---

3. On topic visit

• When user visits a topic, call a Xano function that updates or inserts the UserTopicView record with the current timestamp

---

4. In WeWeb

Use conditional logic:

• Show the icon if topic.last_post_date > user_view.last_viewed_date
• You can use a custom query that fetches both the topic list and the user views (via Xano joins or post-processed logic)

---

5. Performance tip

For scale, avoid calculating everything in real-time on the frontend. You can:

• Precompute unread status in Xano responses
• Or store a boolean has_unread_posts in your UserTopicView, updated via backend workflows or CRONs

---

Bonus: Starter logic for Xano functions

• GET unread topics: Join Topics with UserTopicView using user_id. Return only where Topics.last_post_date > UserTopicView.last_viewed_date OR UserTopicView record doesn’t exist.
• Mark topic as read: On topic page load, send a POST to update or insert the UserTopicView.