Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrouss/react-mesto-api-full-gha
Учебный проект "Место" с реализацией основного функционала популярных соцсетей: Instagram, Facebook, VKontakte
https://github.com/elrouss/react-mesto-api-full-gha
api-rest bem celebrate css3 elrouss eslint express-js frontend helmet html5 joi mongodb mongoose nginx node-js nodemon rate-limit react react-router yandex-praktikum
Last synced: 13 days ago
JSON representation
Учебный проект "Место" с реализацией основного функционала популярных соцсетей: Instagram, Facebook, VKontakte
- Host: GitHub
- URL: https://github.com/elrouss/react-mesto-api-full-gha
- Owner: elrouss
- Created: 2023-03-20T20:31:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-05T10:36:41.000Z (over 1 year ago)
- Last Synced: 2024-04-17T02:02:20.228Z (7 months ago)
- Topics: api-rest, bem, celebrate, css3, elrouss, eslint, express-js, frontend, helmet, html5, joi, mongodb, mongoose, nginx, node-js, nodemon, rate-limit, react, react-router, yandex-praktikum
- Language: JavaScript
- Homepage: https://elrouss.mesto.nomoredomains.work
- Size: 2.03 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/yandex-praktikum/react-mesto-api-full-gha/actions/workflows/tests.yml)
Учебный проект: "Место"
Оглавление
- Описание проекта
- Стек технологий
- Установка и запуск приложения в локальном репозитории, эксплуатация
- Процесс создания
- Функционал
- Планы по улучшению
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
* - проект прошел код-ревью
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
Адаптивный интерфейс (в т. ч. новых компонентов и элементов)
Регистрация и авторизация пользователей
Редактирование данных пользователя
Обновление аватара
Добавление новой карточки
Добавление и снятие лайка (включая счетчик лайков)
Удаление карточки с модальным окном подтверждения действия
Модальное окно успешной/неудачной регистрации на сайте
Модальное окно с увеличенной фотографией карточки
Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")
Спиннеры загрузки
Валидация форм
Окно предварительной загрузки страницы
Страница 404
* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе
6. Планы по улучшению
- Оптимизация лишних ререндеров
- Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок ("Пользователь с таким электронным адресом уже зарегистрирован", "Неправильный электронный адрес/пароль" и проч.)
- Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone
- Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
- Добавление автоматического обновления галереи карточек
- Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)
