Mesto фронтенд и бэкенд

Учебная проектная работа 15 от Яндекс.Практикум

Описание проекта:

Mesto React - это социальная сеть, где пользователь может зарегистрироваться/войти в свою учётную запись, добавлять/лайкать/удалять карточки с изображением и подписью, изменять информацию о себе в личном профиле.
Mesto Express - это серверная часть социальной сети Mesto, написанная на Node.js и Express.

Ссылки на проект:

Адрес репозитория: https://github.com/Anterul/react-mesto-api-full-gha
IP 51.250.65.121
Frontend https://fmesto.nomoredomains.monster
Backend https://api.bmesto.nomoredomains.monster

Макеты в Figma:

• Макет 1
• Макет 2
• Макет 3
• Макет 4
• Макет 5

---

Функциональность приложения:

• Mesto-React адаптируется под разные разрешения экрана.
• Имеет всплывающие окна:
  • для редактирования информации личного профиля
  • для добавления новой карточки
  • для добавления нового аватара
  • для просмотра картинки в полном рамере
• Загрузка карточек с изображениями происходит с бэкенда.
• Удаление, добавление и лайк карточек
• Изменение своего аватара
• Изменение иформации в личном профиле
• Создание своей учётной записи, авторизация в приложении
• Получение массива с соданными на сервере пользователями и карточками

---

Используемые технологии:

• HTML5
• CSS3:
  • Flexbox
  • Grid Layout
  • Adaptive UI
  • Методология web-разработки BEM, фйловая структура BEM-Nested
• JavaScript:
  • ООП
  • Асинхронность
  • Promise
  • API
• React JS:
  • Create React App
  • JSX
  • Функциональные компоненты
  • Хуки
  • React Router DOM
  • JWT
  • Поднятие стейта
  • Глобальный стейт
  • Подписка на контекст
  • ProtectedRoute
• Node.js:
  • celebrate
  • jsonwebtoken
  • bcryptjs
• Express:
  • ProtectedRoutes
• MongoDB:
  • Mongoose

---

Установка:

Необходимые приложения:   Git   Node.js   MongoDB

Клонируйте репозиторий :

git clone https://github.com/Anterul/react-mesto-api-full-gha

Перейдите в директорию, в которую был клонирован проект.

Установка фронтенд части:

Перейдите в директорию /frontend. Вводите команды. Процесс установки может занять несколько минут.
Установите зависимости:

npm install

Запуск. После завершения установки введите команду:

npm start

После этого проект автоматически откроется в браузере. Если этого не произошло, откройте проект самостоятельно, введя адрес:

http://localhost:3000/  

Установка бэкенд части:

Перейдите в директорию /backend. Вводите команды. Процесс установки может занять несколько минут.
Установите зависимости:

npm install

Запуск. После завершения установки введите команды:

npm run start — запускает сервер 

npm run dev — запускает сервер с hot-reload 

Откройте проект в браузере, введя адрес:

http://localhost:3000/  

Директори в бэкенд части:
/routes — папка с файлами роутера
/controllers — папка с файлами контроллеров пользователя и карточки
/models — папка с файлами описания схем пользователя и карточки

---