Іван Ткачук

Про мене

Досвід

1. січ. 2026 — дотепер
   Київ

   Senior Frontend Engineer · Reliqio.AI

   Платформа паливної логістики: бронювання, диспетчеризація, митне оформлення й замовлення; нею користуються 5+ логістичних компаній. Основний фронтенд-інженер, близько 70% усіх комітів. Представляв інженерію перед клієнтами й координував фронтенд-роботу з бекенд-командою та розробниками з частковою зайнятістю.

   • Довів веб-застосунок від порожнього репозиторію до продакшену за пів року з continuous deployment: кожен мердж одразу йшов у прод.
   • Скоротив вхідний бандл на 57%: з 3 232 до 1 390 КБ.
   • Зробив і веду дизайн-систему на 165 компонентів, на якій зібраний увесь застосунок, а також тести: 380 у Playwright і 448 у Vitest.

   • React 19
   • TypeScript
   • Vite
   • Nx
   • Tailwind CSS 4
   • Radix UI
   • Base UI
   • TanStack Query
   • Zustand
   • Playwright
   • Vitest
   • Sentry
   • Mapbox GL
   Від порожнього репозиторію до продакшену6 місяців

   Контекст

   Січень 2026: платформа для паливної логістики (бронювання, диспетчеризація, митне оформлення, замовлення) з порожнього репозиторію. Невелика команда: я на фронтенді на повний день, бекенд-команда й розробники з частковою зайнятістю.

   Що зробив

   • Розбив застосунок за фічами: 16 фіче-модулів за 22 маршрутами. Кожна фіча живе у своїй папці, усе спільне — в дизайн-системі.
   • React 19 з React Compiler, TypeScript і Vite в Nx-монорепозиторії, налаштованому під другий застосунок. Компілятор увімкнений у продакшен-збірках і вимкнений під Vitest — так тести стартують приблизно вдвічі швидше.
   • Будував дизайн-систему паралельно з фічами, тож нові екрани збиралися з готових частин, а не з одноразової верстки.
   • Перевірка типів і лінт на кожен коміт; повний лінт і перевірка конфліктів злиття перед кожним пушем.
   • Continuous deployment: кожен мердж одразу йшов у прод, а помилки відстежувалися в Sentry.

   Результат

   У продакшені через пів року; платформою користуються 5+ логістичних компаній. Близько 70% комітів фронтенду — мої.

   Вхідний бандл мінус 57%3 232 → 1 390 КБ

   Проблема

   Перше завантаження було важким: 3 232 КБ JavaScript (962 КБ у gzip) ще до старту застосунку. Картографічний рушій Mapbox GL важив більше, ніж увесь інший застосунок, а розділення коду не спрацьовувало.

   Що зробив

   • Спершу виміряв, що саме тягне вагу, і лише потім щось змінював.
   • Виніс Mapbox GL і віджет завантаження файлів за React.lazy і динамічний import(): більшості екранів вони не потрібні.
   • Знайшов справжню причину: цикл імпортів між barrel-файлами UI та іконок не давав бандлеру розділяти код. Розірвав цикл — і розділення запрацювало.
   • Спрямував експорти дизайн-системи на ліниві обгортки, а справжній компонент карти перейменував і додав коментар-попередження, щоб автоімпорт в IDE не затягнув бібліотеку назад у вхідний бандл.
   • Карта підвантажується заздалегідь, коли браузер простоює (requestIdleCallback, а для Safari — запасний setTimeout), тож екрани з картою все одно відкриваються швидко. Невдале підвантаження перехоплюється, а не вилітає помилкою.
   • На Node-сервері: стиснення, кеш на рік (immutable) для файлів із хешем і no-cache для index.html, щоб новий деплой одразу доходив до користувачів.

   сирий, до3 232 КБ

   сирий, після1 390 КБ

   gzip, до962 КБ

   gzip, після446 КБ

   Результат

   Вхідний бандл 3 232 → 1 390 КБ (−57%), у gzip 962 → 446 КБ. Карта так само завантажується, але вже поза критичним шляхом.

   Дизайн-система, на якій зібраний увесь застосунок165 компонентів

   Що всередині

   165 React-компонентів, експортованих із 80 модулів. 60 обгортають примітиви Radix UI, а 17 побудовані на Base UI, де є комбобокс, якого бракує в Radix. Headless-бібліотеки дають поведінку й доступність (клавіатура, фокус, ARIA), а система додає стилі на Tailwind CSS 4 і єдиний API — та сама ідея, що в shadcn/ui.

   Решта 88 — від примітивів до графіків і DataTable, зокрема обгортки для react-day-picker, Embla, Recharts, Sonner і react-virtuoso.

   • 60 на Radix UI
   • 17 на Base UI
   • 88 інших

   Рішення

   Коли великі таблиці переросли звичайне прокручування, очевидним рішенням було замінити примітив ScrollArea на віртуалізований список. Але тоді в системі зʼявилося б два способи прокручування, а екрани довелося б мігрувати.

   Натомість я пропатчив ScrollArea, щоб він прокидав ref на свій Radix Viewport, і react-virtuoso запрацював поверх наявного компонента. DataTable отримав віртуалізований режим, який вмикається там, де списки найдовші; список пошуку в комбобоксі працює так само.

   Результат

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

   Перевірки для continuous deployment380 + 448 тестів

   Проблема

   З continuous deployment регресія доходить до клієнтів за лічені хвилини, тож якість мала триматися автоматично.

   Що зробив

   • 380 тестів у Playwright у 77 файлах, побудованих навколо реальних сценаріїв користувачів.
   • 61 скріншот-тест на діалозі з найбільшою кількістю станів, де верстка ламалася найчастіше. Скріншот-тести дорогі в підтримці, тому вони живуть там, де стани множаться.
   • 448 тестів у Vitest у 67 файлах для логіки й утиліт.
   • Перевірка типів і лінт на кожен коміт; повний лінт, перевірка конфліктів злиття й захист від демоданих перед кожним пушем.
   • Sentry у продакшені: помилки рендеру через ErrorBoundary, помилки API через captureException.

   Результат

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

   Графіки й багатокрокові форми на спільній основікомпонент на сценарій

   Контекст

   Перші графіки й багатокрокові форми робили інші розробники, а сценаріїв ставало дедалі більше.

   Що зробив

   Спершу підтримував і рефакторив їх, потім виніс спільну логіку, стани й стилі в спільну основу з окремим невеликим компонентом під кожен сценарій.

   Рішення

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

   Результат

   Новий сценарій стартує з основи й додає тільки свої відмінності, а зміна одного сценарію не зачіпає інші.

