Цель:

Знакомство с экосистемой sveltekit и сопутствующим инструментарием. Знакомство с cloudlflare pages и экосистемой вокруг GraphQL.

Задача

Реализовать каталог серий "Рик и Морти" с информацией по персонажам. Используем публичное API. Структура страниц:

• /[season]/ : содержит информацию о сезоне, и ссылки страницы эпизодов внутри сезона, так же ссылки на всех персонажей участвующих в сезоне
• /[season]/[episode]/ : содержит информацию об эпизоде, и ссылки на страницы всех персонажей участвующих в эпизоде
• /[character]/ : содержит информацию о персонаже, и ссылки на все эпизоды в которых он принимает участие.

Функционал поиска: реализовать функционал поиска по названию эпизода и имени персонажа. Для поиска необходимо использовать функционал GraphQL.

Все страницы должны запускаться в режиме SSR, для доступа к GraphQL использовать urql.

Страницы с поиском так же должны пререндериться.

При смене страницы получение данных должно происходить при помощи запроса к API Rick And Morty напрямую, без запуска серверной load функции внутри sveltekit.

Этапы:

• создать публичный репозиторий на github

• создать пустой проект sveltekit

• изменить тип адаптера на cloudflare-pages

• подвязать cloudflare pages к репозиторию в github и активировать ci/cd

• создать ветку с названием task, дальнейшая работа будет вестись в этой ветке. С нее должен быть сделать PR на мастер, в котором будет вестись ревью. ВАЖНО: активированный ci/cd на прошлом этапе позволит собирать превью ветку для просмотра результата работы.

• создать layout для оформления страниц шапкой, футером. Чтобы не возится с оформлением, рекомендуется подключить picocss

• необходимо использовать form enhancement для создания качественного UX формы поиска.

  • валидация поля, с установкой invalid для поиска мене чем по 3м знакам.
  • при сабмите формы кнопка submit должна переходить в disabled state (можно с loading). Цель: предотвратить дабл клик и показать человеку, что форма работает.
  • в случае успеха — показать список найденных эпизодов и персонажей
  • в случае ошибки — показать текст ошибки.
  • в случае если результатов поиска нет — показать заглушку об отсутствии результатов. Если происходит генерация пустого результата со стороны сервера — отдать http status code 404 вместе с пустым списком.

• bonus: добавить функционал кеширования результатов поиска в LRU кеш на базе CloudFlare KV.

Критерии оценки

• минимальное использование внешних библиотек
• корректное использование TS (использование strict mode)
• минимальное количество кода для реализации задачи
• корректная реализация codegen для graphql с typescript.
• максимальное использование встроенного в sveltekit функционала (лейауты, разные типы роутов, form progressive enhancement и иные функции kit)

Артефакт

Должен быть PR, который не включает в себя скелет sveltekit и интеграцию адаптера для запуска CI/CD. Внутри PR должен быть рабочий preview branch для просмотра запущенного на pages проекта.