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

Критерії приймання

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

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

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

Бекенд

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

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

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

• /register – публічний маршрут реєстрації нового користувача з формою
• /login – публічний маршрут логіна існуючого користувача з формою
• /contacts – приватний маршрут для роботи з колекцією контактів користувача

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

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

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

mango@mail.com

Logout

Стилізація

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

---

npm install styled-components@5.3.10

import styled from 'styled-components';

---

npm i react-redux

import { Provider } from 'react-redux'

---

npm i redux-persist

import { PersistGate } from 'redux-persist/es/integration/react'

---

npm i @reduxjs/toolkit

npm install redux

npm install @redux-devtools/extension

npm i axios

---

URL

https://connections-api.herokuapp.com/