A Tool Crafted for Team Leader Success

New York Cares (NYC) was founded in 1987 by a group of friends who became frustrated trying to find opportunities to volunteer. Not only was this a challenge for others looking to volunteer, but countless nonprofit organizations were struggling to find help. The answer? A centralized way of recruiting, training, and placing volunteers. Starting small with a few staff members, NYC is now a seasoned nonprofit with 35 years of experience placing volunteers in opportunities around New York City. 

To coordinate their volunteer programs, NYC uses experienced volunteers known as Team Leaders. Unfortunately, when it came to efficiently accessing and updating information for the projects they managed online, Team Leaders didn’t have the means of communicating with the NYC staff in real-time to report on project attendance, impact, and other success factors.

Before NYC found us, their team of in-house developers began working on building a Team Leader Portal that would attach to their main website. First, they created custom APIs to integrate with Salesforce (the canonical source of New York Care’s campaign and volunteer user data) before hitting a roadblock with their website’s Drupal 9 CMS platform. As a result, they needed an outside expert to work alongside them to get the project over the finish line.

Initially, NYC requested that we complete the portal build in Drupal 9 compatible theme with related ReactJS components. First, however, we wanted to verify that this would be the best possible solution.

To start, our team set up the testing suites and a Salesforce sandbox needed to develop the portal on the NYC website. From there, we systematically reviewed the required components to determine if it made sense to use React components. We found that the React approach was not ideal because of the mixed nature of the Salesforce content, the native Drupal content, and React apps rendered within a single root element. In order to have a mix of React and Drupal components within a single layout, we’d have to render multiple React apps on a page. While this is possible, it's not ideal and would result in repetitive code with little benefit. 

Therefore we created a proof of concept along with our suggested approach that utilized Twig components instead to render data pulled from Salesforce via AJAX.

Before our team got to work, there were a couple of things we needed to consider. The first was that we needed to ensure that we would be able to incorporate the designs provided by Wolf & Whale, including custom form elements, a very customized profile page, and dark mode. Next, we would have to integrate the APIs and build on top of the existing custom code written by the NYC team. 

Our team worked hand-in-hand with the NYC developers to build a progressively decoupled site that seamlessly blends content managed in Drupal with real-time data pulled in from Salesforce. We utilized Drupal’s advanced render caching layer and added a custom caching layer that would give the NYC development team fine-grained control over what types of data are cached. This would reduce the number of API calls to Salesforce, improving overall site performance.

Through our ability to work alongside the NYC team, we were able to produce a Team Leader Tool portal, where they can:

• Find Team Leader opportunities based on date and location
• View upcoming and past projects that they’re leading
• Take attendance at an event
• Record the impact of an event ie (“This project fed 200 children”)
• Record an evaluation of the project
• Access and search Team Leader resources
• Update their team leader profile with their image, bio, interests, skills, language, etc.

This project truly showcased the skills of our senior-level Drupal developers and reminded us of the importance of being able to work with a team to come up with the best custom solution.