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