teplokotov / vk-test-app

Тестовое задание VK — это одностраничное веб-приложение, позволяющее узнавать интересные факты 🤓 и возраст по имени.

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

🌐 https://teplokotov.github.io/vk-test-app/

Одностраничное веб-приложение состоит из двух панно (panel):

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

• В работе использована библиотека VKUI.
• Реализована валидация поля ввода имени (имя может состоять только из латинских букв).
• Приложение также развернуто в виде мини-приложения ВКонтакте.

Запуск проекта в 🖐 5 шагов

1. Клонируйте проект

git clone https://github.com/teplokotov/vk-test-app.git

2. Перейдите в директорию проекта

cd vk-test-app

3. Установите модули

npm install

4. Запустите проект

npm run dev

5. Откройте страницу

http://localhost:5173

Используемые технологии

• VS Code
• Git Bash
• Vite
• React 18.2
• TypeScript
• VKUI

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

• Документация VKUI
• Как создать свое мини-приложение ВКонтакте
• Документация Feature-Sliced Design

Контакты

• Филипп Добриков
• [e-mail]
• https://t.me/hello_philipp