In the previous three parts of this story, we talked about “building” the Idealist Nonprofit Salary Explorer. While we’ve discussed the research and design that led us to the specifications for what we wanted to build, we haven’t really gone into the details of what it means to actually create a working technology product like this.

Behind the scenes of every great web application is a team of talented software engineers who work to make the product come to life. At the time, Antoine Leclair joined our data scientist Ann-Julie Rhéaume in Nonprofit Salary Explorer meetings with stakeholders, subject matter experts, and designers.

Antoine is the engineer responsible for most of what has been built on the back end of Idealist’s codebase since the website was relaunched in 2017. At that time and soon after, Antoine, Ann-Julie, and others made the decision to build using a tech stack that includes:

• Python as the primary language for the back end
• Javascript (specifically React) as the primary language for the front end
• PostgreSQL as our database
• Heroku as our cloud application platform
• Algolia to power our site’s search engine
• Fastly as our Content Delivery Network (CDN)
• Vertex AI for the machine learning model powering the Estimated Range of the main Nonprofit Salary Explorer visualization
• And a number of other middleware solutions to keep everything running (Postmark, RabbitMQ, Iterable, etc)

To make the beautiful data visualization designs for the Nonprofit Salary Explorer come to life on the front end, Senior Software Engineer Mike Vattuone first experimented with open source visualization libraries. After a bit of tinkering, it became clear that in order to get the level of customization that was needed for this product, we’d want to build our own visualization tool from scratch. React, as a Javascript framework, makes it more intuitive for engineers to handle data visualization than “old-fashioned” JS, so Mike opted not to use D3 or another framework that would add dependencies and increase page load time.

Mike went through a few different iterations for the code implementation. He collaborated heavily with our Art Director Marian Blair to create little moments of surprise and delight in loading animations, hover interactions, and overall functionality.

In addition to these lovely charts on the front end, we have built several back end and staff-facing systems to support this product. In addition to the previously mentioned title categorization system, we have safeguards in place to ensure the quality of our data. If our application detects an outlier salary submission, it’s added to a queue where it can be evaluated for its validity by Idealist staff.

As we continue to improve the Nonprofit Salary Explorer, our engineering lead Farid Rener and front end engineers Andrew Dittes and Philippe Dionne have all contributed to the product’s evolution.

We now have a gorgeous interactive product that our whole team is incredibly proud of. We’ve heard stories from many people in the Idealist community who have used the Nonprofit Salary Explorer to negotiate a higher salary and find job opportunities that align with their career plans. We hope that this tool can continue to contribute to increased pay equity and pay transparency throughout the nonprofit sector.

Thank you to everyone who had a hand in the development of this product. We here at Idealist will continue to work to make products that support social change, and we’ll keep you in the loop as new releases are deployed!

What should we build next? Contact us to let us know!