• Запросы можно осуществлять через Fetch API или XMLHttpRequest, сторонние библиотеки, такие как axios или jQuery), не применяются. / 1
• Запросы к API вынесены в отдельные файлы: MainApi.js и MoviesApi.js. Цепочка обработки промисов завершается блоком. / 1
• Первый обработчик then возвращает res.json. res проверяется на корректность. / 1
• Цепочка обработки промисов завершается блоком catch. / 1
• Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске; все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке; данные пользователя запрашиваются один раз при запуске приложения. / 2

Обработка ошибок API:

• пользователь получает сообщение в случае любой ошибки; / 4
• поля формы заблокированы во время отправки запросов, и у пользователя нет возможности отправить новый запрос до завершения предыдущего. / 2

• Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы.
• Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.
• При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.
• Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.

• имена переменных, функций и параметров написаны в camelCase;
• имена переменных — существительные;
• имена переменных, функций и компонентов соответствуют содержимому;
• имена коллекций NodeList — существительные во множественном числе;
• имя функции начинается с глагола и отражает то, что она делает;
• для именования запрещены: транслит и неуместные сокращения.

• Начальное состояние стейт-переменных содержит корректный тип данных. / 1

• Для элементов списка используется уникальный ключ key, а не индекс массива. / 2

• Запросы к API описаны внутри компонента App или в корневых компонентах страниц. / 2

• Для внутренних ссылок в приложении используются компоненты из библиотеки react-router. / 2

• Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента. / 2

• Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл. / 2

• JWT-токен хранится в localStorage или в cookie; / 2
• Jwt проверяется запросом к серверу, а не только в локальном хранилище. / 2
• При выходе из аккаунта jwt удаляется. / 3

• При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
Напоминание: для того, чтобы выполнить вышележащий пункт чек-листа, при каждом поиске на странице фильмов результаты поиска фильмов нужно сохранять в localstorage. В сохраняемые данные должны входить и строка поиска и статус чекбокса «Короткометражки», чтобы пользователю при повторном переходе на страницу фильмов, можно было вывести на экран информацию, полностью совпадающую с его последним поиском перед уходом на другую страницу или перезагрузкой страницы (с расстановкой актуального состояния лайков). То есть, сохранённую информацию можно будет доставать из хранилища при монтировании и перерисовке компоненты фильмов и выводить на экран. При логауте пользователя нужно эту информацию в хранилище и стейт-переменных из useState уничтожать.
• Комментарий: Как написано в предыдущем напоминании, при логауте пользователя нужно всю информацию вышедшего пользователя в хранилище и также обязательно в стейт-переменных из useState уничтожать. Иначе, информация пользователя, сделавшего логаут, может стать известна вошедшему следом другому пользователю, не говоря о том, что и сам проект в некоторых случаях будет работать неправильно. Сейчас, если следующий пользователь авторизуется на сайте без предварительной перезагрузки сайта после логаута предыдущего пользователя, ему на странице фильмов отображается поиск предыдущего пользователя. Видимо, эта информация не уничтожается в стейт-переменных из какого-то useState при логауте пользователя.
• Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
Комментарий: кнопка сабмита на формах аутентификации становится активной при незаполненных полях и можно отправить запрос на сервер (см. снимок), что противоречит вышележащему пункту чек-листа.
• Комментарий: При вводе в поле email адреса почты без точки перед именем домена верхнего уровня (в правой части адреса) можно выполнить запрос на сервер. Однако, сервер возвращает статус ошибки и входа не происходит. Нужно, чтобы валидация имени, почты и пароля и на серверной и на клиентской частях приложения, была одинаковой (по одним и тем же регулярным выражениям), и при невалидных данных запрос на сервер вообще не возможно было отправить.
• Страница редактирование профиля:
  Комментарий: При входе в личный кабинет отображаются данные предыдущего пользователя. Если это первый зарегистрированный пользователь, или пользователь, залогиневшийся на сайте после предварительной перезагрузки сайта после логаута предыдущего пользователя, не отображаются никакие данные (см. снимок). На странице фильмов не отображаются активные лайки на карточках, которые сохранял пользователь, на странице «Сохранённые фильмы» не отображаются сохранённые карточки, которые сохранял пользователь. Данные начинают отображаться правильно только после перезагрузки сайта. Кейс необходимо протестировать, можно на пользователях [email protected] и [email protected], пароль 12345678.
• Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
Комментарий: Пользователю не отображается уведомление об успешном запросе к серверу при сохранении профиля.
• Комментарий: На страницах «Фильмы» и «Сохранённые фильмы» поиск должен быть регистронезависимый. Это значит, что какими бы буквами (маленькими или большими) ни была набрана часть названия в форме поиска, по ней бы нашлись фильмы, в названиях которых есть такая часть, независимо от того, какими буквами набрана эта часть названия в карточке фильма.
• Комментарий: При входе на страницу фильмов, после осуществления поиска какой-либо сохранённой карточки на странице «Сохранённые фильмы», можно обнаружить, что активный лайк остался только на карточке, которая была только что найдена на странице «Сохранённые фильмы». Лайки на других сохранённых карточках стали неактивными (см. снимки). Функционалы поиска на страницах «Фильмы» и «Сохранённые фильмы» никак не должны быть связаны, и расстановка статусов лайков всегда должна быть актуальной. Статусы лайков стали отображаться правильно только после перезагрузки страницы. Кейс необходимо протестировать, можно на пользователе [email protected], пароль 12345678, у него сохранённые карточки со слогом "ро" в названии.
• Комментарий: При входе на сайт, при поиске на странице фильмов не отображаются активные лайки на карточках, которые сохранял пользователь, на странице «Сохранённые фильмы» не отображаются сохранённые карточки, которые сохранял пользователь. Данные начинают отображаться правильно только после перезагрузки сайта. Кейс необходимо протестировать, можно на пользователях [email protected] и [email protected], пароль 12345678.
• Комментарий: По URL-адресу авторизованный пользователь может зайти и на страницы авторизации и регистрации, что не допустимо, так как открывается возможность авторизоваться ещё раз, не выйдя из предыдущего аккаунта.
• Комментарий: Пользователи не могут выйти на страницу «404».
• Комментарий: Если при любых запросах авторизованного пользователя с проверкой Jwt, оказывается, что токен не валиден (токен может оказаться невалидным, даже будучи в наличии в localstorage или в cookie, или может быть уничтожен авторизованным пользователем "вручную"), пользователь должен становиться неавторизованным - должен происходить полный автоматический "логаут" пользователя на главную страницу с шапкой неавторизованного пользователя с удалением всей его информации из хранилищ и стейтов. Если в случае невалидного или уничтоженного токена при перезагрузке сайта или других действиях пользователя полный логаут (или вообще логаут) не происходит - не происходит очистка localstorage и других локальных хранилищ и стейтов, проект может начать работать неправильно при следующем входе пользователя на сайт.
• Комментарий: если любые запросы к серверу завершились ошибкой, пользователь должен увидеть сообщение на своём экране, а не только в консоли.
• Комментарий: длительность короткометражек, количество фильмов, отображаемое при нажатии кнопки "Еще", другие постоянные данные нужно заносить в константы с понятными названиями и помещать в файл констант, чтобы в коде не было "магических" значений.
• Комментарий: Поскольку с карточками фильмов разрешается работать только авторизованному пользователю, запрос к серверу beatfilm-movies нужно делать только для авторизованного пользователя, лучше только при его первом поиске. При логауте пользователя нужно все запрошенные фильмы с beatfilm-movies, уничтожать.
• Комментарий: Сохранять данные последнего поиска на странице «Сохранённые фильмы» нигде (ни в localstorage, ни в стейт-переменных из useState) не нужно. Надо при входе на эту страницу выводить на экран все сохранённые фильмы, так как пользователь может не помнить, какие фильмы он сохранял, и не найти их. Нужно, чтобы при входе на страницу «Сохранённые фильмы» пользователь видел все свои сохранённые карточки (если они у него есть) без задания параметров поиска, а не пустой экран и не результат какого-либо поиска.

Сверстайте все блоки сайта по сгенерированному макету. Вёрстка должна отвечать определённым HTML- и CSS-требованиям.
HTML:
Разметка портирована в JSX.
Разметка семантическая.
Все классы названы по БЭМ.
Навигация должна работать: ни одна ссылка не ведёт «в никуда».
CSS:

• Для стилизации каждого блока выбраны правильные инструменты, которые подходят для задачи.
• Вёрстка на Flex layout и/или Grid layout.
• Адаптивность под указанные в макете разрешения и отсутствие поломок в промежуточных значениях.
• Шрифты подключены через @font-face.
• Элементы правильно позиционированы.
• Сделана микроанимация кнопок, ссылок и инпутов.
• Использован normalize.сss или стилизован строго по БЭМ — без внешних файлов.
• Формы и плейсхолдеры стилизованы верно.
• В разных частях проекта есть переиспользуемые блоки.
• Все изображения оптимизированы — в том числе и .svg.
• Полный список требований находится в критериях к диплому. Обратите внимание, что делать файловую структуру по БЭМ не требуется.