2. лип. 2023 — січ. 2026
   Київ

   Frontend Developer, єдиний фронтенд-інженер · Argus Soft

   Платформа документообігу з тисячами користувачів. Відповідав за клієнтський застосунок і адмінку від і до та сам опрацьовував вимоги з клієнтами.

   • Замінив рукописні запити до API на клієнт, згенерований зі Swagger: понад 250 типізованих методів, а зміни контракту ловляться на етапі збірки.
   • Робив складні форми з умовною логікою й динамічною валідацією на Formik і Yup з оркестрацією через Redux-Saga.
   • Інтегрував вбудований PDF SDK для перегляду й анотування та зробив збирання документів перетягуванням на react-dnd.

   • React
   • TypeScript
   • Redux Toolkit
   • Redux-Saga
   • MUI
   • PrimeReact
   • Formik / Yup
   • react-dnd
   • Swagger codegen
   • SCSS
   • GitLab
   API-клієнт, згенерований зі Swagger250+ типізованих методів

   Проблема

   Запити до API писалися вручну всередині хуків useCallback по різних компонентах, без спільних типів. Кожна зміна на бекенді загрожувала тихою розбіжністю.

   Що зробив

   Замінив їх на клієнт, згенерований зі Swagger-специфікації (OpenAPI) бекенду. Понад 250 типізованих методів перегенеровуються однією командою щоразу, коли змінюється бекенд.

   Результат

   Зміна контракту тепер вилазить помилкою TypeScript на збірці, а не багом у продакшені. Цілий клас інтеграційних багів зник.

   Складні форми й документиFormik · Yup · Redux-Saga

   Форми

   Форми з умовною логікою, динамічною валідацією й полями, що залежать одне від одного. Правила валідації жили в Yup-схемах, а асинхронний потік — у Redux-Saga, тож зміна бізнес-правил потрапляла в схему й сагу, а не розповзалася по компонентах.

   Документи

   Вбудований PDF SDK для перегляду й анотування документів у браузері, збирання документів перетягуванням на react-dnd і live-оновлення через Server-Sent Events.

   Клієнти

   Вимоги приходили напряму від клієнтів, і я сам вів їх від першого питання до релізу.

