Instructions

Your task is to develop a system that not only informs users about the latest updates and actions but also engages them with interactive and real-time functionality.

The notification system should include a visible indicator in the navigation menu, a dedicated notifications page, visual cues distinguishing unread notifications from read notifications, and options for archiving and deleting notifications.

You may use any tools you wish in order to build the frontend. Detailed designs are provided, so try to match those. If you figure out a more efficient way to implement the core functionality, feel free to pursue it.

Our focus in this project is practicing responsive design, data retrieval, DOM manipulation, and state management. We have provided a JSON file with sample notification information that you can use to populate the notification page and to save changes.

Objectives

• Develop a Notification Indicator: Implement a visual notification bell in the navigation menu that alerts users to new updates.
• Create a Notification Page: Design a page where users can view all their notifications related to their projects.
• Manage Notification States: Allow users to mark notifications as read, delete notifications, and view archived notifications.
• Enhance Interaction with Real-time Feedback: Notifications should update dynamically, reflecting real-time changes without the need to refresh the page.

User Stories

1. Notification Awareness: As a user, I want a clear indicator in the navigation bar showing when I have new notifications to ensure I'm constantly updated.
2. As a user, I need a dedicated page to view all my notifications so I can easily track updates and actions on my projects.
3. Quick Identification of New Notifications: As a user, I want to distinguish unread notifications quickly to prioritize new information.
4. Organization of Notifications: As a user, I need to mark notifications as read and delete unnecessary notifications to maintain an organized view.
5. Archival of Notifications: As a user, I want to access an archive of read notifications to refer back to previous updates or confirm actions.

Acceptance Criteria

• Notification Indicator: The notification bell must show an unread count and update dynamically as new notifications arrive.
• Notification List Page: The page must list all notifications and provide options to mark as read, delete, or archive.
• Handling Unread and Read Notifications: Unread notifications must be easily identifiable, and users should be able to mark them as read, automatically moving them to an archive upon next load.
• Deleting Notifications: Users must be able to delete notifications, with the system removing them immediately from the list.
• Archiving Notifications: Read notifications should be archived and automatically deleted after 30 days.

Stretch Goals

To go above and beyond, consider choosing one or more of the following objectives:

• Notification Filters: Add filtering options to sort notifications by type, project, or date.
• Interactive Notifications: Enable direct interactions from notifications, such as accepting invitations or completing tasks, to increase efficiency. You can take this implementation as far as you like - the provided materials don't specify how to implement invitations or tasks, so feel free to mock this data.
• Real-Time Updates: Use technologies like WebSocket or polling to fetch and display notifications in real time, simulating a live environment.

Starter Materials

To help you get started, you're equipped with the following assets:

• Project Images: Necessary image files, including Buggsy's logo and icons, are provided. The files are in svg format to improve performance.
• Style Guide: A comprehensive guide provided by Buggsy, detailing color schemes, fonts, and other design elements to align your navigation menu with the brand's aesthetic.
• Preview Images: Visual benchmarks to guide your design to completion.
• Figma File: Leverage design files in Figma as a blueprint for your development efforts.