README.uk.md

JavaScript Event Loop Візуалізатор 🔄

Інтерактивний інструмент для візуалізації та навчання принципів роботи JavaScript Event Loop. Сучасний веб-додаток на React з красивим UI, що допомагає розробникам зрозуміти асинхронність JavaScript, порядок виконання операцій та взаємодію між Call Stack, Web APIs, та чергами Microtask і Task (Callback).

✨ Можливості

🎨 UI/UX

• Сучасний дизайн з shadcn/ui компонентами та responsive сайдбаром
• Темна та світла тема з автоматичним перемиканням
• Повністю адаптивний дизайн для мобільних, планшетів та десктопів
• Інтелектуальний сайдбар:
  • Автоматично згортається на вузьких екранах (тільки іконки)
  • Розгортається на широких екранах з повним текстом
  • Перемикається клавішею B
• Плавні анімації та переходи між станами
• Інтуїтивний інтерфейс з tooltips та підказками
• Чистий UI - порожні секції автоматично ховаються

📚 Функціонал

• Візуалізація Call Stack, Web APIs, Microtask Queue, Task Queue, Stack та Heap пам'яті
• Покрокове виконання з детальними поясненнями кожної дії
• 5 вбудованих прикладів:
  • 🗄️ Пам'ять та Змінні - демонстрація Stack та Heap (примітиви, об'єкти, функції)
  • ⏱️ setTimeout - базова робота з асинхронним кодом
  • ⚡ Promise vs setTimeout - різниця між microtask та macrotask
  • 🔄 Складний приклад - вкладені Promise та setTimeout
  • 🌐 Fetch API - мережеві запити та їх обробка
• Два режими роботи: автоматичний та ручний
• Історія дій для відстеження всіх кроків виконання
• Відображення коду з підсвічуванням активного рядка
• Інтерактивний сайдбар з:
  • Швидким запуском прикладів
  • Кнопками очищення (повне та вибіркове)
  • Довідкою по роботі Event Loop
• Keyboard shortcuts: Space, 0-4, A, B, C, Esc для швидкої роботи

🌍 Локалізація

• Українська мова (повна підтримка)
• English (auto-detected from browser)
• Перемикач мови в хедері для миттєвої зміни мови
• Вибрана мова зберігається між перезавантаженнями сторінки (localStorage)
• Всі елементи інтерфейсу, приклади та пояснення повністю перекладені

🚀 Швидкий Старт

Передумови

• Node.js 18.0.0+ (рекомендовано 20+)
• pnpm (рекомендовано) або npm

Встановлення

# Клонуйте репозиторій
git clone https://github.com/vitalii4reva/visual-js-event-loop.git
cd visual-js-event-loop

# Встановіть залежності
pnpm install

# Запустіть dev сервер
pnpm dev

Відкрийте http://localhost:3000 в браузері.

Збірка для Production

# Створіть production build
pnpm build

# Перегляньте production версію локально
pnpm preview

Build результат буде в теці dist/

🏗️ Технології

• ⚛️ React 19 - UI framework
• 📘 TypeScript 5.9 - Type safety
• 🎨 Tailwind CSS 3.4 - Styling
• 🧩 shadcn/ui - UI компоненти
• ⚡ Vite 6 - Build tool
• 🎭 Lucide React - Іконки
• 🌓 next-themes - Theme management

📂 Структура Проекту

src/
├── components/          # React компоненти
│   ├── ui/             # shadcn/ui компоненти (sidebar, button, card...)
│   ├── layout/         # Header, ExamplesSidebar, KeyboardShortcuts
│   ├── event-loop/     # Візуалізація Event Loop
│   │   ├── CallStack.tsx
│   │   ├── WebAPIs.tsx
│   │   ├── MicrotaskQueue.tsx
│   │   ├── TaskQueue.tsx
│   │   ├── Memory.tsx         # Heap пам'ять
│   │   └── StackVariables.tsx # Stack frames
│   ├── controls/       # StepControls
│   └── panels/         # HistoryPanel
├── hooks/              # Custom React hooks
│   ├── useEventLoop.ts
│   ├── useStepExecution.ts
│   ├── useKeyboardShortcuts.ts
│   └── use-mobile.tsx
├── context/            # React Context (ThemeProvider)
├── lib/                # Утиліти та приклади
│   ├── examples.ts     # 5 вбудованих прикладів
│   └── utils.ts
├── types/              # TypeScript типи
│   ├── eventLoop.ts
│   └── memory.ts
├── i18n/               # Переклади
├── App.tsx             # Головний компонент
└── main.tsx            # Entry point

