/react-mesto-api-full

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

Primary LanguageJavaScript

Проект: Место на React с регистрацией, авторизацией и серверной частью на Яндекс.Облаке.

Данный сайт является проектной работой Яндекс Практикум.

Репозиторий приложения проекта Mesto, включающий фронтенд и бэкенд части приложения со следующими возможностями: авторизации и регистрации пользователей, операции с карточками и пользователями. Бэкенд расположен в директории backend/, а фронтенд - во frontend/.

На этом сайте вы можете выкладывать фотографии мест, где вы побывали или хотели бы побывать, с помощью удобной формы добавления. Можно зарегистрироваться и авторизоваться, редактировать свой профиль и ставить лайки на понравившиеся фотографии.

Ссылка на проект: https://balaimesto.students.nomoredomains.sbs
Ссылка на backend проекта: https://api.balaishka.students.nomoredomains.sbs
Публичный IP-адрес сервера: http://158.160.10.100

Стек технологий

  • React
  • JavaScript
  • Node.js
  • Express
  • MongoDB
  • HTML
  • CSS
  • Figma

Использованные техники работы

  • Файлы структурированы по БЭМ-методологии
  • Flexbox вёрстка
  • Grid layout вёрстка
  • Адаптивная верстка с применением медизапросов
  • React:
  • JSX разметка;
  • работа с формами;
  • применение контекста;
  • применение хуков;
  • использование React Router;
  • защита маршрутов;
  • работа с Local storage.

Возможности сайта:

  1. Регистрация нового пользователя.
  2. Авторизация зарегистрированного пользователя.
  3. Профиль включает разделы: "аватар", "имя", "о себе". Все разделы профиля можно редактировать.
  4. Добавление карточки-фотографии на сайт с названием.
  5. Удаление своей карточки.
  6. Просмотр карточек в полном размере.
  7. Постановка и снятие лайка с карточки.

Если ссылка на проект не работает, значит закончился пробный грант на Яндекс.Облако. Вы можете развернуть проект локально (через git bash):

  1. Если не установлен Node.js, то скачайте и установите Node.js с официального сайта.
  2. Клонируйте репозиторий в корневую папку: git clone https://github.com/Balaishka/react-mesto-api-full.git
  3. Установите node_modules по очереди в папках backend и frontend командой: npm install
  4. Зайдите в файл /backend/app.js и замените "PORT = 3000" на "PORT = 3005".
  5. Зайдите в файлы /frontend/src/utils/Api.js и /frontend/src/utils/Auth.js и замените строки: baseUrl: "https://api.balaishka.students.nomoredomains.sbs", на baseUrl: "http://localhost:3005",.
  6. Сохраните изменения.
  7. Запуститите проект в папке backend командой: npm run dev
  8. Запуститите проект в папке frontend командой: npm run start