Цель:

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

Задача

Реализовать сокращатель ссылок. Сервис представляет собой форму, содержащую два поля. В поле url вводится длинная ссылка, в поле shortUrl вводится желаемый короткий урл. При переходе по ранее созданной shortUrl человека редиректит на url введенный при создании урл. При переходе по ссылке вида /shortUrl/stats открывается история переходов по ссылке.

Этапы:

  • публичный репозиторий на github
  • создать пустой проект sveltekit
  • изменить тип адаптера на cloudflare-pages
  • подвязать cloudflare pages к репозиторию в github и активировать ci/cd
  • создать ветку с названием task, дальнейшая работа будет вестись в этой ветке. С нее должен быть сделать PR на мастер, в котором будет вестись ревью. ВАЖНО: активированный ci/cd на прошлом этапе позволит собирать превью ветку для просмотра результата работы.
  • создать layout для оформления страниц шапкой, футером. Чтобы не возится с оформлением рекомендую подключить picocss
  • создать форму ввода для url и shortUrl с кнопкой submit. Форма должна релизовывать:
    • необходимо использовать form enhancement для создание качественного ux формы.
    • валидацию url, с установкой invalid для полей содержащих не корректный ulr
    • при сабмите формы кнопка submin должна переходить disabled state (можно с loading). Цель: предотвратить дабл клик. Показать человеку, что форма работает
    • в случае успеха — показать ссылку на /shortUrl/stats вместо кнопки success
    • в случае ошибки — показать текст ошибки. Пример кейса для проверки ошибки - такой shortUrl уже есть.
  • подключить cloudflare kv к проекту
  • для запуска эмуляции kv в dev режиме не забудьте положить "toml" файл в корень проекта, и добавьте platformProxy: {persist: './your-custom-path'} из этого pr
  • необходимо создать +server.ts роут для обработки /[shortUrl]. При переходе по урл:
    • необходимо отдавать 302 редирект на url связанный с этим shortUrl
    • сохранять в kv время перехода
    • сохранять в kv useragent браузера, который совершал переход
    • сохранять в kv geoip данные которые предоставляет нам cloudflare
    • сохранять в kv ip адрес с которого был осуществлен переход
  • необходимо создать роут +svelte.page для /[shortUrl]/stats. Внтутри роута:
    • показать табличку с историей открыти ссылки, вместе с сохраненной информацией (время, ip, useragent, гео данные)
    • показать сумму кликов по ссылке - totals
  • bonus: сделать роут /list, в котормо можно было бы увидеть список всех созданных ссылок.

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

  • минимальное использование внешних библиотек
  • корректное использование TS (использование strict mode)
  • минимальное количество кода для реализации задачи
  • максимальное использование встроенного в sveltekit функицонала (лейауты, разные типы роутов, form progressive enhancement и иные функции kit)
  • способ структурирования информации в kv. KV предоставляем максимально простой механизм, а хранить нам нужно историю переходов под каждый созданный урл. Сделать это можно разными путями.
  • приложение не сломается если по одной ссылке кто-то перейдет 2000 раз. 4000 раз. Не сломается экран stats тоже и kv тоже.

Артефакт

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