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

Оглавление

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

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

Данная проектная работа - итоговая в рамках образовательной программы Яндекс Практикума. Проект представляет собой адаптивное приложение (SPA), написанное на "React" (часть frontend) и "Node" (часть backend), с возможностью регистрации личного кабинета пользователя, редактированием данных и добавлением фотокарточек в общую галерею.

Изначально приложение было написано на нативных технологиях: JavaScript, CSS3 и HTML5. Затем проект был перенесен на "React" с добавлением функционала регистрации и авторизации пользователей, отдельно написана логика серверной части с фреймворком "Express" и в завершение обе части объединены и сохранены на виртуальной машине, размещенной на Яндекс Облаке.

Адрес репозитория: https://github.com/elrouss/react-mesto-api-full-gha

Ссылки на проект:
IP 158.160.52.24
Frontend https://elrouss.mesto.nomoredomains.work
Backend https://api.elrouss.mesto.nomoredomains.work

Ссылки на макет:
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://www.figma.com/file/5H3gsn5lIGPwzBPby9jAOo/Sprint-14-RU?node-id=0%3A1

Ссылка на чек-лист
https://code.s3.yandex.net/web-developer/checklists-pdf/new-program/checklist_15.pdf

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

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

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

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

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

1. git clone https://github.com/elrouss/react-mesto-api-full-gha.git - клонировать репозиторий (HTTPS) на свое устройство
2. npm i - установить зависимости (отдельно - в папке frontend и backend)
3. npm run dev - запустить приложение в режиме разработчика в папке backend (можно предварительно настроить порт 3001)
4. npm run start - запустить приложение в режиме разработчика в папке frontend

NB! На данном этапе не настроена отрисовка ошибок при попытке регистрации пользователя с ранее зарегистрированным электронным адресом, неправильном вводе электронного адреса и/или пароля и т.п. Эти ошибки можно проверить самостоятельно в консоли разработчика во вкладке «Network» (ответ с сервера будет выделен красным цветом)

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

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

Работа выполнена в 1 этап:

• Реализовано логирование запросов и ошибок
• Объединены frontend и backend части приложения
• Создан облачный сервер и развернут API
• Создан .env-файл
• Создан домен и прикреплен к серверу
• Выпущены и подключены SSL-сертификаты

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

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

1. Кросс-доменные запросы и механизм CORS

Решение: скачан и подключен пакет CORS

2. Связывание frontend и backend

Решение: в связи с тем, что backend был написан несколько иначе, чем учебная серверная часть в процессе подготовки frontend, в процессе тестирования возникали многочисленные ошибки (регистрация/авторизация, не приходили данные, выход из личного кабинета одним пользоваталем и вход другим приводили к сохранению данных первого пользователя и их изменению только после перезагрузки страницы). Связывание проходило локально, были внесены изменения как на backend, так и на frontend

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

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

Адаптивный интерфейс (в т. ч. новых компонентов и элементов)

Регистрация и авторизация пользователей

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

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

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

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

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

Модальное окно успешной/неудачной регистрации на сайте

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

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

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

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

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

Страница 404

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

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

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

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

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