izhubrov/react-mesto-api-full

Репозиторий для API проекта Mesto с системами авторизации и регистрации пользователей.

Проект: Место

Интерактивный сайт с frontend и backend частями, позволяющий регистрировать и авторизовывать пользователей, изменять данные пользователя, добавлять, удалять свои фотографии и ставить лайки понравившимся изображениям.

Фронтенд сайта располагается по адресу: https://izhubrov-mesto.nomoredomains.club Бэкенд сайта располагается по адресу: https://api.izhubrov-mesto.nomoredomains.monster

Фронтенд

Фронтенд часть приложения располагается в директории /frontend репозитория, написана с помощью JavaScript биботеки React с помощью Create React App. Реализована возможность регистрации и авторизации пользователя, в том числе мобильный вид сайта.

Макет сайта

Расположен в онлайн-сервисе для разработки интерфесов - графическом редакторе Figma по адресам:

• https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1
• https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1
• https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1
• https://www.figma.com/file/5H3gsn5lIGPwzBPby9jAOo/Sprint-14-RU?node-id=0%3A1

---

Как использовать

Для начала

• Установите Node.js
• Установите Git Bash для Windows OS
• Склонируйте проект https://github.com/izhubrov/react-mesto-api-full.git

Установка

• Установите необходимые зависимости из package.json

Работа, запуск, деплой проекта из директории проекта

• Для локального запуска отредактируйте файл utils.js в папке utils, закомментируйте первую строку, раскомментируйте вторую строку, чтобы baseUrl стал равным "http://localhost:3001".Далее введите команду npm run start (Страница откроется по адресу http://localhost:3000 для просмотра в браузере).
• Для сборки проекта введите команду npm run build
• Для работы с gh-pages установите пакет gh-pages следующей командой npm install gh-pages --save-dev
• Для деплоя проекта введите команду npm run deploy

---

Требования

Требования к верстке

• Основным требованием при верстке сайта являлось его корректное отображение на различных разрешениях экрана с плавным появлением Popup форм редактирования профиля пользователя, добавления карточек и увеличением картинки. Необходимо было также реализовать верстку страниц логина и регистрации с Popup ошибок и успешной регистрации. Также необходимо было реализовать мобильный вид приложения. При загрузке должен показываться иконка загрузки.

Требования к разработке на языке JavaScript

• Возможность удаления карточек, лайка и увеличения изображения через Popup.
• Проверка на валидность полей ввода Popup с помощью встроенного API JavaScript.
• Возможность закрытия Popup с помощью нажатия клавиши Escape и клика на фон.
• Возможность создания новой карточки, редактирования профиля пользователя, проверка на валидность форм.
• Возможность регистрации, авторизации пользователя с сохранением данных для авторизации.

Требования к сборке проекта

• Проект должен быть создан с помощью Create React App.

---

Применяемые технологии

Применяемые технологии верстки

• Флекс-бокс верстка.
• Грид таблицы.
• Выразительные семантические теги (section, ul, footer).
• Позиционирование элементов (относительное, фиксированное, абсолютное, z-index).
• Относительные пути к файлам.
• Трансформация с плавностью перехода.
• Методология наименования классов CSS БЭМ Nested.
• Относительные размеры блоков.
• Вычисляемые значения (функция calc).
• Оптимизация шрифтов (сглаживание, подгонка размера текста, рендеринг).
• Метатег корректного масштабирования страницы (@media).
• Подключение локального шрифта Inter через директиву @font-face.

Применяемые технологии программирования с импользованием библиотеки React

• Разметка страницы создается в JSX.
• Код разбит на функциональные компоненты.
• Используются хуки React.useState, React.useEffect, React.createContext.

API

C помощью метода fetch и промисов (Promise).

• Осуществляется загрузка карточек с сервера, добавление и удаление карточек.
• Загружается и изменяются профиль и аватар пользователя с сервера.
• Загружаются и изменяются лайки пользователе.
• Осуществляетя регистрация и авторизация пользователя.

---

Итог фронтенд части

Сайт получился отзывчивым (резиновым и адаптивным), корректно отображается на устройствах с разрешением от 320px и есть возможность изменять данные сайта с проверкой на валидность. Проект реализован на React и создан с помощью create-react-app. Проект взаимодействует с сервером. Есть возможность авторизации и регистрации пользователя. Учетные данные пользователя сохраняются, повторный ввод для авторизации исключается.

Бэкенд

Бэкенд проекта представляет собой серверную часть проекта Mesto, написанную с помощью фреймворка Express для приложений Node.js и взаимодействующую с базой данных Mongo. Реализована возможность работы с карточками и профилем пользователя, регистрации, логина и аутентификации пользователя с централизованной обработкой ошибок.

---

Как использовать

Для начала

• Установите Node.js
• Установите Git Bash для Windows OS
• Склонируйте проект https://github.com/izhubrov/react-mesto-api-full.git

Установка

• Установите необходимые зависимости из package.json (dependencies и devdependencies)
• Установите Mongo database

Работа и запуск проекта из директории проекта

• Для локального запуска введите команду npm run start (Развернется сервер по адресу http://localhost:3001).
• Для запуска в режиме разработчика с горячим перезапуском введите команду npm run dev.
• Тестирование запросов к базе данных можно осуществлять с помощью Postman (нужно выбрать тип запроса из нижеуказанного списка и указать адрес сервера http://localhost:3001 , эндпоинты выбрать из нижеуказанного списка для соответствующего запроса).

---

Требования к разработке серверной части

• Создание сервера с помощью фреймворка Express по адресу http://localhost:3001

• Создание NoSql базы данных карточек и пользователей по адресу mongodb://localhost:27017/mestodb

• Обработка CORS

• Логирование запросов и ошибок

• Возможность обработки следующих запросов:

  POST /signup - регистрация пользователя

  POST /signin - вход пользователя

  DELETE /logout - выход пользователя

  ---

  GET /users — возвращает всех пользователей

  GET /users/:userId - возвращает пользователя по _id

  GET /users/me - возвращает текущего пользователя

  POST /users — создаёт пользователя

  PATCH /users/me — обновляет профиль

  PATCH /users/me/avatar — обновляет аватар

  ---

  GET /cards — возвращает все карточки

  POST /cards — создаёт карточку

  DELETE /cards/:cardId — удаляет карточку по идентификатору

  PUT /cards/:cardId/likes — поставить лайк карточке

  DELETE /cards/:cardId/likes — убрать лайк с карточки

• Обрабатывать ошибки в запросах

• Возвращать данные пользователю на front-end

• Хешировать пароль пользователя

• Сохранять токен пользователя в куки.

---

Применяемые технологии программирования

• Модули express, mongoose, route
• Middlewares
• Схемы и модели mongoose
• Роуты и Контроллеры
• Joi валидация
• bcryptjs шифрование пароля хеш функцией с солью

Итог бекенд части

Реализована серверная часть приложения Mesto в возможностью обработки вышеуказанных Get,post, delete, put, patch запросов к базе данных Mongo. Реализована обработка ошибок в запросах. Реализовано шифрование пароля. Реализовано сохранение токена пользователя в куки браузера.

Общий итог проекта

Реализована клиентская и серверная часть сайта Mesto с возможностью регистрации, авторизации, выхода пользователя, редактирования информации пользователя, лайков карточек пользователей, добавление и удаление новых карточек пользователя.