Сайт державної програми Зимова єПідтримка
Пам’ятаєте наш унікальний конструктор для сайту державної політики «Зроблено в Україні»? Той самий неповторний інструмент, завдяки якому можна легко створювати нові сторінки та навіть цілі сайти? Так от, перед вами наш новий кейс — онлайн-ресурс державної програми «Зимова єПідтримка», який демонструє ефективність кастомізованого нами конструктора в дії.
Оцініть можливості персоналізованої розробки на базі адмін-панелі сайту Laravel Nova, що дозволяє гратися з дизайном і функціями інтерфейсу без жодного рядка коду відповідно до все нових потреб держави чи бізнесу. На відміну від популярних конструкторів сайтів типу WordPress, які мають шаблонний дизайн і обмежену функціональність, адмін-панель унікального сайту на Laravel відрізняється гнучкістю, швидкістю та незалежністю від сторонніх інструментів, які лише перевантажують і сповільнюють роботу програм.
Читайте в нашому кейсі, як завдяки вбудованому конструктору можна швидко створити сайт, що відповідає принципам юзабіліті, візуальній стилістиці цифрової держави та завданням нової програми президента України.
Про завдання проєкту «Зимова єПідтримка»
«Зимова єПідтримка» — це один з інструментів програми президента В. Зеленського «Зимова Підтримка», що передбачає одноразову грошову допомогу громадянам України в розмірі 1 000 гривень. Виплату від держави можна отримати впродовж зими 2024-2025 року через онлайн-сервіс Дія, Укрпошту чи будь-який український банк, і витратити на комунальні, транспортні та інші послуги, зокрема благодійність.
Усі ці й інші деталі соціальної програми мали зручно вміститися на сторінках проєкту «Зимова єПідтримка». Аналогічно сайту «Зроблено в Україні», а саме його розділу «Національний кешбек», функціонал онлайн-ресурсу «Зимова єПідтримка» мав містити перелік українських виробників і вбудований пошук товарів, а саме ліків і книг, на які можна витратити грошову допомогу. Так, перед командою Webnauts постало завдання швидко створити сайт за допомогою конструктора та зверстати з нуля ще декілька сторінок і додаткових блоків.
Конструктор для створення сайту та верстка додаткових блоків
В основу проєкту «Зимова єПідтримка» ліг конструктор сторінок на Laravel, який ми розробили раніше для сайту національного бренду «Зроблено в Україні». Скопіювавши ресурс на той самий хостинг, ми змінили доменне ім’я та сконструювали новий сайт. Це дало нам змогу швидко розгорнути ресурс і налаштувати його під потреби нової державної програми.
Унікальний конструктор усередині адмінки дозволяє легко створювати, редагувати, переглядати, копіювати, видаляти, а також приховувати та відкривати сторінки на сайті:
Готові блоки всередині сторінок можна додавати, видаляти, переміщувати, перетягувати та наповнювати контентом як українською, так і англійською мовою:
Дизайн нового проєкту Мінекономіки «Зимова єПідтримка» передбачав унікальні блоки, які ми зверстали за допомогою вже добре відомих технологій: HTML5, CSS (SCSS) і JavaScript. Це хедер сайту з активними покликаннями на ключові розділи, а також блок «Як отримати» допомогу від держави.
Згідно з програмою «Зимова єПідтримка» сайту не вистачало сторінок з переліком продавців ліків і книг, які можна придбати за кошти від держави. Завдяки фронтенд-розробникам Webnauts ці сторінки з’явилися на сайті, а блоки, що їх складають, — у конструкторі для подальшого використання.
Крім того, для сайту «Зимова єПідтримка» наша команда реалізувала пакет додаткових елементів і блоків — від заголовків і кнопок до складних секцій з іконками, відео, слайдерами та пагінаціями. Всі компоненти сайту влучно перегукується з візуальним стилем держави в інтернеті, зокрема ресурсом «Зроблено в Україні». Завдяки цьому адміністратори обох економічних платформ зможуть за лічені хвилини створювати та наповнювати нові сторінки чи додавати блоки до вже наявних.
Інтерфейс адміністративної частини сайту, зокрема набір блоків конструктора, було створено за допомогою JavaScript-фреймворків Vue.js і Nuxt.js, а також мови програмування TypeScript і бібліотеки зберігання даних Pinia.
Оптимального відображення сайту на різних пристроях ми досягли за допомогою CSS-модулів Flexbox і Grid Layout, а плавні мікроанімації, зокрема ефект наведення кнопок, написали чистою мовою CSS.
Функціональність сайту «Зимова єПідтримка»
Офіційний онлайн-ресурс «Зимова єПідтримка» не лише інформує українців про можливості соціальної програми, а й залучає до участі книгарні й аптеки, готові приймати оплату коштами державної допомоги.
Сайт містить не лише вичерпний блок FAQ, а й форму зворотного зв’язку через службу підтримки державного сервісу Дія:
На кшталт онлайн-ресурсу Made in Ukraine сайт «Зимова єПідтримка» оснащений швидким пошуком медичної та книжкової продукції, що бере участь у державній програмі. Крім того, на сайті передбачена функція завантаження файлів із переліком книг і ліків у табличних форматах .csv і .xls, на які можна витратити «зимову тисячу».
Завдяки конструктору сторінок з великою кількістю готових блоків функціональність державного ресурсу «Зимова єПідтримка» можна легко розширювати без шкоди для продуктивності та швидкодії сайту. Це стало можливим завдяки потужному стеку застосованих технологій: мовам програмування CSS, JavaScript і TypeScript, а також прогресивним фреймворкам Laravel, Vue.js і Nuxt.js.
Результат, або швидкий запуск сайту для швидкої підтримки громадян
Проєкт «Зимова єПідтримка» вкотре продемонстрував ефективність кастомізованих рішень для швидкої адаптації сайту до будь-яких потреб держави чи бізнесу. Ключовим елементом проєкту став унікальний конструктор власної розробки, що дозволив нам швидко реалізувати та запустити важливий державний онлайн-ресурс. Ба більше, ми розробили та доповнили набір блоків конструктора для майбутніх оновлень сайту. Тепер адміністратори можуть легко створювати сторінки, додавати нові секції та редагувати наявний контент без залучення розробників. Тобто швидко реагувати на зміни в социальной програмі та легко розширювати функціонал сайту зі збереженням високої продуктивності та візуального стилю держави в мережі.
Отже, гнучка панель з конструктором сторінок для адміністраторів і зручний адаптивний інтерфейс для користувачів дають змогу легко масштабувати платформу та підсилити довіру до державних онлайн-сервісів. Завдяки потужним вебтехнологіям Мінекономіки України отримало ще один ефективний онлайн-інструмент для комунікації з громадянами та залучення бізнесу до державних програм.
Ми раді знову долучитися до важливої соціальної програми та створити нестандартне технологічне рішення, що робить надання й отримання державної допомоги простим, зручним і зрозумілим.