Про програму
Boldr — це конструктор веб-додатків, який перетворює введені користувачем дані на повнофункціональний додаток Next.js. Моєю частиною було проектування системи та розробка інтерфейсу, конструкторів логіки та механізму генерації коду.
В центрі уваги
- Протягом двох місяців розробив концептуалізацію та мінімально життєздатний продукт для конструктора візуальних вебзастосунків з використанням React та Next.js.
- Найняв та очолив міжнародну команду з 4 фахівців старшої ланки: дизайнера продукту, UI/UX дизайнера та DevOps-фахівця.
- Опитав понад 50 потенційних клієнтів для перевірки технічних проблем.
- Розробив генератор коду Next.js, який зменшує створення шаблонних шаблонів на 300%.
Виклик
Розробка мінімально життєздатного продукту для візуального конструктора веб-застосунків з редактором логіки бекенду та механізмом генерації коду.
Розв'язок
Використано фреймворк Next.js для швидкої розробки MVP, що дозволило отримати Server Side Rendering, стратегії кешування та маршрутизацію (routing) одразу «з коробки».
Для безперебійності процесів продажу було створено клікабельний прототип редактора логіки бекенду (Back-end Logic Editor), який згодом став основою для реалізації фінального функціоналу.
Застосовано бібліотеку React Sortable для створення гнучкого drag&drop редактора з кастомним рішенням для глибоко вкладених структур.
Впроваджено стратегію зберігання Local-First (Offline-First), що дозволило клієнтам випробувати продукт ще до завершення розробки серверної частини та забезпечило стабільну роботу в офлайн-режимі.
Розроблено WYSIWYG Interface Editor на базі Material UI (MUI), де компоненти бібліотеки були адаптовані як універсальні будівельні блоки редактора.
Реалізовано функцію Collections — зручну абстракцію над колекціями бази даних, що забезпечує інтуїтивно зрозумілий інтерфейс для управління даними.
Спроектовано та впроваджено протоколи керування доступом до даних, а також розроблено відповідний інтерфейс адміністрування.
Проведено концептуалізацію та розробку функції Actions — абстракції для фронтенд- та бекенд-функцій, резолверів ендпоїнтів та обробників вебхуків.
Створено режим реального часу для попереднього перегляду інтерфейсів з повноцінною підтримкою маршрутизації, управління користувачами, автентифікації та запитів до кастомних API.
Побудовано систему кастомних компонентів, що підтримують складну інтерактивність: умовний рендеринг, управління станом, події користувача та анімації.
Розроблено двигун генерації коду (Code Generation Engine), який автоматично конвертує конфігурацію користувача (json-config) у готовий до продакшну код додатка на Next.js.
