Общее описание задачи:

Необходимо разработать веб-сайт, который будет служить портфолио для размещения работ различных форматов (кейс, картинка, видео, аудио). Важными аспектами являются скорость работы сайта, создание фильтра работ с быстрой сортировкой и возможность управления контентом через административную панель.

Макет сайта: https://www.figma.com/file/3luCUaOQ5WbNNSxOj7BpGw/Solovey.ru?type=design&node-id=359%3A2&mode=design&t=BGGMDNa4oNFZNDYF-1

Видео ТЗ: https://disk.yandex.ru/i/cwulqycs3pay7a


Требования к веб-сайту

1. Главная страница: (https://www.figma.com/proto/3lucuaoq5wbnnsxoj7bpgw/Solovey.ru?Type=design&node-id=359-2&t=firvelcayynyooma-0&scaling=min-zoom&page-id=0%3A1)

• Блочное представление работ. Фиксированная ширина и четыре типа высоты
• Фильтры для сортировки работ:
  
  • Виды работ: 2Д, 3Д, Съемки, Анимация и тд.
  • Ниши бизнеса: IT, Производство, Медицина и т.д.

При этом работы можно сортировать по

• Хронологии – сортировка по дате добавления. Последние работы в верхнем левом углу
• Рекомендуем – сортировка работ по «весу» у каждой работы должен быть параметр «веса» чем весомее работа тем выше она отображается. При одинаковом весе, первой ставится работа ранее размещённая по дате. Самая весомая работа = левый верхний угол
  Пример фильтра: https://mways.ru/all/cases/

• Оптимизация скорости загрузки. Скорости фильтрации достаточно как на сайте конкурента: https://mways.ru/all/cases/

2. Типы работ и их визуальное представление (превью):

1. Статичные картинки. Формат jpeg, png
2. Статичные картинки с zoom при наведеннии (как на сайте https://weisswater.com/)
3. Видеопревью основное. Подгрузать на хостинг зацикленное видео формата mp4.
4. Видеопревью при наведении (сначала картинка а при наведении подгружается видео превью, как тут: https://solovey.ru/express/). Подгрызать на хостинг зацикленное видео формата mp4.
5. Аудиоформат. Фиксированный размер карточки по высоте.
6. Кнопка. Блок с текстом и ссылкой (https://disk.yandex.ru/i/wonsrc0ejnvosw

3. Визуальный дизайн:

• Дизайн должен соответствовать предоставленному макету в figma. (пиксель в пиксель)
• Адаптивность под различные устройства (мобильные, планшеты, десктопы).

Административная панель:

1. Функционал:

• Добавление и управление работами (кейс, картинка, видео, аудио)
• Возможность управления фильтрами (добавление, удаление, быстрое добавление из текущего списка)

2. Типы работ для добавления:

• Кейс: подробное описание работы с изображениями и текстом.
• Картинка: загрузка изображений.
• Видео: загрузка и встраивание видеороликов с ютюба и vimeo.

3. Параметры работы:

• Размеры превью загружаемых изображений по высоте и видео: 0.5-1-1,5-2 блока.
• Заголовок Вид работы (это фильтр для сортировки)
• Отрасли (еще один фильтр на примере будет понятно)
• Вес работы (нужно для фильтра по рекомендации)
• Дата создания (можно менять)
• Выбор превью: картинка или loop видео Ссылка на видео Елси выбран тип работы кейс нужно создать интерактивный редактор страницы с кейсом

Общие требования к фронтенду:

1. Верстка должна быть адаптивной и кроссбраузерной, обеспечивать корректное отображение на устройствах с различными разрешениями экрана и в популярных браузерах (последние версии Google Chrome, Firefox, Safari, Edge).
2. Использовать современный стек технологий (HTML5, CSS3, javascript ES6+)
3. Фреймворк для разработки интерфейса - предпочтительно использовать React.js или Vue.js.
4. Использовать lazy loading для изображений и асинхронной загрузки компонентов для улучшения производительности.
5. Управление состоянием - для React использовать Redux или Context API, для Vue использовать Vuex.
6. Анимации и переходы должны быть плавными и не вызывать заметных задержек.

Опциональные требования к фронтенду:

1. Использование препроцессоров SCSS или LESS для стилизации.
2. Сборка проекта должна осуществляться через Webpack, Parcel, или другие современные сборщики модулей.

Спецификация интерфейса:

1. На главной странице должен быть реализован масонри (сетка) для отображения блоков работ.
2. Фильтрация работ должна происходить без перезагрузки страницы с применением AJAX-запросов (можете предложить свою реализацию)
3. Кнопки фильтров работ должны подсвечиваться при выборе, а также динамически загружать соответствующие категории работ (это должно происходить быстро)
4. При клике на блок работы должен открываться модальное окно или переходить на отдельную страницу с детальной информацией о работе (в соответствии с выбранным способом просмотра).
5. В модальном окне или на странице деталей работы должна быть возможность просмотра изображений в высоком разрешении, видео, и описание работы. Модальное окно опционально

Анимации и динамические эффекты:

1. При наведении на блок работы должен появляться эффект наведения, указанный в дизайне (увеличение).
2. Плавные переходы между состояниями элементов UI (кнопки, ссылки, поля ввода).
3. Анимация загрузки должна отображаться при ожидании ответа от сервера при фильтрации работ.

Интеграция с бэкендом:

1. Реализация restful API или graphql для взаимодействия с сервером.
2. Валидация данных на клиенте перед отправкой на сервер.
3. Обработка ошибок при запросах к серверу и их корректное отображение пользователю.

Тестирование (Если будет время):

1. Ручное тестирование интерфейса на различных устройствах и браузерах.
2. Автоматизированное тестирование (опционально): использование Jest или Mocha для юнит-тестирования компонентов

Документация (ОБЯЗАТЕЛЬНО после окончания написания проекта):

1. Код должен сопровождаться комментариями, поясняющими сложные или критически важные участки кода.
2. Требуется составить документацию по структуре проекта, используемым компонентам и логике работы приложения.

Общие требования к бэкенду:

1. Использование надежного и масштабируемого серверного решения, например, Node.js с Express.js, Next.js.
2. Реализация restful API (или graphql) для обмена данными между фронтендом и бэкендом.
3. Аутентификация пользователей через JWT (JSON Web Tokens) или использование oauth 2.0 для интеграции с внешними сервисами аутентификации. (если будет реализована кастомная админ панель, иначе )
4. Админ Панель реализовать на react admin

База данных:

1. Использование современной СУБД, такой как postgresql, mongodb.
2. Обеспечение целостности данных и их резервного копирования.
3. Оптимизация запросов к базе данных для обеспечения высокой производительности.

Безопасность:

1. Настройка HTTPS для шифрования трафика между клиентом и сервером (при деплои настроить ssl сертефикат).

Логирование и мониторинг (опционально не обязательно):

1. Реализация системы логирования для отслеживания ошибок и неполадок в работе приложения.
2. Настройка системы мониторинга состояния сервера и приложения.

Тестирование бэкенда (опционально):

1. Ручное тестирование ключевых функций API.
2. Автоматическое тестирование с использованием фреймворков для интеграционного тестирования, например, Postman для REST API или Apollo для graphql.
3. Нагрузочное тестирование для определения максимально возможной нагрузки на систему