Skip to content

Fullstack приложение, включающее фронтенд и бэкенд части приложения Место.

Notifications You must be signed in to change notification settings

UserGitHub37/react-mesto-api-full

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Проект: "Место" (react-mesto-api-full)

Fullstack приложение, включающее фронтенд и бэкенд части приложения.

Функционал:

Интерактивная страница с регистрацией и авторизацией пользователей, куда после авторизации можно добавлять и удалять фотографии, ставить лайки, редактировать информацию профиля, менять аватар.

  • сайт развернут в Timeweb Cloud на Ubuntu 20.04 и доступен по адресу https://mesto.tw1.ru/
  • API сайта расположено на том же сервере, по адресу https://api-mesto.tw1.ru/

Технологии:

  • Backend: Node.js, Express, Cookie, CORS, MongoDB, mongoose, celebrate, helmet, express-rate-limit, escape-html, dotenv, bcryptjs, jsonwebtoken, winston, express-winston.
  • Frontend: React, JavaScript, HTML, CSS, БЭМ, Семантическая верстка, Адаптивная верстка.

Сайт создан на основе макетов, размещенных в Фигме:

Чеклисты для самопроверки:


Краткая история развития проекта "Mesto":

  • "mesto", написан на чистом JavaScript с использованием сборщика модулей Webpack

  • "mesto-react", переписан с чистого JavaScript на React

  • "react-mesto-auth" дабавлено создание пользователей, их аутентификация и авторизация

  • "express-mesto-gha" написан backend для проекта "mesto"

  • "react-mesto-api-full" fullstack приложение, включающее фронтенд и бэкенд части приложения

По мере развития проект обрастал дополнительным функционалом, подробное описание которого можно посмотреть в README.md соответствующих проектов.


Установка и запуск приложения на локальной машине:

(для работы приложения потребуется локально установленная база данных MongoDB на дефолтном порту 27017)

  1. Клонирование репозитория
git clone https://github.com/UserGitHub37/react-mesto-api-full.git
  1. Через поиск вашего текстового редактора найдите в файле /frontend/src/utils/api.js и в файле /frontend/src/utils/apiAuth.js URL адрес https://api-mesto.tw1.ru/ и замените его на http://localhost:3000

  2. Установка зависимостей (выполнить в папках frontend и backend)

npm install
  1. Запустите dev-сервер бэкенда (выполнить в папке backend)
npm run dev
  1. Запустите dev-сервер фронтенда (выполнить в папке frontend)
npm start

Приложение сообщит, что порт 3000 занят (бэкендом) и предложит запустить приложение на другом порту. Выберете Yes. Произойдет запуск приложения с фронтендом в браузере. Если проект не откроется автоматически, то откройте в браузере http://localhost:3001