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

Stream #002

Date: May 22, 2026 | 20:00 London / 22:00 Kyiv
Format: Technical deep-dive + Guest · ~40 min
Guest: Oleksandr Blazheiko
YouTube: youtube.com/live/R5IXxa1e8K4

Participants

Oleh Levchenko — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community

Oleksandr Blazheiko — Software Development Engineer · Fullstack, 7+ years of experience
Ukraine
LinkedIn · itvibe.party

Building itvibe.party — a platform combining chat, a real-time AI translator, and a personal AI teacher. Real conversations are automatically turned into lessons: vocabulary, grammar notes, homework. Stack: Vue 3, Node.js, TypeScript, WebSocket, Redis, LLM/STT/TTS.

Key Takeaways

Block 1 — React 19.2: `<Activity />`

React Conf 2025 announced the new <Activity /> component for preserving state when hiding UI
Problem: display:none hides the element but destroys state; unmount also loses state
<Activity mode="hidden"> preserves state and the DOM tree — similar to content-visibility: hidden but at the React level
Effects lifecycle differs: transitioning to hidden runs cleanup, returning runs setup again
Pre-rendering: hidden content can be rendered ahead of time for faster reveal
Gotchas: not suitable for security-sensitive hiding (DOM still exists), increases memory footprint

Block 2 — itvibe.party (Oleksandr Blazheiko)

itvibe.party — a platform combining chat, a real-time AI translator, and a personal AI teacher "Maestro"
Core flow: two people speak different languages → STT → LLM translation → TTS → automatic lesson with new vocabulary and grammar notes
Stack: Vue 3, Node.js, TypeScript monorepo (pnpm), uWebSockets.js, Redis, Drizzle ORM
AI integrations: OpenAI, xAI, Mistral — isolated in a backend service layer, keys never reach the client
Backend architecture: controller → service → repository → transformer

Timecodes

00:00 — Intro: stream format overview and announcement of the two topics
02:25 — Meeting guest Oleksandr: tech stack and experience
04:50 — App idea: learning English with an AI teacher
08:26 — App demo: chatting with the AI teacher and voice selection
13:10 — Demo: generating lessons and vocabularies with GPT
17:56 — Demo: AI support with a knowledge base and Speaking Club chat
21:34 — Architecture overview: monorepo, WebSocket, backend and frontend on Vue 3
32:35 — Mobile version: PWA, Android APK via PWA Builder
48:45 — Q&A: speech recognition, WebRTC, TURN server
55:50 — Deployment and infrastructure: Dokku, Docker, Hetzner, volumes
01:13:20 — Wrap-up of Oleksandr's demo and transition to the second talk
01:18:13 — Talk on React 19: the new Activity component
01:20:55 — React Activity demo: preserving component state when switching tabs
01:28:02 — Comparing CSS display:none and Activity: difference in timer behavior

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

Participants ​

Key Takeaways ​

Block 1 — React 19.2: <Activity /> ​

Block 2 — itvibe.party (Oleksandr Blazheiko) ​

Timecodes ​