Тестовое задание VK

Данное приложение разработано в рамках выполнения профильного задания - Фронтенд-разработчик на стажировку в VK

🚀 Запуск мини приложения

Запустите ваш мини апп

 npm run start

Откройте http://localhost:5173, чтобы посмотреть результат в браузере.

🗂️ Используемые библиотеки

Мы подготовили для вас набор пакетов, с которыми вам будет легко начать разрабатывать мини аппы

Пакет	Назначение
VKUI	Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте.
vk-mini-apps-router	Библиотека для маршрутизации и навигации в мини-приложениях, созданных с помощью VKUI.

Основное задание: Разработка React-приложения

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

Блок с кнопкой и текстовым полем. По нажатию на кнопку выполнить запрос к https://catfact.ninja/fact. Полученный факт нужно записать в текстовое поле и установить курсор после первого слова.
Форма с текстовым полем и кнопкой отправки. Пользователь вводит своё имя в текстовом поле. По истечении 3-х секунд после ввода имени или при отправке формы выполняется запрос к https://api.agify.io/ с введенным именем в параметре name. Ответом будет возраст человека, определенный по имени. Этот ответ нужно отобразить под текстовым полем.
Особенности:
- Необходимо предотвращать дублирующие запросы (не отправлять запрос с таким же именем).
- Предусмотреть отправку следующего запроса до того, как текущий был обработан - прерывать запрос, чей ответ нам уже не нужен (частый кейс при медленном интернете).

Дополнительные задания:

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

Задание рассчитано на 3-4 часа, поэтому особое внимание следует уделить выполнению основного задания. Рекомендуется выполнять дополнительные задания, если есть опыт работы с данными библиотеками/технологиями, либо остался большой запас по времени.

Результатом выполнения задачи должен стать репозиторий на github/gitlab с инструкцией для запуска - в поле для ответа нужно вставить ссылку с открытым доступом для проверки (+ ссылка на мини-приложение, если оно было развернуто).

Полезные материалы: