movies-explorer-frontend

URL: https://diplom.maxrmnk.nomoredomainsrocks.ru

Макет: https://www.figma.com/file/5RLXSagr9Xm3GtsuEyAgMc/Diploma-(Copy)?type=design&mode=design&t=udfQnFP0Quy98pE3-0

Макет Zip: https://disk.yandex.ru/d/V1MMB0HamYTJuA

GitHub: https://github.com/MaxRMNK/movies-explorer-frontend

Описание

Фронтенд приложения написанного в качестве Дипломного проекта на курсе ЯндексПрактикум «Веб-разработчик».

Эта фронтенд-часть приложения работает в связке с бэкенд-частью:
Backend GitHub: https://github.com/MaxRMNK/movies-explorer-api

Технологии

• JavaScript ES6
• React v.18.2.0
• React Router DOM v.6.14.2
• Node.js v.20.11.1
• NPM v.10.2.4

Особенности

• Работа с API backend-части приложения
• Регистрация, авторизация и изменение данных профиля пользователя с использованием собственного хука валидации.
• Фильтрация и поиск фильмов на основе собственных функций, с валидацией запросов и обработкой ошибок.
• Маршрутизация на основе React Router.
• Управление состоянием с помощью React Context.
• Организация временного хранения в localStorage данных (токен, поисковый запрос, результаты последнего поиска и запроса к базе данных фильмов).

Разворачиваем проект локально

1. Склонируйте проект, перейдите в папку /movies-explorer-frontend

   git clone [email protected]:MaxRMNK/movies-explorer-frontend.git
   cd movies-explorer-frontend

2. Убедитесь, что у вас устновлен Node.js с библиотекой пакетов NPM

   node -v # проверка версии Node.js
   npm -v # проверка версии NPM

3. Установите проект и его зависимости

   npm install

Команды

• Режим разработки. При вводе команды автоматически открывается браузер со страницей приложения на адресе localhost:3000. После любого сохранения исходного кода в приложении страница в браузере будет автоматически обновляться.

  npm run start # или `npm start`

  Ctrl + C - выход из режима разработки.

• Сборка и запуск готового проекта. После выполнения команды в директории /build генерируется оптимизированная сборка проекта:

  npm run build

  Следующая команда запускает собранный проект:

  serve -s build

  В консоли отобразится сообщение, что проект выполняется на локальном сервере — по умолчанию адресом будет localhost:3000. Введите этот адрес в браузере и увидите свой проект!

  Ctrl + C - остановка сервера.