Towards A Better Education: Avenues Case Study

Last update: Wednesday, February 5, 2020

Written by: Arkadiusz Gorecki

For Avenues, the performance increases that came with a static site were icing on the cake.

Interesting and challenging projects sharpen our skills. Meaningful and aspiring projects bring warmth to our hearts. That’s why it was a privilege working on a project for a school that aims at changing the world and shaping the future with a better education.

A privilege and a HUGE responsibility.

The Avenues Story

Avenues: The World School is one school with many campuses providing transformative, world-focused learning experiences to students around the globe. Headquartered in New York with campuses in São Paulo and Shenzhen, and with a virtual campus open to the global audience, Avenues is on the mission to develop better practices, challenge the status quo, and further the cause of education not just at their campuses but around the world as well. Helping Avenues in showcasing that mission on the web, however challenging it was, was extremely rewarding as well.

The Overview

The previous Avenues site was built on WordPress and was over six years old. The upkeep and maintenance over the years became complicated. Dmitry Terner who is Website Manager at Avenues had pretty much a clear idea about upcoming re-design. He wanted to replace Wordpress with a modern-day web dev architecture that will be under the fray of tech communities for at least 5 years more.

With a major percentage of visits coming from mobile, and with the performance being a weak point previously, he wanted a smooth and fast mobile-friendly website. He also wanted to cut costs and keep development streamlined. Finally, he wanted a simple and elegant CMS that would back up their multilingual request.

[@portabletext/react] Unknown block type "newsletter", specify a component for it in the `components.types` prop

The Stack We Used

Given the problems and the vision Avenues already had a serverless infrastructure with a headless CMS made sense right from the start. From there the rest of Jamstack pieces fell into place.

Gatsby as a static site generator, Storyblok as a content management tool, and Netlify (with a bit of help from Buddy) as hosting and CI/CD solution.

[@portabletext/react] Unknown block type "stack", specify a component for it in the `components.types` prop

We've already used this stack on a couple of projects as it proved to be a reliable user/editor-centric combo. Storyblok is an amazing CMS that gives editors complete control over website content (excluding devs from the equation). Now, we have had concerns in regards to obligatory file keeping on Chine servers but we're really blown away by the smooth integration between Gatsby and Buddy. However, there were a couple of challenges.

For us, the benefits (of Jamstack) are straightforward. Cost is an obvious win
as well as the ease of implementing enhancements and inherent security improvements.

Dmitry TernerWebsite Manager at Avenues

The Biggest Challenges We’ve Had On This Project

One of the biggest challenges we had, was the thing that was supposed to be a huge help in the first place. I’m talking about Styled-Components.

What Are Styled-Components? Styled Components is a variant on CSS-in-JS that lets you write actual CSS code to style your components without the worry of class name collisions.

We were focused on creating highly customizable components rather than having a number of smaller, similar but different ones. We had strict design guidelines from the client so this proved to be pretty challenging as poorly designed components could affect the overall website performance badly.

The Results

The current setup turned out to be much more streamlined, cost-effective, and versatile. Although they have not taken advantage of this yet, the ability to have fully separated content and presentation layers with API access opened a new perspective to the Avenues team. They are now looking at how can they expand on this with applications for lobby screens on their campuses. Not having to worry about server infrastructure is a huge bonus.

For most of us at Bejamas learning is an exciting journey that starts with proper education and hopefully lasts a lifetime. Being able to work with people that dedicate their lives to education made our efforts so much more worth the effort.

Bejamas stood out as experts on the Jamstack products that are available and
recommended Storyblok CMS which was not on our radar previously. That kind of
guidance, approachability, and subject matter expertise is what we were
looking for. I am very happy with our decision.

Dmitry TernerWebsite Manager at Avenues

With the Avenues project, we are truly making a change, influence the future, and make a faster and better internet one website at a time.

How many of you can say you’ve made a difference in the world today?

Need help with your website or an app? Let’s get in touch!

CLICK HERE to schedule a 1-on-1 talk and learn more about what we can do for you and your business.