Проект: "Место" (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)
- Клонирование репозитория
git clone https://github.com/UserGitHub37/react-mesto-api-full.git-
Через поиск вашего текстового редактора найдите в файле /frontend/src/utils/api.js и в файле /frontend/src/utils/apiAuth.js URL адрес https://api-mesto.tw1.ru/ и замените его на http://localhost:3000
-
Установка зависимостей (выполнить в папках frontend и backend)
npm install- Запустите dev-сервер бэкенда (выполнить в папке backend)
npm run dev- Запустите dev-сервер фронтенда (выполнить в папке frontend)
npm startПриложение сообщит, что порт 3000 занят (бэкендом) и предложит запустить приложение на другом порту. Выберете Yes. Произойдет запуск приложения с фронтендом в браузере. Если проект не откроется автоматически, то откройте в браузере http://localhost:3001