Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/margo-yunanova/funzone

Профильное задание для стажировки в ВК Фронтенд-разработчик
https://github.com/margo-yunanova/funzone

react typescript vk vkui

Last synced: 5 days ago
JSON representation

Профильное задание для стажировки в ВК Фронтенд-разработчик

Awesome Lists containing this project

README 

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



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

стажировку в VK



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



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



```sh

 npm run start

```

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



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



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

| Пакет | Назначение |

| ------ | ------ |

| [VKUI](https://vkcom.github.io/VKUI/) | Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте. |

| [vk-mini-apps-router](https://dev.vk.com/ru/libraries/router) | Библиотека для маршрутизации и навигации в мини-приложениях, созданных с помощью VKUI. |



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



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



1.  Блок с кнопкой и текстовым полем. По нажатию на кнопку выполнить запрос к [https://catfact.ninja/fact](https://vk.com/away.php?to=https%3A%2F%2Fcatfact.ninja%2Ffact&utf=1). Полученный факт нужно записать в текстовое поле и установить курсор после первого слова.

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

    Особенности:

    *   Необходимо предотвращать дублирующие запросы (не отправлять запрос с таким же именем).

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



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



1.  Использовать при реализации библиотеку VKUI (можно вынести формы в разные страницы, используя компоненты View и Panel).

2.  Реализовать валидацию поля ввода имени (имя может состоять только из букв).

3.  Развернуть данное приложение в виде мини-приложения ВКонтакте. Для этого дополнительно понадобится установить пакет bridge.

4.  Плюсом будет использование следующих библиотек и технологий, так как они активно применяются в проектах команды:

    *   Архитектурная методология Feature-Sliced Design

    *   TanStack Query для работы с запросами

    *   Typescript

    *   React Hook Form + Yup для работы с формами и их валидацией



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

  

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



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



*   Документация VKUI [https://vkcom.github.io/VKUI/](https://vkcom.github.io/VKUI/)

*   Как создать свое мини-приложение ВКонтакте [https://dev.vk.com/ru/mini-apps/getting-started](https://dev.vk.com/ru/mini-apps/getting-started)

*   Документация Feature-Sliced Design [https://feature-sliced.design/ru/](https://feature-sliced.design/ru/)