https://github.com/elrouss/mesto
Учебный frontend-проект "Место" с применением нативных технологий (подключение к серверу с реализацией основного функционала популярных соцсетей: Instagram, Facebook, VKontakte)
https://github.com/elrouss/mesto
api bem-methodology css3 elrouss frontend html5 js-es6 webpack yandex-praktikum
Last synced: 25 days ago
JSON representation
Учебный frontend-проект "Место" с применением нативных технологий (подключение к серверу с реализацией основного функционала популярных соцсетей: Instagram, Facebook, VKontakte)
- Host: GitHub
- URL: https://github.com/elrouss/mesto
- Owner: elrouss
- Created: 2022-08-30T21:16:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-02T11:23:03.000Z (about 2 years ago)
- Last Synced: 2025-02-07T11:31:27.212Z (3 months ago)
- Topics: api, bem-methodology, css3, elrouss, frontend, html5, js-es6, webpack, yandex-praktikum
- Language: JavaScript
- Homepage:
- Size: 3.56 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Учебный frontend-проект: "Место"
Оглавление
- Описание проекта
- Стек технологий
- Установка и запуск проекта в локальном репозитории
- Процесс создания
- Функционал
- Планы по улучшению
1. Описание проекта
Данная проектная работа выполнена в рамках образовательной программы Яндекс Практикума. Проект представляет собой создание адаптивного одностраничного сайта с профилем пользователя и фотокарточками - аналога популярных соцсетей - с применением нативных технологий (HTML5, CSS3, JS). В рамках учебного курса он был также портирован на "React" и расширен добавлением функционала регистрации и авторизации пользователей
Ссылка на макеты:
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/
* - проект прошел код-ревью
3. Установка и запуск проекта в локальном репозитории
1. `git clone https://elrouss.github.io/mesto.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. `npm i` - установить зависимости
3. `npm run dev` - запустить приложение в режиме разработчика (в браузере ввести ссылку `http://localhost:8080/`, если приложение не открылось там автоматически)
4. Процесс создания
Работа разделена на 6 этапов:
1. Верстка, реализация открытия и закрытия модального окна с возможностью редактирования данных профиля
2. Интерактивные элементы страницы: добавление и удаление карточки, лайки, открытие фотографии карточки в отдельном модальном окне, плавное открытие и закрытие попапов
3. Валидация форм, закрытие модальных кликом по оверлею и нажатием на клавишу "Escape"
4. Начало рефакторинга (переход к классам): добавление компонентов Card и FormValidator, разбиение на модули, директивы import & export
5. Завершение рефакторинга: структуризация проекта, переписывание функций под 5 новых классов (Section, Popup, PopupWithImage, PopupWithForm, UserInfo), сборка проекта Вебпаком
6. Подключение к серверу: загрузка информации о пользователе, обновление аватара, загрузка карточек (добавление и удаление), счетчик лайков, улучшение UX всех форм
4.1 Основные задачи, проблемы и их решение
Самой трудной частью этого проекта был переход от функционального подхода к классовому: это потребовало прочтения большого количества как основного учебного материала, так и дополнительного. В отдельных случаях терялся контекст (this): проблема решалась использованием стрелочных функций. Кроме того, следовало постоянно отслеживать навешивание и снятие (!) обработчиков событий, в противном случае возникали ошибки (одна из - создание одновременно нескольких карточек при сабмите формы)
Адаптивный интерфейс
Редактирование данных пользователя
Обновление аватара
Добавление новой карточки
Добавление и снятие лайка (включая счетчик лайков)
Удаление карточки с модальным окном подтверждения действия
Модальное окно с увеличенной фотографией карточки
Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")
Спиннеры загрузки
Валидация форм
6. Планы по улучшению
1. Оптимизировать страницу для людей с ограниченными возможностями (напр., label для инпутов форм)
2. Реализовать периодическое автоматическое обновление фотогалереи (без блика)
3. Сделать сабмит форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
4. Запретить передачу пустых строк в полях форм
