Описание вакансии: Svelte FullStack

Проект:

Разработка информационно/новостного портала спортивной тематики. Проект новый, начинаем в основном с чистого листа. На разработчике будет лежать проработка роутинга и маппинга данных. Проект ориентирован на SEO, поэтому необходимо реализовывать sitemap, hreflang, json+ld и иные SEO атрибуты. Сайт должен работать в режиме SSR, частично SSG. Поэтому важно понимание контекста исполнения (сервер, клиент, изоморфная load функция). Данные об авторизации и доступам и кеш API запросов сохранять в KeyValue хранилище. Авторизация и управление кешами — зона ответственности фронтенда на проекте.

Задачи:

Написание и поддержка фронтенд приложения на SvelteKit. Проработка роутинга на проекте, сопоставление его с layouts в sveltekit. Достижение Performance метрик конечных пользователей (PageSpeed 90+). Проект многоязычный, поддержку i18n необходимо закладывать со старта.

Практики принятые при разработке проекта:

• TypeScript для всего, пример типизации sveltekit, можно посмотреть как для load функций sveltekit сам генерирует типы.
• Все API должно быть типизированно, активно используем codegen по возможности. Пример для Strapi. То есть изменение структуры модели данных в strapi должно приводить к ошибке сборки проекта на уровне typecheck.
• Минимум внешних зависимостей в проекте (если что-то можно написать самому или завендорить из-за малого размера — так и делаем)
• Мы не пишем юнит тесты, только интеграционные тесты. Мы не пишем интеграционные тесты на работу 3rd party библиотек.
• Все запросы на бекенд должны быть кешированы на уровне KV (мы хотим чтобы для клиентов не было задержек, поэтому даже если мы обновляем данные в KV, мы делаем это после ответа клиенту, если кеш уже был доступен ранее. Если кешированных данных нет - используем streaming для доставки данных по мере их получения. Видео с пояснением стримминга, conditional stream example )

Пример задачи:

Для авторизированных пользователей (lucia + PG) необходимо добавить метод загрузки аватарки в CloudFlare R2.

Экран профиля:

• Я как авторизированный пользователь могу загрузить фотографию в png/jpg.
• Я как авторизированный пользователь могу стереть фотографию, загруженную в свой профиль.
• Я как авторизированный пользователь вижу загруженную в профиль мною фотографию, независимо от статуса верификации изображения.
• Я как не авторизированный пользователь могу видеть верифицированные администратором аватарки других пользователей.

Экран редактирования пользователя в админке:

• Я как администратор могу удалить любую загруженную аватарку.
• Я как администратор могу изменить статус верификации любой аватарки.

Экран модерации аватарок:

• Я как администратор могу получить список не верифицированных на данный момент аватарок, с возможностью изменить статус верификации.

НеФункциональные требования

• настройки подключения к R2 должны быть вынесены в env
• данные о картинке профиля должны хранится в атрибутах пользователя в lucia
• при просмотре публичной страницы профиля ссылка на урл аватарки должна браться из KV, не должно происходить запроса в PG если данные уже есть в кеше
• для аватарок необходимо использовать отдельный бакет, чтобы не мешать их с ассетами страпи
• необходимо предусмотреть команду очистки бакета и атрибутов пользователей от ассетов
• в случае битого ассета необходимо показывать плейсхолдер (css on error placeholder)
• при сохранении аватара необходимо сохранить оригинал и пережатую в x3,c2,c1 версию под размер аватарки

Тех стек:

SvelteKit, Svelte, Strapi, CloudFlare Pages, CloudFlare KV, Lucia Auth,CloudFlare R2, PostgreSQL, SCSS, Markdown.

Требования к кандидатам:

Опыт работы: 4+ года коммерческого опыта разработки на ReactJS/Svelte/Solid/Svelte или аналоге (желание работать со Svelte must have). Опыт разработки бекенда (необязательно на nodejs).

Инструменты:

git, browserstack, figma, jira, confluence

Технические навыки:

Английский: intermediate + Умение писать переиспользуемый код. Знание стандартов (использование fetch вместо axios, максимально использовать нативыне возможности браузера/среды исполнения) Необходимо уметь продумывать взаимосвязь разных элементов (layout/route/kv-cache/strapi). Увы фронтенд не stateless, поэтом прийдется жонглировать состояниями.

Формат работы:

удаленка, возможна частичная удаленка (Киев).

#vacancy #frontend