Skip to content

Latest commit

 

History

History
163 lines (135 loc) · 12.7 KB

README.md

File metadata and controls

163 lines (135 loc) · 12.7 KB
Raw

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

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

    • 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/

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

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

    Иконка JavaScript Иконка CSS3 Иконка HTML5 Иконка 'Webpack'

    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): проблема решалась использованием стрелочных функций. Кроме того, следовало постоянно отслеживать навешивание и снятие (!) обработчиков событий, в противном случае возникали ошибки (одна из - создание одновременно нескольких карточек при сабмите формы)

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

    Адаптивный интерфейс Гиф с демонстрацией адаптивного интерфейса приложения
    Редактирование данных пользователя Гиф с демонстрацией редактирования данных пользователя
    Обновление аватара Гиф с демонстрацией обновления аватара пользователя
    Добавление новой карточки Гиф с демонстрацией добавления новой карточки
    Добавление и снятие лайка (включая счетчик лайков) Гиф с демонстрацией добавления и снятия лайка (включая счетчик лайков)
    Удаление карточки с модальным окном подтверждения действия Гиф с демонстрацией удаления карточки
    Модальное окно с увеличенной фотографией карточки Гиф с демонстрацией модального окна с увеличенной фотографией карточки
    Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape") Гиф с демонстрацией открытия и закрытия модального окна
    Спиннеры загрузки Гиф с демонстрацией спиннера загрузки на примере модального окна с обновлением аватара
    Валидация форм Гиф с демонстрацией валидации формы на примере модального окна с обновлением аватара

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

    1. Оптимизировать страницу для людей с ограниченными возможностями (напр., label для инпутов форм)
    2. Реализовать периодическое автоматическое обновление фотогалереи (без блика)
    3. Сделать сабмит форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
    4. Запретить передачу пустых строк в полях форм