Day 20 – Building Notification Logic: Keeping Users in the Loop
Nader Fkih Hassen

Nader Fkih Hassen @nader_fh

About: Newly graduated computer science student exploring full-stack development. Interested in clean design, practical solutions, and growing one step at a time.

Joined:
Jun 12, 2025

Day 20 – Building Notification Logic: Keeping Users in the Loop

Publish Date: Jul 6
0 0

🧭 Why Notifications Matter
Legal professionals are busy. They don’t want to log in just to check if something changed. So for Lura, our legal case platform, I began implementing a notification system to make sure users get the right information at the right time — whether it's a new document, case, or event.

It’s not about spamming them — it’s about respecting their time.

🏗️ System Goals

  • Notify users when:

    • A new document is added to their case
    • A new calendar event is assigned
    • A case is created or updated
  • Let users view unread/read notifications

  • Allow notifications to be dismissible

  • Eventually extend to real-time push or email

🧱 Backend (NestJS + Prisma)
I added a new Notification model in our Prisma schema:

prisma
model Notification {
  id          String   @id @default(uuid())
  message     String
  userId      String
  isRead      Boolean  @default(false)
  createdAt   DateTime @default(now())
}
Enter fullscreen mode Exit fullscreen mode

Every time a document or event is created, the server creates a new notification assigned to relevant users (typically by role or case ownership).

In NestJS, I created a reusable NotificationService:

ts
@Injectable()
export class NotificationService {
  constructor(private prisma: PrismaService) {}

  async notify(userId: string, message: string) {
    return this.prisma.notification.create({
      data: { userId, message },
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Then I injected that into controllers like DocumentController and EventController to trigger alerts automatically.

💻 Frontend (Next.js + TailwindCSS)
On the user dashboard, I created a simple notification bell icon. When clicked, it shows a dropdown of the latest alerts.

tsx
{notifications.map(note => (
  <div key={note.id} className="bg-white shadow-sm p-2 rounded-md">
    <p className="text-sm">{note.message}</p>
    <span className="text-xs text-gray-400">{formatDate(note.createdAt)}</span>
  </div>
))}
Enter fullscreen mode Exit fullscreen mode

Unread notifications are highlighted, and users can mark them as read with one click. I used a small badge icon to show the count of unread alerts.

🔐 Access Control
Only users assigned to a workspace/case receive its related notifications. The backend checks user roles before inserting or displaying alerts.

💡 What I Learned

  • Notifications aren’t just UI features — they’re about clarity and communication.
  • Timing and relevance matter more than frequency.
  • Prisma made it really easy to store and retrieve alert metadata.

❓Question
What’s the worst or best notification UX you’ve seen in a real product? Something that made you go, “Wow, this helped”… or “Why did they send me this?”

nestjs #nextjs #notificationsystem #uxdesign #backend #prisma #internshipexperience #30DaysOfLearning #LuraApp

Comments 0 total

    Add comment