https://github.com/mariashalaginova/vk-react-app
https://github.com/mariashalaginova/vk-react-app
javascript react tanstack-react-query typescript useform-hook yup
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mariashalaginova/vk-react-app
- Owner: MariaShalaginova
- Created: 2024-03-17T18:21:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-17T20:50:46.000Z (over 1 year ago)
- Last Synced: 2025-04-01T10:54:41.156Z (3 months ago)
- Topics: javascript, react, tanstack-react-query, typescript, useform-hook, yup
- Language: TypeScript
- Homepage:
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Компонент поиска
## Как запустить проект
1. Выполнить в директории проекта
```bash
npm install
```
2. Для запуска в режиме разработки выполнить
```bash
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