Skip to content

Svitly4nyi-Vla2yslav/goit-react-hw-08-phonebook

Repository files navigation

Критерії прийому

Використовуй цей шаблон React-проекту як стартову точку своєї програми.

Створено репозиторій goit-react-hw-08-phonebook При здачі домашньої роботи є посилання на вихідні файли та робочі сторінки кожного проекту на GitHub Pages При запуску коду завдання, в консолі немає помилок та попереджень Для кожного компонента є окрема папка з файлом компонента React та файлом стилів

Книга контактів

Додай у програму «Книга контактів» можливість реєстрації, логіна та оновлення користувача, а також роботу з приватною колекцією контактів.

Бекенд

Для цього завдання є готовий бекенд. Ознайомся з документацією. Він підтримує всі необхідні операції з колекцією контактів, а також реєстрацію, логін та оновлення користувача за допомогою JWT. Використовуй його замість твого бекенда створеного через сервіс mockapi.io.

Маршрутизація

Додай маршрутизацію з бібліотекою React Router. У програмі має бути кілька сторінок:

🔴 «/register» - публічний маршрут реєстрації нового користувача з формою

🟥 «/login» - публічний маршрут логіна існуючого користувача з формою

📲 «/contacts»- приватний маршрут для роботи зі списком контактів користувача

Додай компонент навігації Navigation з посиланнями для переходу по маршрутах.

Меню користувача

Створи компонент UserMenu, що відображає пошту користувача і кнопку виходу з облікового запису. Ось як може виглядати його розмітка.

<div>
  <p>[email protected]</p>
  <button>Logout</button>
</div>

Стилізація

Це фінальна версія програми, тому попрацюй над оформленням інтерфейсу. Можна використовувати бібліотеку стилізації або компонентів, наприклад Chakra UI або Material UI.