Skip to content

MariaShalaginova/VK-React-App

Repository files navigation

Компонент поиска

Как запустить проект

  1. Выполнить в директории проекта
npm install
  1. Для запуска в режиме разработки выполнить
npm run dev

Задания

-Приложение должно состоять из нескольких частей:

Блок с кнопкой и текстовым полем. По нажатию на кнопку выполнить запрос к https://vk.com/away.php?to=https%3A%2F%2Fcatfact.ninja%2Ffact&utf=1 . Полученный факт нужно записать в текстовое поле и установить курсор после первого слова. Форма с текстовым полем и кнопкой отправки. Пользователь вводит своё имя в текстовом поле. По истечении 3-х секунд после ввода имени или при отправке формы выполняется запрос к https://vk.com/away.php?to=https%3A%2F%2Fapi.agify.io%2F&utf=1 с введенным именем в параметре name . Ответом будет возраст человека, определенный по имени. Этот ответ нужно отобразить под текстовым полем.

Особенности:
Необходимо предотвращать дублирующие запросы (не отправлять запрос с таким же именем).Предусмотреть отправку следующего запроса до того, как текущий был обработан - прерывать запрос, чей ответ нам уже не нужен (частый кейс при медленном интернете).

Надо Использовать при реализации библиотеку VKUI (можно вынести формы в разные страницы, используя компоненты View и Panel). Надо Реализовать валидацию поля ввода имени (имя может состоять только из букв). Развернуть данное приложение в виде мини-приложения ВКонтакте. Для этого дополнительно понадобится установить пакет bridge. Используй Архитектурная методология Feature-Sliced Design, TanStack Query для работы с запросами, React Hook Form + Yup для работы с формами и их валидацией, typescrypt