SaaS Notifications System

Build a notifications system for a project management SaaS application to keep users informed about important activity and messages.

3-5 hours

About This Project


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.


  • 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.

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In


  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

Skills Practiced

  • Dynamic UI Rendering: Implement UI components that react to state changes, ensuring notifications are updated interactively and in real time.
  • Event Handling and State Management: Develop mechanisms to manage user interactions and application state, particularly for marking and tracking notifications.
  • Date Manipulation: Employ date handling techniques to manage the lifecycle of notifications, especially for auto-deletion after 30 days.
  • Framework Proficiency: While the project can be completed using vanilla JavaScript, you may wish to leverage a JavaScript library or framework. If so, this is a great project to demonstrate expertise in a chosen framework (e.g., React, Vue, Angular) by leveraging its features for state management and dynamic UI updates.


Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Currently, we only provide feedback on capstone projects, through our Code Review service.

The Code Review is a premium service available as an add-on purchase, combining an in-depth review of your code and a practice interview. If your project passes the review and meets all specifications, you'll receive a certificate of completion.

Where can I ask a question that isn't answered here?

Email us at or chat with us.

It's Time to Level Up

Start Building