Making Notifications Instant and Effortless

Notifications only work if they’re instant, clear, and actionable. I built a Notification Center that delivers updates in real time while staying responsive and intuitive.

A big part of the challenge was handling multiple notification types. The backend returns a type for each notification, and each type has a slightly different UI — some need icons, others avatars, some have call-to-actions, others don’t. I built a custom mapper that dynamically applies the correct design for each type, making sure the frontend always matches the intended UI.

Another core challenge was real-time updates with smooth state management. I used Socket.IO for live events and useInfiniteQuery for efficient paginated fetching. Loaders, empty states, and smooth transitions between batches were all critical to keep the experience seamless.

Actions like marking as read, deleting, or marking all as read required careful handling. I implemented optimistic updates using TanStack Query: the cache updates immediately for a snappy response, the request is sent to the server, and if it succeeds the cache is refreshed with fresh data; if it fails, the changes are rolled back. This made interactions feel instantaneous without risking inconsistent data.

Finally, I added web notifications via vueuse’s useWebNotification, so users get alerts even when they’re not actively on the page.

The end result is a Notification Center that’s fast, reliable, and highly interactive, giving users an effortless way to stay informed while maintaining clean, consistent design across all notification types.