vue-users-list

Тестовое задание для Uplab. Смотреть тут: https://megfree.github.io/vue-users-list/

Комментарий к выполнению

К сожалению, я не смог найти публичное АПИ с умным эндпоинтом, который бы мог принимать множество параметров поиска сразу. Обычно, такие АПИ позволяют прокидывать только один параметр фильтрации. Конечно, можно было бы сделать так, чтобы при изменении одного параметра фильтрации сбрасывался бы предыдущий, но мне было интересно сделать фильтрацию сразу по всем возможным параметрам (к тому же в выходные не уточнишь, а срок в понедельник :)) Для этого пришлось делать запрос сразу за всеми пользователями. Я понимаю, что для прода такая стратегия фильтрации может не подойти, например, вдруг у нас пользователей не 100, как в этом тестовом, а миллион? В таком случае я бы сделал debounced функцию с запросом к АПИ, а в watch смотрел бы за изменением параметров фильтрации. В текущем решении я просто симулирую подзагрузку. Кроме этого, в ТЗ сказано, что надо реализовать и пагинацию и кнопку "загрузить ещё". Я так и не смог придумать, как это вместить. Обычно для таких случаев присутствует либо кнопка загрузить еще, либо пагинация, но не всё сразу. Поэтому я решил остановиться на более современном подходе с "дозагрузкой" пользователей.

Расхождения с ТЗ

• Загрузка всех пользователей сразу в пользу возможности фильтрации по множеству критериев
• Отсутствие пагинации и кнопки "загрузить еще" (вместо этого "дозагрузка" по скроллу)

Что интересного?

• Composition API
• Я всегда хотел попробовать FSD (Feature Sliced Design), а тут такой случай хороший. Тут можно почитать про подход: https://feature-sliced.design/
• Фильтрация по множественным критериям:
  • имя
  • пол
  • возраст
  • университет
  • локация
• Одна строка поиска для всего и сразу (находит лучшее соответствие):
  • имени
  • университета
  • локации
• Сохранение параметров фильтрации в квери параметры (можно делиться фильтрацией через ссылку)
• Сброс параметров
• Мобильная и десктопная версии (чекните пожалуйста мобилку, там поповер получился классный)
• Немножко использовал gsap :)

Использованные технологии

• Vue 3
• Vue Router 4
• и всякие lodash, gsap, fuse.js. По минимуму.

Решил отказаться от стейт-менеджера, подумал, что ради такого маленького проектика не стоит.

Поднять локально

Стандартно npm i, и после npm run dev.