- 3 min to read
Towards A Better Education: Avenues Case Study
For Avenues, the performance increases that came with a static site were icing on the cake.
By Arkadiusz Gorecki
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.
Join Bejamas newsletter
Get our EXCLUSIVE web development case studies in your mailbox!
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.
Storyblok
For Avenues, Storyblok was CMS of choice because it offers a great combination of standard headless CMS with a seamless “page builder” for editors. Thanks to its live preview option it makes updating content on static websites more convenient. Basically, with it, the editor in charge can make new pages as well as instantly see how the changes to the old ones look like on the website without the need to wait for a rebuild.
Gatsby
If you have had the chance to read at least one of our Jamstack case studies so far, you know we love Gatsby. It is a modern-day React-based static site generator and, in most cases, our go-to framework because of the smooth development experience it offers, incredible results, and amazingly helpful community.
- 🌎 CDN
Netlify
When it comes to hosting and serverless backend services for static websites Netlify is one of the best companies. In this particular case, we’ve used Netlify to host a global version of the website as continuous integration and continuous delivery (CI/CD) solution, so a new build is triggered after every push to GitHub repository. On top of that for the Chinese version, we were obliged to host its files on China servers which meant we needed a different solution for it.
- 🇨🇳 Server
Buddy.works
With Netlify being CI/CD and hosting option for global version, we needed a different CI/CD automation tool that would build the website and send the files to the hosting server in China. We opted out to Buddy.works and we were able to get the same automation as with Netlify. Buddy is a web-based and self-hosted continuous integration and delivery software for Git developers that can be used to build, test and deploy web sites and applications with code from GitHub, Bitbucket and GitLab.
Storyblok
For Avenues, Storyblok was CMS of choice because it offers a great combination of standard headless CMS with a seamless “page builder” for editors. Thanks to its live preview option it makes updating content on static websites more convenient. Basically, with it, the editor in charge can make new pages as well as instantly see how the changes to the old ones look like on the website without the need to wait for a rebuild.
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.
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.
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.