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

Оглавление

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

1. Описание проекта

Данная проектная работа выполнена в рамках образовательной программы Яндекс Практикума. Проект представляет собой портирование на "React" адаптивного приложения с профилем пользователя и фотокарточками, изначально написанного на нативных технологиях: HTML5, CSS3 и JavaScript. Он похож по своему типу и функционалу на популярные соцсети: Instagram, Facebook, VKontakte, - расширенному в следующей учебной работе добавлением формы регистрации и авторизации пользователей

Ссылка на макеты:
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-react/

* - проект прошел обязательное код-ревью

(к оглавлению)

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

(к оглавлению)

3. Установка и запуск приложения в локальном репозитории

1. git clone https://github.com/elrouss/mesto-react.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. npm i - установить зависимости
3. npm run start - запустить приложение в режиме разработчика (в браузере ввести ссылку http://localhost:3000/, если приложение не открылось там автоматически)

(к оглавлению)

4. Процесс создания

Работа разделена на 2 этапа:

1. Портирование HTML-разметки, CSS-стилей, реализация открытия и закрытия 5 модальных окон (EditProfilePopup, EditAvatarPopup, AddPlacePopup, ConfirmCardDeletionPopup, ImagePopup), загрузка данных с сервера
2. Написание функционала с передачей данных на сервер (см.: п. 5)

(к оглавлению)

4.1 Основные задачи, проблемы и их решение

1. Удаление карточки в окне подтверждения

Решение: при реализации окна подтверждения удаления карточки сделовало учесть прокидывание _id конкретно открытой карточки, в противном случае либо не работала функция удаления, либо предпринималась попытка удаления всех карточек в галерее (неудачная в связи с контролем сервера). Для этого был создан стейт activeCardId, в который записывается _id открываемой карточки и соответственно используется в функции ее удаления

2. Пустые элементы верстки и "дерганье" в процессе отрисовки после получения данных с сервера

Решение: для скрытия страницы до ответа с сервера и вставки их в верстку добавлено окно-заглушка

3. Валидация форм и усиленный контроль за типом данных, вводимых пользователем

Решение: для валидации форм написана логика, которая проверяет в компонентах сохраняемые в стейтах данные, вводимые пользователем в инпутах (url, длина слова). Далее в зависимости от установленных правил отдельная функция проверяет, можно ли считать форму валидной или нет, и пробрасывает булево значение через пропс в родительский компонент PopupWithForm. Там в свою очередь стилизуется и блокируется/активируется кнопка того или иного дочернего компонента формы. Кроме того, во избежание передачи url-ов, которые могли бы случайно начинаться с пустого пробела (следовательно, вызывать ошибку при сабмите), и двойных пробелов при отправке данных на сервер методом trim обрезаются лишние пробелы по краям строки, а регулярным выражением убираются все неодинарные пробелы

4. Проблема добавления пользователем нескольких однотипных карточек при клике на кнопку сабмита в процесса обмена данными с сервером

Решение: блокировать кнопку

(к оглавлению)

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

Адаптивный интерфейс

Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")

Модальное окно с увеличенной фотографией карточки

Редактирование данных пользователя

Обновление аватара

Добавление новой карточки

Добавление и снятие лайка (включая счетчик лайков)

Удаление карточки с модальным окном подтверждения действия

Спиннеры загрузки

Валидация форм

Окно предварительной загрузки страницы

* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе

(к оглавлению)

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

• Исправление ошибки при закрытии модального окна с фотографией карточки (реализовано в следующем проекте)
• Оптимизирование валидации форм под кастомный хук (также реализовано в следующем проекте)
• Оптимизация лишних ререндеров
• Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
• Добавление автоматического обновления галереи карточек
• Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)

(к оглавлению)