301 True Friend of Skovoroda
On the foundation of the old, we are constructing a new, free from stereotypes, prejudices, and mystification modern museum, dedicated to H. S. Skovoroda
Country
Ukraine
Time frame
2023 - now
Industry
Culture
Project type
Website
Services
Web Development, CMS Development
Technologies
Next.js, React, SCSS, Payload CMS, MongoDB
"On May 6, 2022, the National Literary Memorial Museum of Hryhorii Skovoroda. The museum was destroyed by a direct hit from a russian missile. The surviving statue of Skovoroda, illuminated by the sun, became a symbol of inheritability. In order to preserve what is left, the museum needs immediate emergency and conservation works." — the museum team.
What is this project about?
I belong to those who value a friend so much that they prioritize them above all and consider friends... the best adornment of life.
Hryhoriy Savych Skovoroda
We might have shocked you with the very first frame, but this is the horrifying truth of the story. This case truly differs from all our other projects. We want to tell you not only about the technical aspects of creating the website or the peculiarities of its design. Our team is also here to share the story of this initiative, which carries social value and aims to preserve an important cultural monument in Ukraine. The building was destroyed with the russian missile in 2022. The war in here is still going on, remember about it.
Skovoroda is a Ukrainian philosopher and writer, who always valued friendship, considering it a treasure, and he would sign his letters like this: "Your true friend Hryhoriy Savych." He contemplated ethical concerns and concentrated primarily on the philosophy of happiness, delving into questions about the nature of happiness and its attainability for all. Key themes for Skovoroda revolved around freedom and achieving happiness through self-awareness.
To celebrate the philosopher's birthday, the museum’s team created the project "301 Hryhoriy Skovoroda's True Friend" to draw attention to the destroyed house of Savych, which may not survive this winter. The project has announced a major fundraising campaign, with the goal of preventing the final destruction of the museum.
P.S.: You can also join the fundraising efforts and support the museum; all information is available on the project's website.
Zapal & Skovoroda museum collab
"Who kindles well, begins well, and to begin well is half done," wrote Hryhoriy Savych.
As you've noticed, we are fond of aphorisms and expressions of the philosopher. Skovoroda always held a special place in the consciousness of each member of our team. He is a teacher, a friend, and a mentor to us. So, as soon as we learned about the need for assistance to Skovoroda's museum, Zapal was ready to take actions straight away.
Our team had the opportunity to be among the first partners of the project and join the initiative to aid the museum destroyed by Russia. This became a story of the true collaboration & long-term partnership. We were pleased to assist the museum in creating a website that facilitated fundraising and will continue to promote the story of preservation and restoration of the building.
Zapal believes it is crucial to support social initiatives, to be true friends, especially in such challenging times for our country. We are here to create, transform, and improve.
How everything unfolded, the technologies we chose for development, challenges during project implementation, the record number of days for development, and "how did you manage it? It's impossible" – these are all detailed below. Read all of this and even more.
The story of the development, or 1000 & 1 challenge
5 days, 3 nights, 100+ hours of work, and the energy that inspired us even 301 years later.
Our main challenge withing this project was time. Tight deadlines, the desire, and the necessity to deliver the website on time, alongside "quality", seemed like impossible concepts. But "impossible" is not in Zapal's vocabulary.
Our best developers, plenty of coffee, and a belief in the power of friendship made it possible to implement a website developed with Next.js 14 and Payload CMS within a few days. Despite the short deadline, our priorities remained quality, stability, and minimizing future operational costs for the website.
Creating flawless, clean code was a necessity for the future continuous expansion of the site with new pages and additional content. What did we choose for maximum optimization and development quality?
Our tech choice
"Perceive the invisible through the visible," said Savych. So, let's explore the hidden technologies from the visible pages of the website and talk a bit about how this project was created from the technical side.
We chose Next.js as our framework for building the website. Why? Simply put, it's utilized React, helps make any changes efficiently, creating an environment where any changes that occur happen directly in React's virtual DOM. With such a level of optimization, the process of making changes takes only a couple of hours instead of several tens. Optimization was crucial for this case, as you may’ve already got that.
Additionally, as mentioned above, we used the new Next.js framework "app folder" architecture.
A bit more about Next.js itself – it is a React library on steroids. Extends its capabilities with additional features, including server-side rendering.
Next.js also provides an API layer that works based on Node.js and allows building a Node.js application inside your Next.js app, avoiding the need to separate them.
Next.js provides an image component that automatically compresses images into WEBP format for faster loading and avoids large coverage. The image component also performs many other optimizations behind the scenes that can radically improve performance without our involvement.
The new Next.js 14 architecture introduced Turbopack, an engine based on Rust, which elevated our development at the local level, resulting in about 53% faster local server launch and 94% faster code updates using Fast Refresh.
Now, if we talk about the content management system – we again chose Payload. Yeah, because we truly believe, and have verified numerous times in practice, that this system works efficiently and satisfies all the needs of both developers and our clients. Payload is also developed in React, so the further advantages of this technology are quite evident. Moreover, Payload has a very convenient and user-friendly interface, making it easy for even inexperienced users of admin panels to quickly understand how to work with it.
Have you noticed that our website header changes its color depending on the background color? It's a fantastic idea but quite a complex implementation. We used a color inversion approach, meaning it's inverted concerning the background color. We tried to make it as fast and optimized as possible, which is why we chose to implement this functionality using the Native Browser API.
Thanks to this choice, the website turned out to be functional and fast, while keeping its primary UI ideas implemented.
Peculiarities of colors
The statue of Hryhoriy Savych is almost the sole survivor of that night.
Illuminated by the sun, it became a symbol of resilience.
The colors you see on the website were not chosen randomly.
The serene yellow represents the sun that shone so brightly that day,
it is also the color of the building that was destroyed.
The gentle blue reflects the color of the sky from the photo.
Black represents the color of the burned walls,
destroyed by russia.
So what's next?
We are pleased to build strong partnership relations with the museum.
Our collaboration has just begun, and we aim to create yet another project with the museum. It is important for us to contribute important projects to our society, those that create an impact and provide assistance. Our team is honored to be a part of the history of restoring this historical landmark.
We were inspired by the idea of showing the true power of friendship and helping our former teacher, and we are pleased that we have successfully implemented this project.
Ignite your Success Path with Zapal
