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.
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.
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
Dmitry TernerWebsite Manager at Avenues
as well as the ease of implementing enhancements and inherent security improvements.
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
Dmitry TernerWebsite Manager at Avenues
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.
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.