Ещё 4 совета
Вёрстку каждого элемента начинайте с его сложного состояния. Например, верстайте шапку для случая, когда число элементов навигации больше указанного в макете. Потом вы лучше упростите сложный элемент, чем наоборот.
Сразу верстайте критические случаи, но не добавляйте их на страницу. Например, сразу сделайте страницу «без результатов поиска» и интегрируйте в проект прелоадер. Вот его готовый код:
https://code.s3.yandex.net/web-developer/archives/Preloader.zip
Измените цвет прелоадера в соответствии с основными цветами вашего проекта.
Пользуйтесь шрифтами формата woff. Это самый распространённый и поддерживаемый формат веб-шрифтов. В проекте используется шрифт ”Inter“ от дизайнеров «Фигмы». Его можно скачать на официальном сайте во вкладке ”Download“.
Пока у вас нет текстов карточек, полученных из API, вставляйте тексты из макета. Это сэкономит вам время.

Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций:
для «Реакт-компонентов» создайте отдельную директорию components/;
для вспомогательных функций, а также для запросов к API — директорию utils/;
для изображений — images/;
для кода или файлов сторонних разработчиков, например шрифтов, — vendor/;

Для каждого компонента создавайте отдельную директорию. В ней будут лежать JS и CSS-файлы компонента. Например, для компонента App будет такая структура:
-- components/

---- App/
------ App.js
------ App.css

Примерный список компонентов, которые вам потребуются:
App — корневой компонент приложения, его создаёт CRA.
Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице:
Promo — компонент с вёрсткой баннера страницы «О проекте».
NavTab — компонент с навигацией по странице «О проекте».
AboutProject — компонент с описанием дипломного проекта.
Techs — компонент с использованными технологиями.
AboutMe — компонент с информацией о студенте.
Portfolio — компонент со ссылками на другие проекты.
Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты:
SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом FilterCheckbox.
Preloader — отвечает за работу прелоадера.
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты:
MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.
MoviesCard — компонент одной карточки фильма.
Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента:
Register — компонент страницы регистрации.
Login — компонент страницы авторизации.
Profile — компонент страницы изменения профиля.
Компоненты, которые понадобятся на каждой из основных страниц:
Header — компонент, который отрисовывает шапку сайта на страницу.
Navigation — компонент, который отвечает за меню навигации на сайте.
Footer — презентационный компонент, который отрисовывает подвал.
Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта.

• Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не защищены. / 2
• При попытке перейти на любой защищённый роут происходит редирект на /. / 3
• Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации. / 2
• После успешного вызова обработчика onSignOut происходит редирект на /. / 2
• Корректно используется хук useHistory. / 1
• При попытке перейти на несуществующую страницу происходит редирект на страницу «404». Кнопка «Назад» работает корректно. / 2
• Корректно используются компоненты , и . / 1

• Хуки не используются внутри условных блоков или циклов. / 1
• Хуки вызываются в основной функции компонента. / 1
• При использовании классовых компонентов эффекты описаны внутри методов жизненного цикла компонента. / 1
• Имена пользовательских хуков начинаются с use. / 2

• Сторонние JavaScript-библиотеки не применяются. / 2
• Используются семантически правильные блоки для компонентов. Не используются
  или иные обертки для компонентов, которые состоят из одноуровневых блоков. / 1
• Отсутствует «мусор» в коде / 2:
• нет беспорядка в коде;
• нет лишнего кода: например, переменная объявлена, но не используется, или есть какая-то избыточная логика;
• код форматирован одинаково, соблюдается иерархия отступов.

• * Общее:

• * Все ссылки и кнопки в проекте работают.

• * Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация»; если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.

• * При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.

• * Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.

• * Страницы «Регистрация» и «Авторизация»:

• * На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.

• * На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.

• * Все формы валидируются и на стороне клиента.

• * Страница редактирование профиля:

• * На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.

• * Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.

• * Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.

• * Поиск фильмов:

• * Прелоадер крутится во время выполнения запроса фильмов.

• * Работа с фильтром настроена:

• * Поиск фильмов регистронезависимый.

• * Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.

• * Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.

• * После успешного сабмита формы поиска появляется блок с результатами.

• * Если ничего не найдено, выводится текст: «Ничего не найдено».

• * На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка "Ещё" скрывается.

• * Карточки:

• * Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.

• * Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.

• * При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.

• * На странице «Сохранённые фильмы»:

• * отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.

• * Блок карточки содержит кнопку удаления, а не лайка.

• * При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.

• * Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например / 8:

• * Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы.

• * Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.

• * При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.

• * Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.

• * Регистрация и авторизация:

• * Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не защищены. / 2

• * При попытке перейти на любой защищённый роут происходит редирект на /. / 3

• * Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации. / 2

• * После успешного вызова обработчика onSignOut происходит редирект на /. / 2

• * Корректно используется хук useHistory. / 1

• * При попытке перейти на несуществующую страницу происходит редирект на страницу «404». Кнопка «Назад» работает корректно. / 2

• * Корректно используются компоненты ,  и . / 1

• * Работа с JWT выполнена корректно:

• * JWT-токен хранится в localStorage или в cookie; / 2

• * Jwt проверяется запросом к серверу, а не только в локальном хранилище. / 2

