301 Справжній друг Сковороди

6 травня 2022 року Національний літературно-меморіальний музей Г.С. Сковороди був зруйнований прямим влучанням російської ракети. Вціліла статуя Сковороди, осяяна травневим сонцем, стала символом незламності. Для того, щоб зберегти те, що залишилось, музей потребує негайного проведення протиаварійних та консерваційних робіт.»
–  команда музею.

Також ви можете переглянути кейс на нашому офіційному сайті за посиланням:
https://www.zapal.tech/uk/projects/301-true-friend-of-skovoroda

Про що проєкт “301 Справжній друг Сковороди”?

Я належу до тих, хто настільки цінує друга, що ставить його над усе і вважає друзів… найліпшою прикрасою життя.»

– Григорій Савич Сковорода

Ми певне шокували тебе одразу першим кадром, але така правда цієї історії. Та цей кейс справді відрізняється від усіх інших наших проєктів тут. Ми хочемо розповісти тобі не тільки про технічну частину створення вебсайту, чи особливості його дизайну. Наша команда також тут, щоб поширити історію про цю ініціативу, що несе суспільну цінність, та має на меті зберегти важливу культурну пам’ятку.Сковорода завжди цінив дружбу, вважав це явище скарбом, і ось так підписував свої листи: “Твій справжній друг Григорій Савич”.

До Дня народження філософа, команда музею створила проєкт “301 Справжній друг Сковороди”, щоб привернути увагу, до знищеного будинку Савича, який може не пережити цю зиму. З ціллю запобігти остаточному руйнуванню музею, проєкт оголосив великий збір, кошти з якого підуть на негайні консерваційні та аварійні роботи.

P.S.: ви можете також приєднатись до збору, та підтримати музей, уся інформація на вебсайті проєкту

Колаборація Zapal та музею Сковороди

Хто добре запалився, той добре почав, а добре почати – це наполовину завершити»
– писав Григорій Савич

Як ти помітив, ми небайдужі до афоризмів та висловів філософа. Сковорода завжди займав особливе місце у свідомості кожного з нашої команди. Він і вчитель і друг і наставник для нас. Отож як тільки-но ми дізнались про те, що музею Сковороди необхідна допомога — Zapal був готовий діяти.

Наша команда мала можливість бути одними з перших партнерів проєкту, та долучитись до ініціативи допомоги музею, зруйнованого росією. Сталась справжня колаборація. Ми з метою втілити наші альтруїстичні цілі були раді допомогти музею зі створенням вебсайту, що допоміг зі збором коштів, та просуватиме й надалі історію збереження та відновлення будинку. Zapal важливо допомагати суспільним ініціативам, бути справжніми друзями особливо в такі важкі для нашої країни часи. Ми тут, щоб творити, змінювати, покращувати.

Ми добре запалились (звичайно — ми ж Zapal, як інакше). Добре почали та швидко та якісно завершили створення вебсайту.

А як саме усе відбувалось, технології, що ми обрали для розробки, виклики під час реалізації проєкту, рекордна кількість днів на розробку, та “як ви це встигли? це не можливо” - почуті нами від інших компаній. Це все, та навіть більше читай нижче.

Історія розробки, або 1000 і 1 виклик

5 днів, 3 ночі, 100+ годин роботи та енергія, що надихала нас навіть 301 рік потому.Отож, нашим головним викликом став час. Стислі терміни, прагнення та необхідність реалізувати вебсайт вчасно, поруч з “якістю” здаються неможливими поняттями. Та “неможливо” - це не про Zapal.

Наші найкращі розробники, багато кави та віра в силу дружби змогли реалізувати вебсайт написаний кодом на React, використовуючи нову архітектуру Next.js.14. Нашими пріоритетами, попри короткий дедлайн, залишились якість, стійкість та мінімізація майбутніх операційних витрат на вебсайт. Створення бездоганного, чистого коду було необхідністю для майбутнього постійного наповнення сайту новими сторінками та доповненням нового контенту. Що ж ми обрали для максимальної оптимізації та якості розробки?

