Striving for Better Education: Avenues Case Study

Interesting and rewarding projects enhance our skills. Meaningful and ambitious projects bring richness to our hearts. Therefore, it was a great honor to work on a school project that aims to change the world and pave the way for the future through better education.

 

It is an honor and a great responsibility.

The Story of Avenues

Avenues: The World School is one of the schools with multiple campuses, offering a transformative learning experience focused on the world to students around the world. Based in New York, with campuses in São Paulo and Shenzhen, Avenues is dedicated to developing better practices, challenging the status quo, and contributing to education around the world, not just on campus. It was challenging but very rewarding to collaborate on introducing Avenues' mission on the web.

 

1-1 Overview

The previous Avenues website was built on WordPress and has been in use for over 6 years. Due to the increasing complexity of maintenance, Dmitry Terner, the website manager for Avenues, had a clear idea for the future redesign. He wanted to replace WordPress with a modern web development architecture that would remain mainstream in the tech community for at least another 5 years.

 

Previously, due to its weak performance and high percentage of visitors from mobile devices, we wanted to create a smooth and fast mobile-friendly website. We also wanted to reduce costs and streamline development. Additionally, he was looking for a simple and elegant CMS to support multilingual requests.

 

1-2 Used Stack

When considering issues and vision, Avenues already had a serverless infrastructure, so the introduction of a headless CMS made perfect sense from the beginning. From there, it was a natural progression to choose Jamstack.

 

Gatsby as a static site generation tool, Storyblok as a content management tool, and Netlify as a hosting and CI/CD solution.

 

Storyblok

For Avenues, we have chosen Storyblok as our CMS, which combines a standard headless CMS with a seamless "page builder" for editors. Thanks to the live preview option, it is now easier to update content on static websites. Essentially, editors can not only create new pages, but also instantly preview changes to existing pages without having to wait for a rebuild on the website.

 

This stack has already been used in several projects as it has been proven to be a reliable user/editor-centric combo. Storyblok is a great CMS that allows editors to have full control over website content. Previously, there were concerns about the requirement to store files on Chinese servers, but I was truly amazed by the smooth integration of Gatsby and Buddy. However, there were some challenges.

 

I was able to directly receive the benefits of Jamstack. The cost was clearly beneficial, as well as the ease of implementing extensions and improving inherent security.

 

Dmitri Turner
Site Manager at Avanews

 

1-3 Biggest Challenge in this Project

Styled-Components, which was supposed to be a great help, has become one of our biggest challenges.

 

What are styled components? Styled Components is a variation of CSS-in-JS that allows you to write actual CSS code without class name conflicts to style your components.

 

We focused on creating highly customizable components rather than having many small, similar ones. This was a challenging task as we had strict design guidelines from the client and poorly designed components could potentially affect the overall performance of the website.

 

1-4 Results

The current setup has been found to be much more streamlined, cost-effective, and versatile. While we have not yet utilized this, the ability to completely separate the content layer and presentation layer through API access has opened up new possibilities for the Avenues team. They are now considering how they can expand this using an application for the lobby screens on campus. The major benefit is that they no longer have to worry about server infrastructure.

 

For Bejamas, learning is an exciting journey that begins with proper education and hopefully continues for a lifetime. Working with people who dedicate their lives to education has made our efforts much more valuable.

 

Bejamas recommended Storyblok CMS as an expert in Jamstack products, which we had not considered in-house. We are truly grateful for their guidance, approachability, and expertise, as they were exactly what we were looking for in this project.

 

Dmitri Turner
Site Manager at Avanews

 

At Avenues Project, we were able to truly make a difference, impact the future, and build faster, better websites all at once.

 

How many people can be said to have brought change to the world today?