Выполнено тестовое (хотя у меня и не просили).
Запуск
Старый-добрый CRA: yarn install && yarn start.
FAQ
- почему не виртуализированный список? — Кажется, основной юзерский сценарий исключает возможность появления даже 50 результатов. Это как Гугл, у которого до второй страницы (запрос №11) доходит всего 5% пользователей. Кажется, большого смысла поставлять в таком кейсе
react-windowнет. - почему такие императивные анимации? — Показалось для скоупа задачи излишним тащить
transition-group/spring. К чему раньше времени раздувать бандл. - почему CSS-переменные? — У вас тёмная тема, показалось логичным их втащить; не взял на себя смелость добавить обработку для
prefers-color-scheme, дизайнеры за такое бы съели с потрохами.
Список самодеятельности
Не всё по ТЗ/макету было понятно — видимо, в том и задумка 😀 Кроме очевидных вещей (отсутствующие стейты билета, списка, неясно, что такое "оптимальный" и пр.) я сверх ТЗ напридумывал вот что:
- лого крутится при загрузке. Не хотелось еще один спиннер, а надо как-то показывать, что выдача не конечная.
- для проверки реактивности можно потыкать на логотип, каждый тык будет запускать процесс получения поиска и дальнейшую выгрузку билетов.
- втащил i18n, потому что увидел у вас .com-домен. Мой способ неоптимальный (лучше делать переводы в билд-тайме и раскидывать юзеров на два бандла), но тут я ограничен CRA.