Наш технологічний стек

“З видимого пізнавай невидиме.” - казав Савич. А ми з тобою давай з видимих сторінок вебсайту пізнаємо заховані технології та поговоримо трохи про те, як був створений цей проєкт. Отож, ми обрали React як наш фреймворк для створення вебсайту. Чому? Все просто – саме React допомагає вчиняти будь-які зміни оптимізовано, використовуючи об’єктну модель документа, що і створює середовище в якому будь-які зміни, що відбуваються — стаються саме в React напряму. Тобто, з таким рівнем оптимізації процесів внесення змін займатиме всього пара годин, а не кілька десятків. Оптимізація — те, що й було конче необхідним для цього кейсу.

Крім того, як ми вже зазначали вище нами була використана нова архітектура Next.js 14. Та трошки більше про сам Next.js — це фреймворк React, який розширює його можливості додатковими функціями, включаючи рендеринг на стороні сервера. Next.js також надає шар API, який працює на основі Express і дозволяє будувати додаток Express всередині свого додатка Next.js, уникнувши потреби у відокремленні обох. Next.js надає компонент зображення, який автоматично стискає зображення в формат Webp, щоб забезпечити швидше завантаження та уникнути великого покриття. Компонент зображення також здійснює багато інших оптимізацій за кулісами, які можуть радикально покращити продуктивність без нашої участі. Next.js також тісно співпрацює з командами від Google, щоб гарантувати відповідність швидкості та основних функцій вебу.

Саме нова архітектура Next – Next.js 14 вона представила Turbopack, двигун на основі Rust, який підійняв наш розвиток на локальному рівні та це про 53% швидший запуск локального сервера та 94% швидше оновлення коду за допомогою Fast Refresh.

Та якщо ми згадаємо систему менеджменту контенту – ми знову обрали Payload. Так, адже ми справді вважаємо, та перевірили вже це багацько разів на практиці, що саме ця система працює ефективно та задовольняє всі потреби нас як розробників так само як і наших клієнтів. Payload також розроблений на React, тому подальші переваги даної технології також досить очевидні.Також, Payload має дуже зручний та простий у використанні інтерфейс, а тобто навіть недосвідчені користувачі адмін панелей можуть швидко та легко розібратись як з ним працювати.

Ти помітив так, що наша шапка сайту (ну або як то кажуть “хедер”) змінює свій колір в залежності від кольору фону? Та, чудова ідея, та досить комплексна реалізація. Нами був використаний варіант інверсії кольорів. Тобто інвертивно по відношенню до фону. Ми намагались зробити це все максимально швидко та оптимізовано. Саме тому обрали для реалізації цього функціонала Native Browser API.

Завдяки такому вибору вебсайт вийшов функціональним та швидким, залишаючи свої першочергові UI ідеї втіленими.

Вибір кольорів

Статуя Григорія Савича — чи не єдине, що вціліло тієї ночі.
Осяяна травневим сонцем, вона стала символом незламності.

Кольори, що ви можете побачити на вебсайті були обрані не випадково.

Спокійний жовтий – передає сонце, що так яскраво світило того дня.
Ніжний синій є відображенням кольору неба з фотографії.
Чорний – колір спалених стін.

Що ж далі?

Zapal раді будувати стійкі партнерські відносини з музеєм Григорія Савича. Наша співпраця тільки почалась та ми маємо на меті створити ще не один проєкт з музеєм. Ми щасливі стати частинкою історії відновлення історичної пам’ятки, адже нам важливо нести в наше суспільство важливі проєкти, ті, що творять вплив.

Одного дня надихнула ідея показати справжню силу дружби та допомогти нашому давньому вчителю. Сьогодні ми щиро кажемо, що успішно впорались.