Movies Explorer

SPA сервис на React для поиска фильмов. Фронтенд часть.

Основная функциональность

• Поиск с фильтрацией;
• Авторизация и регистрация пользователей;
• Изменение пользовательских данных;
• Добавление фильмов в личный кабинет;
• Валидация всех форм с помощью кастомного хука;
• Адаптивная вёрстка;

В проекте применен БЭМ подход. Он позволяет снизить сложность и улучшить читабельность кода, а также сделать его более структурированным.

API и общение с сервером. Был разработан API для получения информации о карточках и пользователе с сервера. Для общения с сервером используется технология FETCH. Карточки и пользователь сохраняются на сервере с использованием методов HTTP: GET, POST, PUT, DELETE.

Проект собран с помощью webpack. Он позволяет минифицировать код и добавить вендорные префиксы.

Инструкция по развёртыванию

1. Откройте терминал и клонируйте фронтенд и бэкенд на компьютер

   git clone https://github.com/Sengeer/movies-explorer-frontend.git

   git clone https://github.com/Sengeer/movies-explorer-api.git

2. Установите зависимости в обоих проектах командой npm i
3. Запустите поочерёдно, сначала бэкенд, потом фронтенд командой npm run start
4. Нажмите Y чтобы согласится запустить фронтенд на порту 3001
5. Приложение будет доступно из браузера по адресу http://localhost:3001, API — по адресу http://localhost:3000

Технологический стек

Front-end: HTML, CSS, JavaScript, React.js

Back-end: Node.js, Express, Webpack

Автор

• @Sengeer