mvxim / movies-explorer-frontend

movies-explorer-frontend

Фронтенд дипломного проекта «Movies explorer» Яндекс Практикума. Одностраничное приложение, взаимодействующее с написанным на предыдущем этапе бэкендом и открытым АПИ фестиваля «Beat Film», любезно предоставленным Практикумом.

✏️ Описание

Приложение, в котором можно найти фильмы по запросу и сохранить в личном кабинете. Пользователь вводит в строку поиска ключевые слова и нажимает кнопку «Искать». После этого приложение выполняет следующие действия:

• отправляет запрос к сервису «Beat Film API» с данными о фильмах, получает данные и сохраняет;
• согласно выбранному жанру ищет все подходящие фильмы и отображает карточки с ними;
• когда пользователь сохраняет фильм, он попадает в раздел «Сохраненные фильмы» на отдельной странице;
• среди сохраненных фильмов можно искать нужные по ключевому слову, жанру, и удалять ненужные;

🧠 Структура и функционал

Сайт состоит из нескольких страниц:

• / — главная страница. Содержит информацию о выполненном проекте.
• /movies — страница с фильмами. На ней есть форма поиска фильмов и блок с результатами поиска.
• /saved-movies — страница с сохранёнными фильмами. Показывает фильмы, сохранённые пользователем.
• /signup — страница регистрации. Позволяет пользователю зарегистрировать аккаунт.
• /signin — страница авторизации. На ней пользователь может войти в систему.
• /profile — страница редактирования профиля. Пользователь может изменить данные своего аккаунта.

🔥 Установка и запуск

🛠️ Чтобы запустить проект в режиме разработки, нужно:

1. Перейти в директорию, в которой нужно разместить проект:

• mkdir %название папки% && cd %название папки%

2. Склонировать репозиторий в текущую папку:

• git clone [e-mail]:mvxim/movies-explorer-frontend.git ./

3. Установить зависимости:

• npm install

4. Запустить проект в режиме разработки:

• npm run start

💅 Чтобы получить готовую сборку:

• npm run build

⚙️ Стек

• HTML5, CSS3;
• JavaScript ES6+;
• React v.18.1;
• Create React App v.5.0.0
• React-router v.6.3;
• Classnames v.2.3.1;
• Normalize.css v.8.0.1;

🔗 Ссылки

• Деплой фронтенд-приложения на Яндекс.Облаке: https://mvxim.nomoredomains.work/
• Деплой бэкенда там же: https://api.mvxim.nomoredomains.work/
• Репозиторий с бэкендом с предыдущего этапа дипломной работы: https://github.com/mvxim/movies-explorer-api
• Открытый АПИ фестиваля «Beat Film»: https://api.nomoreparties.co/beatfilm-movies
• Макет фронтенда: https://www.figma.com/file/IVFVVpl3Pyaenhi9OQPVWK/Donika's-diploma ; изначально по ссылке откроется конструктор дипломных работ, страница SOURCE. Чтобы посмотреть макет, нужно в Фигме выбрать страницу RESULT.