3. лют. 2022 — черв. 2023
   Київ

   Frontend Developer · Smarttek

   • Зробив пʼять клієнтських проєктів, часто паралельно: оцінки, код-ревʼю, бібліотеки компонентів, винесені з legacy-інтерфейсу.
   • Опрацьовував вимоги з клієнтами англійською; також працював фулстеком на Node.js і NestJS.
   • Ktizo, AI-продукт для пошуку музики: зробив фронтенд та інтегрував AI API клієнта.

   • React
   • Next.js
   • TypeScript
   • NestJS
   • Material UI
   • i18n
   • Nx

4. серп. 2021 — лют. 2022
   Київ

   Frontend Developer · SoftServe

   • Zenoss (моніторинг корпоративної інфраструктури) і Dokazovo: підняв покриття фронтенду Zenoss юніт-тестами приблизно до 30% на Mocha і Chai; код-ревʼю й повторно використовувані компоненти в англомовних командах.

   • React
   • Redux
   • Vue
   • GraphQL
   • SCSS
   • Mocha
   • Chai
   • Jest

Розробка з AI

• 15 власних команд і skills на весь цикл: знайомство з репозиторієм, перевірка бекенд-контракту до написання коду, аудит перед PR, описи PR, збереження й відновлення контексту сесії.
• 11 хуків життєвого циклу, які закріплюють правила ревʼю в коді: небезпечні git-операції й пуші без підтвердження блокуються, а агент не може позначити роботу готовою без двох чистих прогонів перевірок.
• Близько 7 900 рядків Node-тулінгу, покритих приблизно 9 900 рядками тестів.
• AI у продуктах: долучався до вбудованого AI-асистента в Reliqio; у Smarttek інтегрував AI API клієнта в Ktizo.

Навички

Основне

React 19 (зокрема React Compiler) · TypeScript · JavaScript · Next.js · також Vue, Node.js, NestJS

UI і стилі

HTML · CSS · Tailwind CSS 4 · Radix UI · Base UI · shadcn/ui · MUI · PrimeReact · Sass/SCSS · BEM

Стан і дані

TanStack Query · Zustand · Redux Toolkit · Redux-Saga · React Hook Form · Formik / Yup · REST · GraphQL · Swagger / OpenAPI codegen

Тестування

Playwright (end-to-end, скріншот-тести) · Vitest · Testing Library · Jest · Mocha / Chai

Інструменти

Nx · Vite · pnpm · ESLint · Husky · Sentry · Git · Claude Code

Бекграунд

Освіта

Магістр інженерії, мікро- та наноелектроніка · КПІ ім. Ігоря Сікорського · 2020

Мови

Англійська C1 · Українська (рідна) · Німецька A2

Контакти

Звичайний HTML без фреймворків і трекінгу. Шрифти — Roboto Condensed, Onest і JetBrains Mono. Редакція — жовтень 2026.