Onepage · 2025
Onepage - Tagline Element Editor
Огляд
Onepage - no-code конструктор сайтів та лендінгів, яким користуються 14 000+ клієнтів. Тестове завдання вимагало розробки інтерактивного редактора для елемента Tagline, дотримуючись дизайну Figma та самостійно реалізуючи всі непередбачені стани через власні судження щодо UI. Результат - редактор з розділеним виглядом: попередній перегляд на полотні відображає теги-чіпи у flex-wrap макеті з живими оновленнями стилів, тоді як плаваюча панель (абсолютно позиціонована поряд з елементом) надає три підпанелі - список тегів із drag-and-drop сортуванням, форму створення/редагування елементів та повну панель стилів (4 варіанти, 5 розмірів, 5 опцій border-radius, 3 режими вирівнювання). Кожна мутація симулює POST до фіктивного API-ендпоїнта. Архітектура розроблена для розширюваності: додавання нових типів елементів, елементів керування або параметрів стилів не вимагає структурних змін.
Виклик
Завдання явно оцінювало масштабовану архітектуру - код мав бути структурований так, щоб нові типи елементів, елементи керування панеллю та параметри стилів можна було додавати без рефакторингу. UI-рішення для станів, не охоплених у Figma (hover, порожні стани, граничні випадки), залишалися на розсуд розробника.
Рішення
Розроблено на React 19 + TypeScript + MobX (стек, визначений завданням). Доменні стори (TaglineStore, UIStore) підтримують стан чистим та реактивним. @dnd-kit обробляє drag-and-drop як у списку бічної панелі, так і в попередньому перегляді. CSS Modules забезпечують scoped стилізацію. Система панелей є компонентно-орієнтованою - кожна підпанель є незалежним слайсом, що робить архітектуру зручною для розширення.
