a1rudy/mesto-react

Фронтенд проекта Mesto на React.

Проект: "Место" на React

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

В данном проекте используется API Яндекс.Практикума, посмотреть проект "Место" с регистрацией, авторизацией и backend частью разработанной автором можно тут: cсылка на проект

---

Проект "Mesto" реализован автором в рамках 22 потока курса по Веб-разработке от Яндекс.Практикума.
На сайте можно делиться фотографиями вдохновляющих вас мест России, в деталях рассмотреть фото панорамы города, удивиться необъятной живописной природой страны и, конечно, обязательно лайкать понравившиеся вам места.
P.S. Ну или просто посмеяться мемам или умилиться котикам других студентов сообщества Практикума.

---

Пользовательский интерфейс:

1. Редактирование профиля пользователя: полей "имя" и "о себе", аватар пользователя.
2. Добавление фотографии-карточки на сайт.
3. Удаление добавленной пользователем карточки.
4. Просмотр фотографии карточки в полном размере при клике на нее.
5. Постановка и снятие лайка с карточки.
6. Регистрация и авторизация пользователя.
7. UX функции:
   • адаптация сайта для мобильных устройств;
   • валидация форм с активацией кнопок попапов;
   • отображение на кнопках попапов индикатора загрузки запросов;
   • затемнение и уменьшение прозрачности активных кнопок и элементов;
   • использование всплывающих попапов для отображения статуса регистрации пользователя;
   • закрытие попапа с сохранение данных формы при нажатии кнопки "Enter";
   • закрытие попапа по кнопке "Esc", а также по клике мыши за его пределами;

---

Применение инструментов:

1. Компонетный подход БЭМ, в т.ч. файловая структура по правилам Nested БЭМ.
2. Адаптивная верстка с применением медизапросов.
3. Grid layout вёрстка.
4. Flexbox вёрстка.
5. Псевдоклассы.
6. React:
   • применение JSX разметки;
   • применение хуков в функциональных компонентах;
   • работа с формами;
   • применение контекста;
   • поднятие состояния.
7. Применение HTTP API и Promise;

---

Инструкция по развертыванию проекта через Git BASH (терминал):

1. Скачайте и установите Node.js с официального сайта (по необходимости).
2. Клонируйте репозиторий в корневую папку командой: git clone https://github.com/a1rudy/mesto-react.git
3. Перейдите в установленный репозиторий командой: cd mesto-react
4. Установите node_modules командой: npm install
5. Совершите сборку проекта командой: npm run build
6. Запустите проект командой: npm start