Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrouss/react-mesto-auth
Учебный frontend-проект "Место", портированный на "React", c добавлением функции регистрации и авторизации пользователей
https://github.com/elrouss/react-mesto-auth
api api-rest bem-methodology css3 elrouss frontend html5 js-es6 react react-router-v6 yandex-praktikum
Last synced: 8 days ago
JSON representation
Учебный frontend-проект "Место", портированный на "React", c добавлением функции регистрации и авторизации пользователей
- Host: GitHub
- URL: https://github.com/elrouss/react-mesto-auth
- Owner: elrouss
- Created: 2023-01-23T00:13:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T22:27:38.000Z (almost 2 years ago)
- Last Synced: 2024-12-10T20:39:30.007Z (12 days ago)
- Topics: api, api-rest, bem-methodology, css3, elrouss, frontend, html5, js-es6, react, react-router-v6, yandex-praktikum
- Language: JavaScript
- Homepage:
- Size: 2.6 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Учебный frontend-проект: "Место"
Оглавление
- Описание проекта
- Стек технологий
- Установка и запуск приложения в локальном репозитории, эксплуатация
- Процесс создания
- Функционал
- Планы по улучшению
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/
* - проект прошел код-ревью
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 - `[email protected]`, пароль - `[email protected]`
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 в исходное состояние сразу же после завершения анимации плавного закрытия модального окна
Адаптивный интерфейс (в т. ч. новых компонентов и элементов)
Регистрация и авторизация пользователей
Редактирование данных пользователя
Обновление аватара
Добавление новой карточки
Добавление и снятие лайка (включая счетчик лайков)
Удаление карточки с модальным окном подтверждения действия
Модальное окно успешной/неудачной регистрации на сайте
Модальное окно с увеличенной фотографией карточки
Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")
Спиннеры загрузки
Валидация форм
Окно предварительной загрузки страницы
Страница 404 (не будет видна на Github Pages)
* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе
6. Планы по улучшению
- Оптимизация лишних ререндеров
- Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок ("Пользователь с таким электронным адресом уже зарегистрирован", "Неправильный электронный адрес/пароль" и проч.)
- Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone
- Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
- Добавление автоматического обновления галереи карточек
- Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
