Back to battles
mediumupcoming

Notification Center

A notification system with types, actions, grouping, and real-time updates.

30 min limit0 participants
javascriptcssui
PRD
# Notification Center PRD

## Overview
Build a notification center UI component with multiple notification types, action buttons, date grouping, real-time simulation, and toast popups for new notifications.

## Requirements
- Notification types: info, success, warning, error, mention
- Notification bell icon with unread count badge
- Dropdown panel showing list of notifications
- Mark individual notifications as read
- Mark all notifications as read with one click
- Group notifications by date: today, yesterday, earlier
- Notification actions: accept/decline buttons for invites, view link for mentions
- Dismiss and delete individual notifications
- Notification preferences panel to toggle types on/off
- Real-time simulation that generates random notifications on a timer
- Toast popup notifications for newly received items
- Filter notifications by type and read/unread status
- Notification sound toggle
- Time-ago display (e.g., "2 min ago", "1 hour ago")
- Infinite scroll in the notification panel
- Persist notification state to localStorage

## Tech Stack
- JavaScript or any frontend framework
- CSS for animations and layout
- No notification libraries

## Scoring Criteria
- **Functional (40%)**: Notifications display, mark as read works, grouping and filtering work
- **Quality (20%)**: Smooth animations, proper state management, clean UI
- **Fidelity (25%)**: All types, actions, real-time simulation, and preferences present
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit30 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI