Roles Served

"Athena is a SaaS-based executive community that makes it easy and accessible for women leaders to learn from their peers. As the first Executive-Education-as-a-Service platform, Athena delivers live and on-demand learning, coaching, networking, and access to career opportunities for the world’s top women leaders. From preparing for a board seat or a career transition to scaling a company and growing your team, Athena members are one-degree separated from the most pressing business insights, connections to other leaders, and access to career-transforming opportunities."

- athenaalliance.com

With Athena's ever-evolving platforms, I was tasked with developing their latest offering: the Athena Library; a way for their members to access virtual events on-demand with a Netflix-like experience. Community members can RSVP for future events, watch past events, bookmark, find, and engage in a new and exciting way.

It was imperative that the application be performant and scalable, with the added caveat that administrators have the ability to quickly and easily modify any data displayed on the interface.

We found that the project requirements were perfect for Static Site Generator (SSG) functionalities and JAMStack, as Athena Alliance has already amassed hundreds of speakers, events, categories, and collections, all of which have their own unique pages.

Technologies

• Next.JS
• Node.JS
• Contentful Headless CMS
• GraphQL

Problems

1. Athena had already amassed a library of hundreds of events, speakers, categories, and collections--all of which needed their own unique pages. Furthermore, over the coming years, their strategy is to significantly expand upon this and scale to perhaps thousands more. How might we develop a platform in a way that can scale to the needs of the organization in a performant way?
2. Athena had been using Thinkific's learning management system (LMS) and Salesforce combined as a way to store events' data; combined this created a very clunky process for administrators to add, update, or delete events. How might we reduce this multi-step and mundain process and streamline data entry?
3. Without taking on the added project risk of introducing a new source of truth, in the form of a database, how might we ensure that existing and new data between several systems is synced and consistent?

Solutions

1. Using Next.JS, GraphQL, and Contentful together, the Athena Library is able to build hundreds and ultimately ~millions of static pages during build time. As opposed to relying on an API call to retrieve dynamic data during run-time, we simply query what we need and inject the data into a template, which is then hosted and served as html & css. This offers many benefits, with performance as the primary driver for why we decided upon this architecture. Target and Nike are others using Next.JS to construct millions of product pages during build-time.

2. Contentful is what is referred to as a Headless CMS, which in essence is just a product that enables users to input data; that data is then accessible via an API, which can be integrated and used anywhere you would like. In our case, Contentful solved a critical problem--instead of a multi-step admin process of inputting data in various systems, now admins can add everything in Contentful, which is easy-to-use and extremely user-friendly.

3. Instead of introducing another system into an already complex set of platforms, we decided to create our own webhook in Node.JS, which is triggered when data is modified in Contentful. Once the webhook is triggered, it receives the data payload from Contentful and handles all of the transformations needed before being sent to other parts of the Athena infrastructure.

Product