usergithub37 / react-mesto-api-full

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

Проект: "Место" (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, БЭМ, Семантическая верстка, Адаптивная верстка.

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

• Ссылка на 1-ю часть макета в Figma
• Ссылка на 2-ю часть макета в Figma
• Ссылка на 3-ю часть макета в Figma
• Ссылка на 4-ю часть макета в Figma

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

• Чеклист для самопроверки. 4 Спринт.
• Чеклист для самопроверки. 5 Спринт.
• Чеклист для самопроверки. 6 Спринт.
• Чеклист для самопроверки. 7 Спринт.
• Чеклист для самопроверки. 8 Спринт.
• Чеклист для самопроверки. 9 Спринт.
• Чеклист для самопроверки. 10 Спринт.
• Чеклист для самопроверки. 11 Спринт.
• Чеклист для самопроверки. 12 Спринт.
• Чеклист для самопроверки. 13 Спринт.
• Чеклист для самопроверки. 14 Спринт.
• Чеклист для самопроверки. 15 Спринт.

---

Краткая история развития проекта "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

2. Через поиск вашего текстового редактора найдите в файле /frontend/src/utils/api.js и в файле /frontend/src/utils/apiAuth.js URL адрес https://api-mesto.tw1.ru/ и замените его на http://localhost:3000

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

npm install

4. Запустите dev-сервер бэкенда (выполнить в папке backend)

npm run dev

5. Запустите dev-сервер фронтенда (выполнить в папке frontend)

npm start

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