/react-mesto-api-full

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

Primary LanguageJavaScript

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

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

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

Фронтенд

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

Макет сайта

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

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

Для начала

Установка

  • Установите необходимые зависимости из 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. Реализована возможность работы с карточками и профилем пользователя, регистрации, логина и аутентификации пользователя с централизованной обработкой ошибок.

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

Для начала

Установка

  • Установите необходимые зависимости из 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 с возможностью регистрации, авторизации, выхода пользователя, редактирования информации пользователя, лайков карточек пользователей, добавление и удаление новых карточек пользователя.