Timeline 
Team 
Tech To keep sales teams in the loop, Nutshell allows users to subscribe to notification about the status of leads, upcoming activities, and more. These notifications appear in a slide-out sidebar that displays them in a chronological list. This feature was a familiar and important part of many users’ workflows, but while most of the application has been rebuilt on modern technologies, our notification sidebar remained stuck in the past, with loading times and responsiveness leaving much to be desired. I was tasked with modernizing this notification system by re-implementing it in React and GraphQL to bring it up to speed with the quick and reliable Nutshell experience our customers expect. This also makes our notification system maintainable and extendable for future developers, as it uses the same modern framework and conventions as the rest of our app.
Our product designer Hana handed off the design spec of the new notification system; she did a great job breaking it down into reusable components. There are over 15 types of notifications, but they are all displayed in the same versatile notification cell component. To keep the front-end components as simple as possible, the complexities of what content to show for each notification type was delegated to the backend, which returns a simple, standardized API response. My manager Chris helped show me the ropes of building our GraphQL schema to support this new data.
Switching from a REST API to GraphQL was a significant performance improvement, allowing us to fetch new notifications much faster than before. It also allows us to make user interactions snappy with optimistic response; a notification’s status is toggled from unread to read immediately upon click, before the query response is even received.
