{"id":15844398,"url":"https://github.com/elrouss/mesto","last_synced_at":"2026-04-11T01:21:06.437Z","repository":{"id":71291682,"uuid":"530834390","full_name":"elrouss/mesto","owner":"elrouss","description":"Учебный frontend-проект \"Место\" с применением нативных технологий (подключение к серверу с реализацией основного функционала популярных соцсетей: Instagram, Facebook, VKontakte)","archived":false,"fork":false,"pushed_at":"2023-03-02T11:23:03.000Z","size":3735,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T11:31:27.212Z","etag":null,"topics":["api","bem-methodology","css3","elrouss","frontend","html5","js-es6","webpack","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":"2022-08-30T21:16:42.000Z","updated_at":"2024-01-12T18:36:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"1b8fe528-d3d2-48b3-8137-95038b9be032","html_url":"https://github.com/elrouss/mesto","commit_stats":{"total_commits":81,"total_committers":3,"mean_commits":27.0,"dds":"0.024691358024691357","last_synced_commit":"5b2218eaccdf984cd88c1e374b6a81e9303805a1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fmesto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fmesto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fmesto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fmesto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrouss","download_url":"https://codeload.github.com/elrouss/mesto/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246681765,"owners_count":20816947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","bem-methodology","css3","elrouss","frontend","html5","js-es6","webpack","yandex-praktikum"],"created_at":"2024-10-05T17:22:03.062Z","updated_at":"2025-09-19T22:30:19.859Z","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/mesto/\"\u003e\n    \u003cimg width=\"600\" src=\"https://user-images.githubusercontent.com/108838349/206931608-5636650f-d971-4993-a0ff-ad0a0bb86619.png\" 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Данная проектная работа выполнена в рамках образовательной программы Яндекс Практикума. Проект представляет собой создание адаптивного одностраничного сайта с профилем пользователя и фотокарточками - аналога популярных соцсетей - с применением нативных технологий (HTML5, CSS3, JS). В рамках учебного курса он был также \u003ca href=\"https://github.com/elrouss/mesto-react\"\u003eпортирован на \"React\"\u003c/a\u003e и \u003ca href=\"https://github.com/elrouss/react-mesto-auth\"\u003eрасширен\u003c/a\u003e добавлением функционала регистрации и авторизации пользователей\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\n\u003cbr\u003e\n\u003cbr\u003e\nСсылка на проект: https://elrouss.github.io/mesto/\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/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"Иконка JavaScript\"\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  \u003cimg src=\"https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge\u0026logo=Webpack\u0026logoColor=white\" alt=\"Иконка 'Webpack'\"\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. Установка и запуск проекта в локальном репозитории\u003c/h2\u003e\u003c/a\u003e\n1. `git clone https://elrouss.github.io/mesto.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство\n2. `npm i` - установить зависимости\n3. `npm run dev` - запустить приложение в режиме разработчика (в браузере ввести ссылку `http://localhost:8080/`, если приложение не открылось там автоматически)\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\u003e6\u003c/b\u003e этапов:\n1. Верстка, реализация открытия и закрытия модального окна с возможностью редактирования данных профиля\n2. Интерактивные элементы страницы: добавление и удаление карточки, лайки, открытие фотографии карточки в отдельном модальном окне, плавное открытие и закрытие попапов\n3. Валидация форм, закрытие модальных кликом по оверлею и нажатием на клавишу \"Escape\"\n4. Начало рефакторинга (переход к классам): добавление компонентов \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/Card.js\"\u003eCard\u003c/a\u003e и \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/FormValidator.js\"\u003eFormValidator\u003c/a\u003e, разбиение на модули, директивы import \u0026 export\n5. Завершение рефакторинга: структуризация проекта, переписывание функций под 5 новых классов (\u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/Section.js\"\u003eSection\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/Popup.js\"\u003ePopup\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/PopupWithImage.js\"\u003ePopupWithImage\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/PopupWithForm.js\"\u003ePopupWithForm\u003c/a\u003e, \u003ca href=\"https://github.com/elrouss/mesto/blob/main/src/scripts/components/UserInfo.js\"\u003eUserInfo\u003c/a\u003e), сборка проекта Вебпаком\n6. Подключение к серверу: загрузка информации о пользователе, обновление аватара, загрузка карточек (добавление и удаление), счетчик лайков, улучшение UX всех форм\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\n\u003cp\u003e\nСамой трудной частью этого проекта был переход от \u003cb\u003eфункционального\u003c/b\u003e подхода к \u003cb\u003eклассовому\u003c/b\u003e: это потребовало прочтения большого количества как основного учебного материала, так и дополнительного. В отдельных случаях терялся контекст (\u003cb\u003ethis\u003c/b\u003e): проблема решалась использованием стрелочных функций. Кроме того, следовало постоянно отслеживать \u003cb\u003eнавешивание\u003c/b\u003e и \u003cb\u003eснятие\u003c/b\u003e \u003cb\u003e(!)\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Адаптивный интерфейс\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381758-b6778d72-2812-43a3-a14a-bc1e26b4e3eb.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381792-17c71ed6-c175-4b83-856d-718870a76139.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381813-beeec672-baaf-4ca3-86a1-4d1414f0c6b2.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381855-8f4b562a-f05b-49b1-b1d7-83facd18a1d2.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381884-5730b35f-2330-4c25-8235-a4d0b63be65a.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381908-6b49e2f1-bca2-4897-abad-c31605d8aa73.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217382271-5416c39e-8e91-4b23-89e5-c3f55847ccfc.gif\" alt=\"Гиф с демонстрацией модального окна с увеличенной фотографией карточки\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eОткрытие и закрытие модальных окон (по кнопке, оверлею и клавише \"Escape\")\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217382271-5416c39e-8e91-4b23-89e5-c3f55847ccfc.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381813-beeec672-baaf-4ca3-86a1-4d1414f0c6b2.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/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217381813-beeec672-baaf-4ca3-86a1-4d1414f0c6b2.gif\" alt=\"Гиф с демонстрацией валидации формы на примере модального окна с обновлением аватара\"\u003e\n  \u003c/a\u003e\n\u003c/details\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\n1. Оптимизировать страницу для людей с ограниченными возможностями (напр., label для инпутов форм)\n2. Реализовать периодическое автоматическое обновление фотогалереи (без блика)\n3. Сделать сабмит форм нажатием на клавишу \"Enter\" (в настоящий момент работает только в случае клика пользоватем по полю формы)\n4. Запретить передачу пустых строк в полях форм\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/mesto/\"\u003e\n    \u003cimg width=\"400\" alt=\"Снимок экрана 2022-12-12 в 13 51 47\" src=\"https://user-images.githubusercontent.com/108838349/207027387-903230e6-c5b4-4a36-9950-015b9205b114.png\" alt=\"Американская певица Патти Смит. Снимок сделан ее другом, известным фотографом 20 века\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fmesto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrouss%2Fmesto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fmesto/lists"}