Скачать или смотреть 🔴 Live Coding: Створюємо Меню Налаштувань + Аватарки з Ініціалами (React/Next.js/TS)

Запис прямого ефіру, де ми занурились у frontend-розробку на React, Next.js та TypeScript! Під час цього стріму ми крок за кроком створювали компонент меню налаштувань за дизайном з Figma та реалізували фічу дефолтних аватарок.

Що ми робили на стрімі:

1. Реалізація Компонента Меню (`MenuSettings.tsx`):
Розмітка інформації про користувача (аватар, ім'я, email, username).
Створення списку налаштувань з іконками.
Розробка логіки для внутрішньої навігації (підменю) за допомогою стану (`currentSubView`).
Додавання умовної стрілки "назад".
Стилізація за допомогою Tailwind CSS.

2. Live Debugging:
Розв'язання проблем із застосуванням змін коду в реальному часі.
Виправлення помилок TypeScript, що виникали під час розробки (пропси, імпорти/експорти).
Коригування JSX-розмітки.

3. Нова Фіча: Дефолтні Аватарки (як у Telegram):
Обговорення та реалізація ідеї: генерація аватарок за замовчуванням.
Написання утилітарних функцій (`lib/utils.ts`) для ініціалів та консистентного кольору.
Створення UI-компонента `Avatar.tsx` (`components/ui/Avatar.tsx`).
Рефакторинг `MenuSettings.tsx` та `SettingsSidebar.tsx` для використання нового компонента `Avatar`.

Це був насичений стрім з реальним кодингом, вирішенням непередбачуваних проблем та імплементацією нової цікавої фічі. Дякую всім, хто був присутній!

Стек Технологій:
React
Next.js
TypeScript
Tailwind CSS
Figma (для дизайну)
VS Code

🔔 Підписуйтесь, щоб не пропустити майбутні стріми та відео!
👍 Дякую за лайки!
💬 Залишайте коментарі, якщо маєте запитання чи ідеї.

#React #NextJS #TypeScript #TailwindCSS #Frontend #WebDev #UI #Figma #LiveCoding #Стрім #Розробка #Програмування #Аватар #Україна #Українською