🔧 Як це працює

Візуалізатор демонструє роботу JavaScript Event Loop та управління пам'яттю:

1. Call Stack: Відображає функції, які зараз виконуються.
2. Web APIs: Показує асинхронні операції, що виконуються у фоні.
3. Microtask Queue: Черга високопріоритетних завдань (Promise).
4. Task Queue: Черга регулярних завдань (setTimeout, setInterval).
5. Stack Variables: Відображає локальні змінні у Stack Frames.
6. Memory (Heap): Показує об'єкти, функції та інші складні типи даних.
7. Event Loop: Постійно перевіряє стан стеку та черг, дотримуючись пріоритетів.

Порядок виконання в Event Loop:

1. Виконати весь синхронний код у Call Stack
2. Перевірити чи Call Stack порожній
3. Обробити ВСІ мікрозавдання з Microtask Queue
4. Взяти ОДНЕ завдання з Task Queue
5. Повторити з кроку 1

🎯 Як Використовувати

1. Виберіть приклад в сайдбарі зліва (або клавіші 0-4):
   • 0 - Пам'ять та Змінні (Stack & Heap)
   • 1 - setTimeout демонстрація
   • 2 - Promise vs setTimeout
   • 3 - Складний приклад
   • 4 - Fetch API
2. Режим виконання:
   • Ручний режим: Натискайте "Наступний крок" або Space/Enter
   • Авто режим: Автоматичне виконання з затримкою 1.5 сек (клавіша A)
3. Спостерігайте:
   • Call Stack - активні функції
   • Web APIs - асинхронні операції
   • Microtask Queue - високопріоритетні завдання (Promise)
   • Task Queue - звичайні завдання (setTimeout)
   • Stack Variables - локальні змінні (з'являються в прикладі 0)
   • Memory (Heap) - об'єкти та функції (з'являються в прикладі 0)
4. Відстежуйте історію дій у правій панелі
5. Керуйте сайдбаром - клавіша B або кнопка у header
6. Keyboard shortcuts - Натисніть іконку клавіатури у header для переліку всіх скорочень

👥 Як Зробити Внесок

Ми заохочуємо внески в розвиток проекту!

Способи Допомоги

• 🐛 Повідомте про баг через Issues
• ✨ Запропонуйте нову функцію
• 📝 Покращіть документацію
• 🌍 Додайте переклад на іншу мову
• 💻 Відправте Pull Request

Процес

1. Fork репозиторію
2. Створіть гілку: git checkout -b feature/amazing-feature
3. Внесіть зміни та commit: git commit -m 'Add amazing feature'
4. Push до гілки: git push origin feature/amazing-feature
5. Відкрийте Pull Request

💡 Ідеї для Покращення

• Додати Examples 3 та 4 (складний приклад, Fetch API) ✅
• Keyboard shortcuts (Space, числа, A, C) ✅
• Responsive сайдбар з shadcn/ui ✅
• Візуалізація Stack та Heap пам'яті ✅
• Приклад роботи з пам'яттю ✅
• Інтерактивний режим для створення власних прикладів
• Експорт історії виконання
• Додаткові мови інтерфейсу (EN, PL)
• Анімації з Framer Motion
• Touch gestures для мобільних

📈 SEO та Performance

Проект оптимізований для пошукових систем:

• ✅ Structured Data (JSON-LD) з інформацією про автора
• ✅ Open Graph та Twitter Cards
• ✅ robots.txt та sitemap.xml
• ✅ Оптимізовані meta теги
• ✅ humans.txt з інформацією про команду
• ✅ Bundle size: ~112 KB (gzipped)

📸 Screenshots

Світла Тема

Темна Тема

Підтримка темної теми з автоматичним визначенням системних налаштувань

Мобільна Версія

Повністю адаптивний дизайн для всіх пристроїв

📄 Ліцензія

Цей проект поширюється під ліцензією MIT. Див. файл LICENSE для деталей.

👨‍💻 Автор

Vitalii Reva

• Email: vitalii4reva@gmail.com
• GitHub: @vitalii4reva
• Website: vitalii4reva.com

🙏 Подяки

• Натхнення від освітніх матеріалів по JavaScript
• Спільнота React та TypeScript
• shadcn/ui за чудові компоненти

📊 Статус Проекту

---

Зроблено з ❤️ в Україні 🇺🇦

⭐ Star на GitHub • 🐛 Повідомити про баг • 💡 Запропонувати функцію