Movies explorer frontend - это интерактивный веб-сайт🖥️, разработанный с использованием технологий ⚛️React и JavaScript. Это веб-сайт портфолио предназначен для поиска и сохранения интересных фильмов.
- Регистрация и авторизация пользователей🆔: Пользователи могут создать свой аккаунт, зарегистрировавшись с помощью электронной почты и пароля, либо войти в систему, используя свои учетные данные. Это обеспечивает безопасный доступ к персональному кабинету.
- Аккаунт пользователя👤: Пользователи могут легко редактировать свои личные данные, такие как имя и почта, для настройки своего профиля по своему усмотрению.
- Добавление и удаление🗑️ фильмов🎥 из закладок: Пользователи могут добавлять фильмы в сохраненные и удалять их оттуда. Это позволяет пользователям отслеживать и сохранять интересные для них фильмы.
- Поиск фильмов🕵️: Пользователи могут искать короткометражные фильмы, а также по названию в общем каталоге фильмов и в сохраненных.
- Отображение информации📢: Пользователи могут просматривать трейлер фильма, перейдя на страницу с подробной информацией о фильме, после клика на карточку фильма.
- Валидация полей перед отправкой на сервер✅: Проект обеспечивает валидацию данных, введенных пользователем, перед их отправкой на сервер, что обеспечивает корректное сохранение данных.
- Прелоудеры🔄: Проект использует анимированные прелоудеры для отображения процесса загрузки данных с сервера. Это создает более приятное визуальное восприятие пользователей во время запросов к серверу.
- 🔥Этот функционал делает проект Movies explorer интерактивным и удобным для пользователей, позволяя им регистрироваться, редактировать профили, взаимодействовать с фильмами, выполнять поиск и просматривать информацию о фильмах.
👍Проект также включает в себя дополнительный функционал:
- Запоминание состояния полей ввода💾🔢: При использовании формы поиска фильмов, введенные запросы, фильтры и результаты поиска сохраняются. Даже после обновления страницы данные не будут утеряны.
- Запоминание состояния входа пользователя💾👤: Пользователи могут наслаждаться автоматическим входом после обновления страницы, таким образом, сохраняя свой активный сеанс без необходимости повторно вводить учетные данные.
- Бургерное меню для мобильной и планшетной версии🍔: Для обеспечения удобной навигации на мобильных и планшетных устройствах, проект включает бургерное меню, которое обеспечивает доступ к важным разделам приложения.
- Адаптивное отображение карточек фильмов🖼️: Количество отображаемых карточек фильмов динамически рассчитывается в зависимости от разрешения экрана пользователя, обеспечивая оптимальное отображение.
- Кнопка "Ещё" для динамической загрузки фильмов🖲️: Пользователи могут загружать дополнительное количество фильмов с помощью кнопки "Ещё", и количество загружаемых фильмов рассчитывается автоматически в зависимости от разрешения экрана пользователя.
- Собственное API: Для регистрации и аутентификации пользователей, а также хранения сохраненных фильмов, мы используем собственное API, которое обеспечивает безопасное взаимодействие с данными.
- Публичное API BeatFilm: Для получения списка фильмов, мы обращаемся к публичному API BeatFilm по следующему адресу: beatfilm-movies. Это позволяет нам предоставлять актуальную информацию о фильмах на нашем сайте.
- Клонируйте репозиторий:
git clone git@github.com:AsaevArtemV/movies-explorer-frontend.git
- Перейдите в директорию с проектом:
cd movies-explorer-frontend
- Установите зависимости:
npm install
- Запустите сервер:
npm run start
-
Для корректной работы в локальном репозитории в первую очередь☝️ следует также клонировать backend repository, установить зависимости и запустить его командой npm run dev.
-
Это запустит проект на локальном сервере, и вы сможете просматривать его в браузере по адресу: 🔗localhost:3000.