DevProfile — профіль розробника

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

Підготовка

npm create vite@latest dev-profile -- --template react-ts
cd dev-profile
npm install
npm run dev

Завдання

1. ThemeContext

Створи контекст для теми:

src/context/ThemeContext.tsx

• Два стани: 'light' та 'dark'
• Custom hook useTheme() для зручного доступу
• Тема зберігається в localStorage і відновлюється при перезавантаженні
• ThemeProvider обгортає весь додаток

2. Кнопка перемикання теми

В header додатку — кнопка-toggle:

• Світла тема: показує іконку місяця (або текст "Темна тема")
• Темна тема: показує іконку сонця (або текст "Світла тема")
• Весь інтерфейс змінює кольори при перемиканні

3. Форма профілю

Поля форми (всі controlled через useState):

Валідація:

• Показувати помилки під кожним полем (червоний текст)
• Валідація при blur (втраті фокусу) і при submit
• Кнопка "Створити профіль" неактивна, поки є помилки

4. Прев'ю картки (real-time)

Паралельно з формою (або під нею) — компонент ProfileCard, що відображає введені дані в реальному часі:

┌─────────────────────────┐
│   [Avatar]              │
│   Олена Коваленко       │
│   Frontend Developer    │
│   ● Senior              │
│                         │
│   React  TypeScript CSS │
│                         │
│   "Люблю чистий код"    │
│   olena@example.com     │
└─────────────────────────┘

• Якщо аватар не вказано — показувати заглушку з ініціалами
• Кольорові бейджики для навичок
• Стиль картки залежить від обраної теми

5. Стан після submit

Після успішного submit:

• Форма зникає
• Показується фінальна картка профілю у збільшеному вигляді
• Кнопка "Редагувати" — повертає до форми з заповненими даними

Структура проекту

src/
├── components/
│   ├── Header.tsx
│   ├── ProfileForm.tsx
│   ├── ProfileCard.tsx
│   └── ThemeToggle.tsx
├── context/
│   └── ThemeContext.tsx
├── App.tsx
└── main.tsx

Бонус

• Додай валідацію email через regex та перевірку формату URL
• Анімація перемикання теми (плавний перехід кольорів через CSS transition)
• "Скопіювати профіль" — кнопка, що копіює дані профілю як текст у буфер обміну
• Збереження профілю в localStorage, щоб він зберігався між сесіями

Критерії оцінки