Клиенту требовалось создать веб-интерфейс для онлайн-кинотеатра, в котором пользователи могли бы просматривать информацию о фильмах, актёрском составе и пользовательских отзывах. Основной задачей было реализовать современный и удобный фронтенд, адаптированный под разные устройства, с возможностью дальнейшего подключения к API.
Клиент хотел получить:
детальную страницу каждого фильма с описанием и медиа-контентом;
слайдеры с отзывами и актёрами;
аккуратный и понятный интерфейс с разделением на компоненты;
структуру проекта, которую можно масштабировать.
Стек: HTML, SCSS (BEM, миксины), JavaScript (модули), JSX, Minista (Vite)
Что делал:
Разработал адаптивный, кроссбраузерный интерфейс с применением SCSS миксинов и переменных для быстрой настройки сеток, отступов и медиа-запросов.
Проектировал переиспользуемые модули на чистом JavaScript для слайдеров, кнопок, раскрывающихся списков и другой динамики.
Работал с JSX для создания структурированных компонентов с поддержкой props и children.
Реализовал динамическую генерацию карточек фильмов через методы массива (map).
Построил проектную архитектуру по принципу декомпозиции компонентов.
Использовал методологию БЭМ для чистой и масштабируемой стилизации.
Настроил сборку проекта с помощью Minista и Vite.
Оптимизировал загрузку медиафайлов через ленивую подгрузку (loading="lazy").
Что было сложно / чему научился:
Освоил создание масштабируемой структуры SCSS с использованием вложенности, миксинов и циклов для упрощения адаптивной верстки.
Разработал собственные JavaScript-модули для клиентской логики, улучшил понимание разделения кода на функциональные блоки.
Углубился в работу JSX без React, освоил передачу данных через props и рендеринг списков.
Отработал построение адаптивной верстки, подготовленной под дальнейшую интеграцию с back-end.
Клиент получил готовую фронтенд-структуру онлайн-кинотеатра, в которой легко подключить реальное API для получения информации о фильмах. Проект оказался удобным для редактирования и расширения — благодаря компонентному подходу.
Интерфейс стал адаптивным, понятным и визуально привлекательным. Сайт корректно отображается на всех устройствах, а слайдеры отзывов и актёров обеспечивают вовлечённость пользователей.
Данный проект может использоваться как демонстрационная витрина или быть доработан до полноценного продукта. Код легко поддерживается и масштабируется, что особенно ценно для дальнейшего развития платформы.
Пожаловаться
