Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrouss/mesto-react
Учебный frontend-проект "Место", портированный на "React"
https://github.com/elrouss/mesto-react
api bem-methodology css3 elrouss frontend html5 js-es6 react yandex-praktikum
Last synced: 8 days ago
JSON representation
Учебный frontend-проект "Место", портированный на "React"
- Host: GitHub
- URL: https://github.com/elrouss/mesto-react
- Owner: elrouss
- Created: 2022-12-20T16:59:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T22:30:39.000Z (almost 2 years ago)
- Last Synced: 2024-12-10T20:38:12.101Z (12 days ago)
- Topics: api, bem-methodology, css3, elrouss, frontend, html5, js-es6, react, yandex-praktikum
- Language: JavaScript
- Homepage:
- Size: 1.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Учебный frontend-проект: "Место"
Оглавление
- Описание проекта
- Стек технологий
- Установка и запуск приложения в локальном репозитории
- Процесс создания
- Функционал
- Планы по улучшению
1. Описание проекта
Данная проектная работа выполнена в рамках образовательной программы Яндекс Практикума. Проект представляет собой портирование на "React" адаптивного приложения с профилем пользователя и фотокарточками, изначально написанного на нативных технологиях: HTML5, CSS3 и JavaScript. Он похож по своему типу и функционалу на популярные соцсети: Instagram, Facebook, VKontakte, - расширенному в следующей учебной работе добавлением формы регистрации и авторизации пользователей
Ссылка на макеты:
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/PSdQFRHoxXJFs2FH8IXViF/JavaScript-9-sprint?node-id=0%3A1
Ссылка на проект: https://elrouss.github.io/mesto-react/
* - проект прошел обязательное код-ревью
3. Установка и запуск приложения в локальном репозитории
1. `git clone https://github.com/elrouss/mesto-react.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. `npm i` - установить зависимости
3. `npm run start` - запустить приложение в режиме разработчика (в браузере ввести ссылку `http://localhost:3000/`, если приложение не открылось там автоматически)
4. Процесс создания
Работа разделена на 2 этапа:
1. Портирование HTML-разметки, CSS-стилей, реализация открытия и закрытия 5 модальных окон (EditProfilePopup, EditAvatarPopup, AddPlacePopup, ConfirmCardDeletionPopup, ImagePopup), загрузка данных с сервера
2. Написание функционала с передачей данных на сервер (см.: п. 5)
4.1 Основные задачи, проблемы и их решение
1. Удаление карточки в окне подтверждения
Решение: при реализации окна подтверждения удаления карточки сделовало учесть прокидывание _id конкретно открытой карточки, в противном случае либо не работала функция удаления, либо предпринималась попытка удаления всех карточек в галерее (неудачная в связи с контролем сервера). Для этого был создан стейт activeCardId, в который записывается _id открываемой карточки и соответственно используется в функции ее удаления
2. Пустые элементы верстки и "дерганье" в процессе отрисовки после получения данных с сервера
Решение: для скрытия страницы до ответа с сервера и вставки их в верстку добавлено окно-заглушка
3. Валидация форм и усиленный контроль за типом данных, вводимых пользователем
Решение: для валидации форм написана логика, которая проверяет в компонентах сохраняемые в стейтах данные, вводимые пользователем в инпутах (url, длина слова). Далее в зависимости от установленных правил отдельная функция проверяет, можно ли считать форму валидной или нет, и пробрасывает булево значение через пропс в родительский компонент PopupWithForm. Там в свою очередь стилизуется и блокируется/активируется кнопка того или иного дочернего компонента формы. Кроме того, во избежание передачи url-ов, которые могли бы случайно начинаться с пустого пробела (следовательно, вызывать ошибку при сабмите), и двойных пробелов при отправке данных на сервер методом trim обрезаются лишние пробелы по краям строки, а регулярным выражением убираются все неодинарные пробелы
4. Проблема добавления пользователем нескольких однотипных карточек при клике на кнопку сабмита в процесса обмена данными с сервером
Решение: блокировать кнопку
Адаптивный интерфейс
Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")
Модальное окно с увеличенной фотографией карточки
Редактирование данных пользователя
Обновление аватара
Добавление новой карточки
Добавление и снятие лайка (включая счетчик лайков)
Удаление карточки с модальным окном подтверждения действия
Спиннеры загрузки
Валидация форм
Окно предварительной загрузки страницы
* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе
6. Планы по улучшению
- ~~Исправление ошибки при закрытии модального окна с фотографией карточки (реализовано в следующем проекте)~~
- ~~Оптимизирование валидации форм под кастомный хук (также реализовано в следующем проекте)~~
- Оптимизация лишних ререндеров
- Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
- Добавление автоматического обновления галереи карточек
- Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
