Дипломный проект в рамках учебы в Яндекс.Практикум на факультете Веб-разработчик

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

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

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

Ссылки на проект:

• IP: 158.160.117.107
• Frontend: https://mesto.shnd3r.nomoredomainsicu.ru
• Backend: https://api.mesto.shnd3r.nomoredomainsicu.ru

Ссылки на макет:

• 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

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

Используемые технологии:

Frontend

Backend

General

Функциональность:

• Backend:
  • В проекте созданы схемы и модели пользователей и карточек с контентом:
  • card — схема карточки с контентом
  • user — схема пользователя
  • В проекте созданы эндпоинты:
  • /cards — обрабатывает:
    • GET запросы — отдаёт все карточки из БД
    • POST запросы — создаёт новую карточку с контентом
  • /cards/:cardId — обрабатывает DELETE запросы, удаляет карточку по cardId
  • /cards/:cardId/likes — обрабатывает:
    • PUT запросы — добавляет лайк карточке с контентом
    • DELETE запросы — удаляет лайк карточке с контентом
  • /signin — обрабатывает POST запросы, производит аутентификацию пользователя
  • /signup — обрабатывает POST запросы, производит регистрацию пользователя
  • /users — обрабатывает:
    • GET запросы — отдаёт всех пользователей из БД
    • POST запросы — создаёт нового пользователя
  • /users/:userId — обрабатывает GET запросы, отдаёт пользователя по userId
  • /users/me — обрабатывает:
    • GET запросы — отдаёт информацию о текущем пользователе
    • PATCH запросы — обновляет информацию о пользователе
    • DELETE запросы — производит выход пользователя, с удалением JWT-токена из Cookie
  • /users/me/avatar — обрабатывает PATCH запросы, обновляет аватар пользователя
  • Созданы мидлвары:
  • Централизованной обработки ошибок
  • Авторизации пользователя
  • Ограничитель количества запросов (защита от DDoS атак)
  • Поддержки CORS запросов, включая обработку предварительных запросов
  • Логирования запросов и ошибок
  • Производится валидация поступающих данных:
  • до передачи информации контроллерам с помощью joi и celebrate
  • на уровне схем с помощью validator и встроенных методов mongoose
• Frontend:
  • Возможность регистрации и аутентификации пользователя
  • Возможность редактировать информацию о пользователе (установить имя пользователя, информацию «о себе», аватар)
  • Возможность создавать карточки мест (добавить\удалить карточку места, поставить\снять лайк карточке)
  • Возможность просматривать детальную фотографию карточки
  • Реализована валидация форм с помощью кастомного хука

🚀 Запуск проекта:

Клонировать репозиторий:

git clone https://github.com/Shnd3r/react-mesto-api-full-gha.git

Установить зависимости (отдельно - в директории Frontend и Backend):

npm install

Запустить приложение в режиме разработчика в директории Backend:

npm run dev

Запустить приложение в режиме разработчика в директории Frontend

npm run start

Автор

Данила Шнайдер

• E-mail: d.shnder@gmail.com
• Telegram: @shnaider_danila