Test project9 Jan 2024
achernar - a Next.js movie-catalog test task hardened into a real streaming app
Remake- Next.js 14
- React 18
- TypeScript
- SCSS
- Swiper
- SSG
- Responsive
- Accessible
A Next.js 14 (App Router) + TypeScript + SCSS-modules test task: a Russian-language, Netflix-style movie-catalog landing (icon sidebar, hero banner, a 'Новинки' Swiper rail and a 'ТОП-10' rail) that rendered only on a wide desktop and fell apart everywhere else. The brief here was to preserve the original visual design and improve it surgically rather than redesign it. On correctness: five of six sidebar links pointed at routes that did not exist and 404'd, the scroll-to-top control was a non-focusable div whose useEffect attached a window scroll listener that was never removed and whose cleanup referenced a different function so it no-opped, and the catalog reused one poster under two titles - the nav was rewired to real routes, the listener was hoisted to a named handler removed by reference, the control became a real button, and the duplicate was replaced. On reach: the whole em-based layout was pinned to a fixed 28px root with zero media queries, a 216px sidebar that ate phone screens and Swiper carousels with hardcoded slidesPerView - reworked into a real responsive system (root font scaling by breakpoint, a fixed bottom tab-bar on mobile, per-breakpoint Swiper counts, fluid hero) with an accessibility floor of focus-visible rings, accessible names, real alt text, a reduced-motion guard that disables the Lenis smooth-scroll, and a flyout label that fixed the sidebar overflowing onto content. It was then built out from a single screen into a working app: a full catalog grid, a live client-side search over titles and genres, a TV-channels view, a localStorage-backed favorites list with empty state, an account page, a movie detail page with backdrop and 'similar', and a bespoke video player - play/pause, scrubber, volume, fullscreen and keyboard shortcuts, themed to match the site - that streams real Creative-Commons films (Blender open movies and the Internet Archive). Next.js static export (output: export with generateStaticParams for the movie and watch routes), self-hosted on a Hetzner box behind Caddy with a grey-cloud DNS record - no Cloudflare proxy.