{"id":15844557,"url":"https://github.com/elrouss/react-mesto-auth","last_synced_at":"2026-05-05T12:32:56.327Z","repository":{"id":71291688,"uuid":"592116951","full_name":"elrouss/react-mesto-auth","owner":"elrouss","description":"Учебный frontend-проект \"Место\", портированный на \"React\", c добавлением функции регистрации и авторизации пользователей","archived":false,"fork":false,"pushed_at":"2023-02-14T22:27:38.000Z","size":2730,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T11:32:32.752Z","etag":null,"topics":["api","api-rest","bem-methodology","css3","elrouss","frontend","html5","js-es6","react","react-router-v6","yandex-praktikum"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elrouss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-23T00:13:43.000Z","updated_at":"2023-11-16T18:40:56.000Z","dependencies_parsed_at":"2023-03-13T20:21:09.027Z","dependency_job_id":null,"html_url":"https://github.com/elrouss/react-mesto-auth","commit_stats":{"total_commits":60,"total_committers":1,"mean_commits":60.0,"dds":0.0,"last_synced_commit":"be3e34e6f52e6d80c20b654e96639a9638458273"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elrouss/react-mesto-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Freact-mesto-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Freact-mesto-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Freact-mesto-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Freact-mesto-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrouss","download_url":"https://codeload.github.com/elrouss/react-mesto-auth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Freact-mesto-auth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32649558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-rest","bem-methodology","css3","elrouss","frontend","html5","js-es6","react","react-router-v6","yandex-praktikum"],"created_at":"2024-10-05T17:23:14.704Z","updated_at":"2026-05-05T12:32:56.310Z","avatar_url":"https://github.com/elrouss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eУчебный frontend-проект: \"Место\"\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/108838349/215305563-5d7a1891-fdbd-4142-b011-6ece3ec74cee.gif\" width=\"550\" alt=\"Гиф с демонстрацией функционала приложения\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ca name=\"summary\"\u003e\n  \u003cdetails\u003e\n    \u003csummary\u003eОглавление\u003c/summary\u003e\n    \u003col\u003e\n      \u003cli\u003e\u003ca href=\"#project-description\"\u003eОписание проекта\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#technologies\"\u003eСтек технологий\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#installation\"\u003eУстановка и запуск приложения в локальном репозитории, эксплуатация\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#establishing\"\u003eПроцесс создания\u003c/a\u003e\u003c/li\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#tasks-and-problems\"\u003eОсновные задачи, проблемы и их решение\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cli\u003e\u003ca href=\"#functionality\"\u003eФункционал\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#enhancement\"\u003eПланы по улучшению\u003c/a\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/details\u003e\n\u003c/a\u003e\n\n\u003ca name=\"project-description\"\u003e\u003ch2\u003e1. Описание проекта\u003c/h2\u003e\u003c/a\u003e\nДанная проектная работа выполнена в рамках образовательной программы \u003ca href=\"https://practicum.yandex.ru/\"\u003eЯндекс Практикума\u003c/a\u003e. Проект представляет собой \u003ca href=\"\"\u003eпродолжение\u003c/a\u003e портирования на \"React\" адаптивного приложения (SPA) с профилем пользователя и фотокарточками, \u003ca href=\"https://github.com/elrouss/mesto\"\u003eизначально написанного\u003c/a\u003e на нативных технологиях: HTML5, CSS3 и JavaScript. В сравнении с предыдущей работой в данном проекте добавлен функционал регистрации и авторизации пользователей на сайте в своем личном кабинете, а также исправлены некоторые ошибки, пропущенные ревьюером\n\n\u003ch4\u003eСсылка на макеты:\n\u003cbr\u003e\nhttps://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1\nhttps://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1\nhttps://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1\nhttps://www.figma.com/file/PSdQFRHoxXJFs2FH8IXViF/JavaScript-9-sprint?node-id=0%3A1\nhttps://www.figma.com/file/5H3gsn5lIGPwzBPby9jAOo/Sprint-14-RU?node-id=0%3A1\n\u003cbr\u003e\n\u003cbr\u003e\n\nСсылка на проект: https://elrouss.github.io/react-mesto-auth/\u003c/h4\u003e\n\n\u003ci\u003e* - проект прошел код-ревью\u003c/i\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"technologies\"\u003e\u003ch2\u003e2. Стек технологий\u003c/h2\u003e\u003c/a\u003e\n\u003cspan\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"Иконка React\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\" alt=\"Иконка React Router\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"Иконка CSS3\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"Иконка HTML5\"\u003e\n\u003c/span\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"installation\"\u003e\u003ch2\u003e3. Установка и запуск приложения в локальном репозитории, эксплуатация (пп. 4-5 актуальны также при работе на Github Pages)\u003c/h2\u003e\u003c/a\u003e\n1. `git clone https://github.com/elrouss/react-mesto-auth.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство\n2. `npm i` - установить зависимости\n3. `npm run start` - запустить приложение в режиме разработчика (в браузере ввести ссылку `http://localhost:3000/react-mesto-auth/sign-in`, если приложение не открылось там автоматически)\n4. При использовании приложения для входа в личный кабинет пользователю требуется \u003cb\u003eзарегистрироваться\u003c/b\u003e (`https://elrouss.github.io/react-mesto-auth/sign-up`) и пройти \u003cb\u003eавторизацию\u003c/b\u003e (`https://elrouss.github.io/react-mesto-auth/sign-in`). Можно воспользоваться уже зарегистрированным аккаунтом: \u003cb\u003eemail\u003c/b\u003e - `test-acc@test.ru`, \u003cb\u003eпароль\u003c/b\u003e - `test-acc@test.ru`\n5. При авторизации в локальном хранилище сохраняется токен пользователя, который при закрытии вкладки с приложением и возвращении позволяет оставаться авторизованным на сайте. Он удаляется после нажатия на кнопку выхода из личного кабинета\n\u003ca name=\"problem-routes\"\u003e\n  \u003cp\u003e\n    \u003cb\u003eNB!\u003c/b\u003e В связи \u003ca href=\"https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing\"\u003eс особенностями совместимости\u003c/a\u003e Github Pages с модулем маршрутизации (React Router DOM) в удаленном репозитории \u003cb\u003eне рекомендуется\u003c/b\u003e обновление страниц приложения, имеющих добавочные эндпоинты к корневой ссылке \u003cb\u003e/react-mesto-auth\u003c/b\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\u003cp\u003e\n  \u003cb\u003eNB!!\u003c/b\u003e На данном этапе не настроена отрисовка ошибок при попытке регистрации пользователя с ранее зарегистрированным электронным адресом, неправильном вводе электронного адреса и/или пароля и т.п. Эти ошибки можно проверить самостоятельно в \u003cb\u003eконсоли разработчика\u003c/b\u003e во вкладке \u003cb\u003e\u0026laquo;Network\u0026raquo;\u003c/b\u003e (ответ с сервера будет выделен красным цветом)\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"establishing\"\u003e\u003ch2\u003e4. Процесс создания\u003c/h2\u003e\u003c/a\u003e\nРабота выполнена в \u003cb\u003e1 этап\u003c/b\u003e:\n\u003cbr\u003e\nВерстка дополнительных компонентов (стартовых окон с формами регистрации и авторизации пользователей) и элементов (гамбургер-меню, кнопка выхода из личного кабинета), написание функционала\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"tasks-and-problems\"\u003e\u003ch3\u003e4.1 Основные задачи, проблемы и их решение\u003c/h3\u003e\u003c/a\u003e\n1. Вынос \u003cb\u003eобщих компонентов\u003c/b\u003e для нескольких страниц и перерисовка элементов\n\u003cp\u003e\n  \u003cb\u003eРешение: \u003c/b\u003eвыделено \u003cb\u003e2\u003c/b\u003e компонента - \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/Header/Header.js\"\u003eHeader\u003c/a\u003e и \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/WelcomeWindowWithForm/WelcomeWindowWithForm.js\"\u003eWelcomeWindowWithForm\u003c/a\u003e. В первом из них для перерисовки элемента (ссылки на страницу авторизации/регистрации, кнопки выхода из личного кабинета, гамбургер-меню) написаны функции, которые отслеживают \u003cb\u003eendpoint\u003c/b\u003e открытого у пользователя \u003cb\u003eurl\u003c/b\u003e, а также \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/hooks/useWindowDimensions.js\"\u003eразрешение экрана\u003c/a\u003e. Второй компонент сделан по типу \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/PopupWithForm/PopupWithForm.js\"\u003ePopupWithForm\u003c/a\u003e, в который в свою очередь вставляются \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/Register/Register.js\"\u003eRegister\u003c/a\u003e и \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/Login/Login.js\"\u003eLogin\u003c/a\u003e\n\u003c/p\u003e\n\n2. Проблема \u003cb\u003eотрисовки стартового окна\u003c/b\u003e с формой авторизации на несколько миллисекунд при обновлении страницы в личном кабинете\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e в компоненте App создан \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/App/App.js#:~:text=const%20%5BisAppLoading%2C%20setIsAppLoading%5D%20%3D%20useState(false)%3B\"\u003eстейт-заглушка\u003c/a\u003e, ставящийся на этапе загрузки приложения, когда происходит проверка наличия токена и переадресация пользователю по нужному роуту\n\u003c/p\u003e\n\n3. Переписать код \u003cb\u003eвалидаци\u003c/b\u003eи форм под \u003cb\u003eкастомный хук\u003c/b\u003e\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e в \u003ca href=\"https://github.com/elrouss/mesto-react\"\u003eстаром\u003c/a\u003e проекте в компонентах \u003cb\u003e3\u003c/b\u003e модальных окон (\u003ca href=\"https://github.com/elrouss/mesto-react/blob/main/src/components/EditAvatarPopup/EditAvatarPopup.js\"\u003eEditAvatarPopup\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto-react/blob/main/src/components/EditProfilePopup/EditProfilePopup.js\"\u003eEditProfilePopup\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto-react/blob/main/src/components/AddPlacePopup/AddPlacePopup.js\"\u003eAddPlacePopup\u003c/a\u003e) была реализована собственноручно написанная валидация, которая получилась несколько громоздкой. С появлением \u003cb\u003e2\u003c/b\u003e новых компонентов (\u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/Register/Register.js\"\u003eRegister\u003c/a\u003e и \u003ca href=\"a href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/components/Login/Login.js\"\u003eLogin\u003c/a\u003e) составлен \u003ca href=\"https://github.com/elrouss/react-mesto-auth/blob/main/src/hooks/useFormWithValidation.js\"\u003eхук\u003c/a\u003e, примененный ко всем названным компонентам, который в итоге сделал код \u003cb\u003eболее читаемым\u003c/b\u003e, \u003cb\u003eсократил\u003c/b\u003e его в \u003cb\u003e1,5 раза\u003c/b\u003e и сделал функцию валидации \u003cb\u003eуниверсальной\u003c/b\u003e. Кроме того, в верстке и стилях \u003ca href=\"https://github.com/elrouss/react-mesto-auth/commit/41709b0c900fa8ab1bd0512bb1f78df7f08d2dcd#:~:text=%40%40%20%2D1%2C29%20%2B1%2C15%20%40%40-,.popup__error%20%7B,-.popup__error%20%7B\"\u003eпереписан\u003c/a\u003e код отрисовки ошибок валидации (ранее - применялось абсолютное позиционирование, что некорректно отображало ошибки на мобильных разрешениях (с попаданием в фокус инпутов) и требовало высчитывание точек местоположения (top, left) для промежуточных разрешений\n\u003c/p\u003e\n\n4. В \u003ca href=\"https://github.com/elrouss/mesto-react\"\u003eпрошлой\u003c/a\u003e версии проекта \u003cb\u003eпри закрытии модального окна с фотографией карточки\u003c/b\u003e резко исчезал снимок и появлялся \u003cb\u003eundefined\u003c/b\u003e\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e открытие и закрытие модального окна происходило только при наличии данных в передаваемом объекте (стейт \u003cb\u003eselectedCard\u003c/b\u003e), появлявшихся и исчезавших во время клика по изображению карточки. Соответственно, закрытие окна начиналось только при очистке данных в объекте карточки (\u003cb\u003eObject.keys(card).length !== 0\u003c/b\u003e, отсюда - \u003cb\u003eundefined\u003c/b\u003e). В качестве \u003ca href=\"https://github.com/elrouss/react-mesto-auth/commit/6cdc7d24817f96a12c206eeca30104d171b7040f\"\u003eрешения\u003c/a\u003e этой проблемы был введен новый стейт \u003cb\u003eisImagePopupOpened\u003c/b\u003e с булевым значением, который меняется при клике на карточку, что приводит к открытию и закрытию модального окна (объект карточки продолжает храниться в стейте \u003cb\u003eselectedCard\u003c/b\u003e). Для очистки данных в модальном окне при закрытии во избежание \"моргания\" изображения при открытии модального окна другой карточки добавлен хук \u003cb\u003euseEffect\u003c/b\u003e с методом \u003cb\u003esetTimeout\u003c/b\u003e, который возвращает стейт \u003cb\u003eselectedCard\u003c/b\u003e в исходное состояние сразу же после завершения анимации плавного закрытия модального окна\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"functionality\"\u003e\u003ch2\u003e5. Функционал\u003c/h2\u003e\u003c/a\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eАдаптивный интерфейс \u003cb\u003e\u003ci\u003e(в т. ч. новых компонентов и элементов)\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848219-0d443e1e-a711-4803-a78c-6c998a1786f9.gif\" alt=\"Гиф с демонстрацией адаптивного интерфейса приложения\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eРегистрация и авторизация пользователей\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216912837-de6a7d00-24fb-49b9-8e65-7982180eb2c5.gif\" alt=\"Гиф с демонстрацией регистрации и авторизации пользователей\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eРедактирование данных пользователя\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848508-481840e7-176a-466e-9a5f-f73f71c051e2.gif\" alt=\"Гиф с демонстрацией редактирования данных пользователя в личном кабинете\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eОбновление аватара\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848611-c9f96a5e-e87f-4755-8fe9-50592c0a62b1.gif\" alt=\"Гиф с демонстрацией обновления аватара пользователя\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eДобавление новой карточки\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848713-6efd8c14-089b-476f-b6f4-cbaa213beba3.gif\" alt=\"Гиф с демонстрацией добавления новой карточки\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eДобавление и снятие лайка (включая счетчик лайков)\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848788-786b5957-8e4b-4a1e-9b9a-be82d7475c73.gif\" alt=\"Гиф с демонстрацией добавления и снятия лайка (включая счетчик лайков)\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eУдаление карточки \u003cb\u003e\u003ci\u003eс модальным окном подтверждения действия\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848877-b47233a0-0bde-4311-a266-326809dc6941.gif\" alt=\"Гиф с демонстрацией удаления карточки\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eМодальное окно успешной/неудачной регистрации на сайте\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216910166-40745d73-2086-45ec-a348-306336499426.gif\" alt=\"Гиф с демонстрацией модального окна успешной/неудачной регистрации на сайте\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eМодальное окно с увеличенной фотографией карточки\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216910652-a8a9272c-1e87-49e0-b983-93c3952b88e8.gif\" alt=\"Гиф с демонстрацией модального окна с увеличенной фотографией карточки\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eОткрытие и закрытие модальных окон (по кнопке, \u003cb\u003e\u003ci\u003eоверлею\u003c/i\u003e\u003c/b\u003e и \u003cb\u003e\u003ci\u003eклавише \"Escape\"\u003c/i\u003e\u003c/b\u003e)\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216910652-a8a9272c-1e87-49e0-b983-93c3952b88e8.gif\" alt=\"Гиф с демонстрацией открытия и закрытия модального окна\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ci\u003eСпиннеры загрузки\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848611-c9f96a5e-e87f-4755-8fe9-50592c0a62b1.gif\" alt=\"Гиф с демонстрацией спиннера загрузки на примере модального окна с обновлением аватара\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ci\u003eВалидация форм\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216848611-c9f96a5e-e87f-4755-8fe9-50592c0a62b1.gif\" alt=\"Гиф с демонстрацией валидации формы на примере модального окна с обновлением аватара\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003e\u003ci\u003e\u003cb\u003e\u003ci\u003eОкно предварительной загрузки страницы\u003c/i\u003e\u003c/b\u003e\u003c/i\u003e\u003c/b\u003e\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/216913189-b1a3c13c-1f28-4291-856e-a43fa92ce29f.gif\" alt=\"Гиф с демонстрацией окна предварительной загрузки страницы\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n                                                                                               \n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003e\u003ci\u003eСтраница 404\u003c/i\u003e\u003c/b\u003e (\u003ca href=\"#problem-routes\"\u003e\u003cb\u003eне будет видна\u003c/b\u003e\u003c/a\u003e на  Github Pages)\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/215304244-bd854ae2-0066-416d-a516-3b29f4028363.gif\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cbr\u003e\n\u003cb\u003e\u003ci\u003e* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе\u003c/i\u003e\u003c/b\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"enhancement\"\u003e\u003ch2\u003e6. Планы по улучшению\u003c/h2\u003e\u003c/a\u003e\n- Оптимизация лишних ререндеров\n- Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок (\"Пользователь с таким электронным адресом уже зарегистрирован\", \"Неправильный электронный адрес/пароль\" и проч.)\n- Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone\n- Оптимизация приложения для людей с ограниченными возможностями (напр., \u003cb\u003elabel\u003c/b\u003e для инпутов форм)\n- Добавление автоматического обновления галереи карточек\n- Добавление функции сабмита форм нажатием на клавишу \"Enter\" (в настоящий момент работает только в случае клика пользоватем по полю формы)\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://elrouss.github.io/react-mesto-auth/\"\u003e\n    \u003cimg width=\"550\" alt=\"Героини сериала 'Секс в большом городе'\" src=\"https://user-images.githubusercontent.com/108838349/217341159-4ecf6691-34f3-481a-98f1-176140bf2397.png\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Freact-mesto-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrouss%2Freact-mesto-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Freact-mesto-auth/lists"}