Live-версию проекта можно посмотреть здесь: https://master--movie-searcher-v1.netlify.app
Локально этот проект запускается стандартным образом через команды Create React App (CRA):
По умолчанию CRA разворачивает проект на 3000 порту. Чтобы изменить порт, следует в папке с проектом создать файл .env с указанием PORT=<НУЖНЫЙ_ПОРТ>. Например, если Вы хотите, чтобы сервер был развернут на 7070 порту, стоит написать PORT=7070.
ВАЖНО: для корректной работы программы следует указать API-ключ от сервиса https://api.kinopoisk.dev/documentation#/Фильмы%2C%20сериалы%2C%20и%20т.д./MovieController_findOneV1_4
Чтобы это сделать, в папке с проектом надо создать файл .env (если он ранее уже не был создан) и написать
REACT_APP_API_KEY=<your api token>
Приложение дает возможность пользователю искать кинокартины согласно выставленным критериям поиска. Картины можно искать как по названию, так и по различным фильтрам:
- По году;
- По странам;
- По возрастному рейтингу;
Пользователь также может получить подробную информацию о картине при клике на ее карточку. Возможные ошибки со стороны API обрабатываются - при неудачном запросе пользователь увидит на сайте соответствующее предупреждение.
В приложении есть страница, на которой можно получить случайный фильм, исходя из выставленных значений фильтров.
- По жанру;
- По типу картины (фильм/сериал/...);
- По сети производства (HBO, Netflix, ...);
- По рейтингу в кинопоиске;
ВАЖНО: для того, чтобы воспользоваться случайным поиском, необходимо предварительно авторизоваться (авторизация состоит из ввода имени пользователя и пароля - кнопка для авторизации находится в правом нижнем углу экрана).
Имя пользователя: elshappo
Пароль: 42
- Все фильтры, которые выставляет пользователь, сохраняются в поисковой строке, поэтому страницами с результатами фильтрации можно легко обмениваться;
- Когда пользователь ищет картины по их названию, перед отправкой запроса к API срабатывает тайм-аут в 1 секунду (debounce);
Данное приложение написано на React 18 на языке TypeScript с использованием стейт-менеджера MobX, фреймворка для стилей TailwindCSS, а также UI-библиотеки Ant Design. Пагинация реализована с помощью React Router V6.