• * При выходе из аккаунта jwt удаляется. / 3

• * Хуки

• * Хуки не используются внутри условных блоков или циклов. / 1

• * Хуки вызываются в основной функции компонента. / 1

• * При использовании классовых компонентов эффекты описаны внутри методов жизненного цикла компонента. / 1

• * Имена пользовательских хуков начинаются с use. / 2

• * Контекст:

• * В корневом компоненте App создана стейт-переменная, которая хранит данные пользователя. Она используется в качестве значения для провайдера контекста. / 1

• * В компонент App внедрён контекст через CurrentUserContext.Provider. / 1

• * Компоненты, в которых используются данные профиля, подписаны на контекст. / 1

• * Асинхронные запросы к API:

• * Запросы можно осуществлять через Fetch API или XMLHttpRequest, сторонние библиотеки, такие как axios или jQuery), не применяются. / 1

• * Запросы к API вынесены в отдельные файлы: MainApi.js и MoviesApi.js. Цепочка обработки промисов завершается блоком. / 1

• * Первый обработчик then возвращает res.json. res проверяется на корректность. / 1

• * Цепочка обработки промисов завершается блоком catch. / 1

• * Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске; все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке; данные пользователя запрашиваются один раз при запуске приложения. / 2

• * имена переменных, функций и параметров написаны в camelCase;

• * имена переменных — существительные;

• * имена переменных, функций и компонентов соответствуют содержимому;

• * имена коллекций NodeList — существительные во множественном числе;

• * имя функции начинается с глагола и отражает то, что она делает;

• * для именования запрещены: транслит и неуместные сокращения.

• * Начальное состояние стейт-переменных содержит корректный тип данных. / 1

• * Для элементов списка используется уникальный ключ key, а не индекс массива. / 2

• * Запросы к API описаны внутри компонента App или в корневых компонентах страниц. / 2

• * Для внутренних ссылок в приложении используются компоненты из библиотеки react-router. / 2

• * Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента. / 2

• * Обработка ошибок API:

• * пользователь получает сообщение в случае любой ошибки; / 4

• * поля формы заблокированы во время отправки запросов, и у пользователя нет возможности отправить новый запрос до завершения предыдущего.  / 2

• * Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл. / 2

• * Сторонние JavaScript-библиотеки не применяются. / 2

• * Используются семантически правильные блоки для компонентов. Не используются 

   или иные обертки для компонентов, которые состоят из одноуровневых блоков. / 1

• * Отсутствует «мусор» в коде / 2:

• * нет беспорядка в коде;

• * нет лишнего кода: например, переменная объявлена, но не используется, или есть какая-то избыточная логика;

• * код форматирован одинаково, соблюдается иерархия отступов.

• В корневом компоненте App создана стейт-переменная, которая хранит данные пользователя. Она используется в качестве значения для провайдера контекста. / 1
• В компонент App внедрён контекст через CurrentUserContext.Provider. / 1
• Компоненты, в которых используются данные профиля, подписаны на контекст. / 1

• Общее:
• Все ссылки и кнопки в проекте работают.
• Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация»; если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
• При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
• Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
• Страницы «Регистрация» и «Авторизация»:
• На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
• На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
• Все формы валидируются и на стороне клиента.
• Страница редактирование профиля:
• На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.
• Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
• Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
• Поиск фильмов:
• Прелоадер крутится во время выполнения запроса фильмов.
• Работа с фильтром настроена:
• Поиск фильмов регистронезависимый.
• Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.
• Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
• После успешного сабмита формы поиска появляется блок с результатами.
• Если ничего не найдено, выводится текст: «Ничего не найдено».
• На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка "Ещё" скрывается.
• Карточки:
• Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
• Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
• При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
• На странице «Сохранённые фильмы»:
• отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.
• Блок карточки содержит кнопку удаления, а не лайка.
• При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.

Подготовьте необходимые маршруты:
по роуту / отображается страница «О проекте»;
по роуту /movies отображается страница «Фильмы»;
по роуту /saved-movies отображается страница «Сохранённые фильмы»;
по роуту /profile отображается страница с профилем пользователя;
по роутам /signin и /signup отображаются страницы авторизации и регистрации.
Защищать маршруты авторизацией пока не требуется. Достаточно наладить работу всех ссылок:
нажатие на логотип ведёт на страницу «О проекте»;
нажатие на «Фильмы» — на роут /movies;
нажатие на «Сохранённые фильмы» — на роут /saved-movies;
нажатие на «Регистрация», «Авторизация», «Аккаунт» — на соответствующие роуты /signup, /signin и /profile.

add link to .fig file

Загрузите сгенерированный на первом этапе макет на Яндекс Диск или другое хранилище. В README.md добавьте ссылку. По ней код-ревьюер будет проверять вёрстку.