Challenge Overview
Challenge Overview
Your task in this challenge is to add support for notifications in the navbap micro frontend app.
Background
Micro-frontends are “techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently” and we will be using this approach for developing various Topcoder apps.
Benefits that we expect from the micro-frontends approach are:
-
Stop redeveloping things like menus and headers and footers and other frame components with each app
-
Improve code reuse
-
Improve or at least maintain the ability to develop several apps in parallel
-
Improve standardization
Tech Stack
-
Single SPA - https://single-spa.js.org
-
Javascript
-
ReactJS
Task Detail
Task for this challenge is to implement notification features for the navbar frontend micro application (both adding the UI and integrating with the API):
-
Updating the number of unread notifications in the notifications icon
-
Implementing the notifications dropdown to show latest notifications
-
Implementing the “View All Notifications” page to show all unread notifications
Current notifications in Topcoder apps are specific to the notification source - it can be either “connect” or “community” and they have so far been displayed in two separate apps (connect app and community app) and each one has different logic for grouping the notifications (in connect it’s per project, in community it’s per challenge or broadcast notifications).
Navbar app should support both sources and it should expose a method to set the notifications source (other micro apps would call this method to switch between connect and community notifications).
For the UI style we can reuse the same styling present in connect app (so we will use the same style for both sources), but notification grouping logic should be reused from connect and community apps. Both notification sources come from the same API (topcoder notifications api).
To demonstrate switching the notifications source, update the demo react app to show connect notifications and demo angular app to show community notifications.
Base code for the navbar app is available at https://github.com/topcoder-platform/micro-frontends-navbar-app/tree/dev
Demo apps are available at https://github.com/topcoder-platform/micro-frontends-angular-app and https://github.com/topcoder-platform/micro-frontends-react-app
Connect app repository https://github.com/appirio-tech/connect-app (notifications UI is implemented in src/components/Notification* components, grouping logic is implemented in src/routes/notifications/helpers/notifications.js and api calls made at src/routes/notifications/services/notifications.js )
Community app repository https://github.com/topcoder-platform/community-app (UI is implemented in src/shared/components/Notifications, logic in src/shared/containers/Notifications/index.jsx )
Implementing settings page for notifications is not in scope.
Submission Guidelines
-
Submit the full source code for navigation and demo apps and their documentation