#002 — React 19.2: `<Activity />` + AI Language Teacher

Stream #002

Дата: 22 травня 2026 | 20:00 London / 22:00 Kyiv
Формат: Технічний розбір + Гість · ~40 хвилин
Гість: Олександр Блажейко
YouTube: youtube.com/live/R5IXxa1e8K4

Учасники

Олег Левченко — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community

Олександр Блажейко — Software Development Engineer · Fullstack, 7+ років досвіду
Україна
LinkedIn · itvibe.party

Будує itvibe.party — платформу, що поєднує чат, синхронний AI-перекладач і персонального AI-вчителя. Реальна розмова автоматично перетворюється на урок: нові слова, граматика, домашнє завдання. Стек: Vue 3, Node.js, TypeScript, WebSocket, Redis, LLM/STT/TTS.

Ключові тези

Блок 1 — React 19.2: `<Activity />`

React Conf 2025 анонсувала новий компонент <Activity /> для збереження стану при приховуванні UI
Проблема: display:none приховує елемент, але знищує стан; unmount — теж втрата стану
<Activity mode="hidden"> зберігає стан і DOM-дерево — схоже на content-visibility: hidden але на рівні React
Effects lifecycle відрізняється: при переході в hidden — cleanup, при поверненні — setup знову
Pre-rendering: можна рендерити прихований контент наперед для швидшого показу
Gotchas: не підходить для секьюрного приховування (DOM все одно існує), збільшує memory footprint

Блок 2 — itvibe.party (Олександр Блажейко)

itvibe.party — платформа що поєднує чат, синхронний AI-перекладач і персонального AI-вчителя "Маестро"
Головна ідея: реальна розмова двох людей різними мовами → STT → LLM-переклад → TTS → автоматичний урок з новими словами та граматикою
Стек: Vue 3, Node.js, TypeScript monorepo (pnpm), uWebSockets.js, Redis, Drizzle ORM
AI-інтеграції: OpenAI, xAI, Mistral — ізольовані в backend service layer, ключі не потрапляють на клієнт
Архітектура backend: controller → service → repository → transformer

Таймкоди

00:00 — Вступ: знайомство з форматом стріму та анонс двох тем
02:25 — Знайомство з гостем Олександром: стек технологій та досвід
04:50 — Ідея застосунку: вивчення англійської за допомогою AI-вчителя
08:26 — Демо застосунку: чат з AI-вчителем та вибір голосу
13:10 — Демо: створення уроків та словників за допомогою GPT
17:56 — Демо: AI-підтримка з базою знань та Speaking Club чат
21:34 — Огляд архітектури: монорепо, WebSocket, бекенд і фронтенд на Vue 3
32:35 — Мобільна версія: PWA, Android APK через PWA Builder
48:45 — Питання та відповіді: розпізнавання мови, WebRTC, TURN-сервер
55:50 — Деплой та інфраструктура: Dokku, Docker, Hetzner, volumes
01:13:20 — Підсумок демо Олександра та перехід до другої доповіді
01:18:13 — Доповідь про React 19: новий компонент Activity
01:20:55 — Демо React Activity: збереження стану компонента при переключенні табів
01:28:02 — Порівняння CSS display:none та Activity: різниця в поведінці таймера

#002 — React 19.2: <Activity /> + AI Language Teacher ​

Учасники ​

Ключові тези ​

Блок 1 — React 19.2: <Activity /> ​

Блок 2 — itvibe.party (Олександр Блажейко) ​

Таймкоди ​