Учебный frontend-проект: "Место"

Оглавление

1. Описание проекта
2. Стек технологий
3. Установка и запуск приложения в локальном репозитории, эксплуатация
4. Процесс создания
• Основные задачи, проблемы и их решение
5. Функционал
6. Планы по улучшению

1. Описание проекта

Данная проектная работа выполнена в рамках образовательной программы Яндекс Практикума. Проект представляет собой продолжение портирования на "React" адаптивного приложения (SPA) с профилем пользователя и фотокарточками, изначально написанного на нативных технологиях: HTML5, CSS3 и JavaScript. В сравнении с предыдущей работой в данном проекте добавлен функционал регистрации и авторизации пользователей на сайте в своем личном кабинете, а также исправлены некоторые ошибки, пропущенные ревьюером

Ссылка на макеты:
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://www.figma.com/file/5H3gsn5lIGPwzBPby9jAOo/Sprint-14-RU?node-id=0%3A1

Ссылка на проект: https://elrouss.github.io/react-mesto-auth/

* - проект прошел код-ревью

(к оглавлению)

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

(к оглавлению)

3. Установка и запуск приложения в локальном репозитории, эксплуатация (пп. 4-5 актуальны также при работе на Github Pages)

1. git clone https://github.com/elrouss/react-mesto-auth.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. npm i - установить зависимости
3. npm run start - запустить приложение в режиме разработчика (в браузере ввести ссылку http://localhost:3000/react-mesto-auth/sign-in, если приложение не открылось там автоматически)
4. При использовании приложения для входа в личный кабинет пользователю требуется зарегистрироваться (https://elrouss.github.io/react-mesto-auth/sign-up) и пройти авторизацию (https://elrouss.github.io/react-mesto-auth/sign-in). Можно воспользоваться уже зарегистрированным аккаунтом: email - test-acc@test.ru, пароль - test-acc@test.ru
5. При авторизации в локальном хранилище сохраняется токен пользователя, который при закрытии вкладки с приложением и возвращении позволяет оставаться авторизованным на сайте. Он удаляется после нажатия на кнопку выхода из личного кабинета

NB! В связи с особенностями совместимости Github Pages с модулем маршрутизации (React Router DOM) в удаленном репозитории не рекомендуется обновление страниц приложения, имеющих добавочные эндпоинты к корневой ссылке /react-mesto-auth

NB!! На данном этапе не настроена отрисовка ошибок при попытке регистрации пользователя с ранее зарегистрированным электронным адресом, неправильном вводе электронного адреса и/или пароля и т.п. Эти ошибки можно проверить самостоятельно в консоли разработчика во вкладке «Network» (ответ с сервера будет выделен красным цветом)

(к оглавлению)

4. Процесс создания

Работа выполнена в 1 этап:
Верстка дополнительных компонентов (стартовых окон с формами регистрации и авторизации пользователей) и элементов (гамбургер-меню, кнопка выхода из личного кабинета), написание функционала

(к оглавлению)

4.1 Основные задачи, проблемы и их решение

1. Вынос общих компонентов для нескольких страниц и перерисовка элементов

Решение: выделено 2 компонента - Header и WelcomeWindowWithForm. В первом из них для перерисовки элемента (ссылки на страницу авторизации/регистрации, кнопки выхода из личного кабинета, гамбургер-меню) написаны функции, которые отслеживают endpoint открытого у пользователя url, а также разрешение экрана. Второй компонент сделан по типу PopupWithForm, в который в свою очередь вставляются Register и Login

2. Проблема отрисовки стартового окна с формой авторизации на несколько миллисекунд при обновлении страницы в личном кабинете

Решение: в компоненте App создан стейт-заглушка, ставящийся на этапе загрузки приложения, когда происходит проверка наличия токена и переадресация пользователю по нужному роуту

3. Переписать код валидации форм под кастомный хук

Решение: в старом проекте в компонентах 3 модальных окон (EditAvatarPopup, EditProfilePopup, AddPlacePopup) была реализована собственноручно написанная валидация, которая получилась несколько громоздкой. С появлением 2 новых компонентов (Register и Login) составлен хук, примененный ко всем названным компонентам, который в итоге сделал код более читаемым, сократил его в 1,5 раза и сделал функцию валидации универсальной. Кроме того, в верстке и стилях переписан код отрисовки ошибок валидации (ранее - применялось абсолютное позиционирование, что некорректно отображало ошибки на мобильных разрешениях (с попаданием в фокус инпутов) и требовало высчитывание точек местоположения (top, left) для промежуточных разрешений

4. В прошлой версии проекта при закрытии модального окна с фотографией карточки резко исчезал снимок и появлялся undefined

Решение: открытие и закрытие модального окна происходило только при наличии данных в передаваемом объекте (стейт selectedCard), появлявшихся и исчезавших во время клика по изображению карточки. Соответственно, закрытие окна начиналось только при очистке данных в объекте карточки (Object.keys(card).length !== 0, отсюда - undefined). В качестве решения этой проблемы был введен новый стейт isImagePopupOpened с булевым значением, который меняется при клике на карточку, что приводит к открытию и закрытию модального окна (объект карточки продолжает храниться в стейте selectedCard). Для очистки данных в модальном окне при закрытии во избежание "моргания" изображения при открытии модального окна другой карточки добавлен хук useEffect с методом setTimeout, который возвращает стейт selectedCard в исходное состояние сразу же после завершения анимации плавного закрытия модального окна

(к оглавлению)

5. Функционал

Адаптивный интерфейс (в т. ч. новых компонентов и элементов)

Регистрация и авторизация пользователей

Редактирование данных пользователя

Обновление аватара

Добавление новой карточки

Добавление и снятие лайка (включая счетчик лайков)

Удаление карточки с модальным окном подтверждения действия

Модальное окно успешной/неудачной регистрации на сайте

Модальное окно с увеличенной фотографией карточки

Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")

Спиннеры загрузки

Валидация форм

Окно предварительной загрузки страницы

Страница 404 (не будет видна на Github Pages)

* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе

(к оглавлению)

6. Планы по улучшению

• Оптимизация лишних ререндеров
• Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок ("Пользователь с таким электронным адресом уже зарегистрирован", "Неправильный электронный адрес/пароль" и проч.)
• Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone
• Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
• Добавление автоматического обновления галереи карточек
• Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)

(к оглавлению)