react-movies-project DEMO

Небольшой сервис с поиском и фильтрацие по фильмам. Адаптирован под разные устройства.

API

1. Подготовка проекта, создание шапки и подвала

используемые библиотеки https://materializecss.com/cards.html#

2. Знакомство с API базой фильмов

будем использовать omdbapi. http://www.omdbapi.com

3. Создание общего списка фильмов

4. Добавление строки поиска

5. Реализация поиска фильмов

6. Добавление фильтрации п категориям

7. Обработка неудачного поиска

8. Безопасное хранение ключа API (локальное)

1. создаем файл .env.local для хранения ключа
2. записываем значение ключа REACT_APP_API_KEY=3c1facc8
3. передаем значение в сслку

9. Сборка приложения и выгрузка на продакшн

В рамках текущего проекта будем использовать githab pages.

1. на удаленном репозитории необходимо настроить секретные переменные.
2. settings=>secrets=>new repository secret.
3. нужно прописать то же имя и значение что в файле: .env.local имя: REACT_APP_API_KEY значение: 3c1facc8
4. дальше устанавливаем пакет githab pages. (npm install gh-pages --save-dev)
5. ключ --save-dev это зависимость для разработки, этим мы указываем что не нужно включать в итоговую сборку
6. после установки проверяем наличие файла ("devDependencies": {"gh-pages": "^4.0.0"}) в package.json
7. для удобства, в файле package.json в ключе "script" создаем команду ("predeploy": "npm run build") эта команда будет запускать билд
8. затем, тамже, в файле package.json в ключе "script" добавляем команду ("deploy": "gh-pages -d build")
9. затем в базовом ключе файла package.json создаем ("homepage": "https://maximmorenko.github.io/movies-project")
10. сохраняем изменения git add -A
11. запускаем диплой npm run deploy
12. проверяем на гитхабе наличие второй ветки gh-pages. В ней будет то что и в папке build
13. из-за того что страница gh-pages и API используют разные протоколы https и http поэтому картинки не грузятся.
14. исправляем протокол API на https
15. таже дабавим исключения catch и диплойдим заново.