Тестовое задание9 Jan 2024
achernar - тестовое на Next.js: каталог фильмов, доведённый до рабочего онлайн-кинотеатра
Ремейк- Next.js 14
- React 18
- TypeScript
- SCSS
- Swiper
- SSG
- Responsive
- Accessible
Тестовое на Next.js 14 (App Router) + TypeScript + SCSS-модулях: русскоязычный лендинг-каталог в стиле Netflix (сайдбар-иконки, hero-баннер, слайдер «Новинки» и «ТОП-10» на Swiper), который рендерился только на широком десктопе и разваливался везде ещё. Задача была сохранить исходный дизайн и улучшить точечно, а не переделывать. По корректности: пять из шести ссылок сайдбара вели на несуществующие роуты и давали 404; кнопка «наверх» была неинтерактивным div, чей useEffect вешал window-scroll-листенер, который никогда не снимался, а cleanup ссылался на другую функцию и не срабатывал; в каталоге один постер использовался под двумя названиями - навигацию перевёл на реальные роуты, листенер вынес в именованный обработчик и снимаю по ссылке, кнопку сделал настоящей, дубль заменил. По охвату: вся em-вёрстка была привязана к фиксированным 28px на корне без единого медиазапроса, сайдбар 216px съедал телефон, у Swiper были захардкоженные slidesPerView - переработал в реальную адаптивность (масштаб корневого шрифта по брейкпоинтам, фиксированный нижний таб-бар на мобиле, breakpoints для слайдеров, резиновый hero) с базой доступности: focus-visible, доступные имена, реальные alt, guard под prefers-reduced-motion, отключающий плавный скролл Lenis, и flyout-подпись, починившая «налезание» сайдбара на контент. Дальше развернул из одного экрана в рабочее приложение: сетка каталога, живой клиентский поиск по названиям и жанрам, экран ТВ-каналов, список избранного на localStorage с пустым состоянием, страница аккаунта, страница фильма с фоном-кадром и блоком «похожее», и собственный видеоплеер (play/пауза, перемотка, громкость, fullscreen и горячие клавиши, в тему сайта), который проигрывает реальные Creative-Commons фильмы (Blender open movies и Internet Archive). Статический экспорт Next.js (output: export + generateStaticParams для роутов фильма и просмотра), self-hosting на сервере Hetzner за Caddy с grey-cloud DNS-записью - без проксирования Cloudflare.