Проект Mesto бэкенд + фронтенд

Проект "Mesto" - это простое веб-приложение, которое представляет собой страницу для обмена фотографиями и путешествиями. Пользователи могут просматривать фотографии различных мест, добавлять свои собственные фотографии, ставить лайки и редактировать свой профиль. Ссылка на сайт | Ссылка на макет в Figma

Структура проекта:

• Mesto (версия Java Script)
• Mesto (версия React)
• Mesto (версия для сервера)
• Mesto (версия с фронтендом и бэкендом) - этот репозиторий

Что сделал:

• Реализовал на Node.js и Express.js, сервер обрабатывает запросы, взаимодействует с базой данных MongoDB и обрабатывает ошибки.

• Создал компоненты интерфейса, такие как карточки с фотографиями, формы для ввода данных, профиль пользователя и другие. Применил Flexbox и Grid Layout для создания структуры страницы.

• Реализовал запросы к API, включая GET и POST запросы, а также другие необходимые для взаимодействия с сервером. Эти запросы позволили получать данные о фотографиях, загружать новые фотографии на сервер, а также обновлять информацию о профиле пользователя.

• Написал компонент для валидации данных, вводимых пользователями в различные формы. Это помогает предотвратить отправку некорректной или неполной информации на сервер.

• Применил JavaScript и CSS для добавления анимаций и эффектов при взаимодействии пользователя с интерфейсом, что делает его более интерактивным и привлекательным.

• Внедрил функциональность для сохранения некоторых данных на стороне клиента, что повышает производительность и удобство использования приложения.

Реализованный функционал:

• Реализованы роуты и контроллеры для работы с пользователями (регистрация, авторизация, получение информации о текущем пользователе, обновление данных пользователя).

• Реализована аутентификация с использованием JWT (JSON Web Token) для безопасной передачи информации между клиентом и сервером.

• Реализованы роуты и контроллеры для работы с карточками (создание, получение, обновление, удаление карточек).

• Реализованы мидлвары для обработки запросов, аутентификации и обработки ошибок.

• Взаимодействие с базой данных MongoDB для сохранения пользовательских данных и карточек.

• Пользователи могут просматривать фотографии мест, загруженные другими пользователями.

• Пользователи могут выражать своё восхищение фотографиями, ставя лайки.

• Пользователи могут добавлять новые места, создавая собственные карточки, которые будут доступны для просмотра другим участникам. Также имеется возможность удалить собственную карточку, если она перестала быть актуальной.

• Пользователи могут просматривать фотографии в увеличенном режиме, открывая их в модальном окне.

• Каждый пользователь имеет возможность изменить свои данные, такие как имя, аватар и деятельность.

• Пользователи могут регистрироваться и авторизовываться.

• Реализовал попапы с информацией о статусе входа (успешный вход, ошибка).

Технологии:

• Node.js: Платформа для выполнения JavaScript кода на сервере.
• Express.js: Фреймворк для создания веб-приложений на Node.js.
• MongoDB: Документоориентированная NoSQL база данных.
• JWT (JSON Web Token): Механизм аутентификации для безопасной передачи информации между клиентом и сервером.
• dotenv: Модуль для загрузки переменных среды из файла .env.
• mongoose: ODM (Object Data Modeling) для работы с MongoDB через Node.js.
• cookie-parser: Middleware для работы с куки в Express приложениях.
• celebrate и Joi: Библиотеки для валидации данных и обработки ошибок в Express.js приложениях.
• errors из celebrate: Middleware для обработки ошибок валидации данных.
• logger middleware: Middleware для логирования запросов и ошибок.
• Библиотека React для разработки пользовательского интерфейса.
• Хуки useState и useEffect для управления состоянием компонентов и выполнения побочных эффектов.
• CSS-фреймворк Flexbox для гибкой вёрстки.
• Технология @font-face для подключения шрифтов.
• CSS-фреймворк Grid-Layout для создания сложных сеток.
• Использование относительных единиц измерения, таких как vw, vh, %, rem и em для создания адаптивных интерфейсов.
• Использование псевдокласса :hover для интерактивных элементов.
• Формы и валидация данных средствами JavaScript.
• Позиционирование элементов.
• Методология БЭМ (Nested) для именования классов CSS.
• Адаптивная вёрстка с использованием медиазапросов @media screen.
• Обработка массивов данных с помощью методов JavaScript.
• Работа с данными по умолчанию.
• Модульная структура проекта с использованием import и export.
• Взаимодействие с API для получения данных о профиле и фотографиях.

Инструкция по запуску:

1. Клонируйте репозиторий:

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

Для бекэнд части

1. Перейдите в директорию проекта, выполнив команду:

   cd react-mesto-api-full-gha

   cd backend

2. Установите все необходимые зависимости проекта, выполнив команду:

   npm install

3. Создайте файл .env в корневой директории проекта и добавьте следующие переменные среды:

   PORT=3000

   MONGO_URL=mongodb://127.0.0.1:27017/mestodb

4. Вы можете запустить сервер:

   npm run start

5. Вы можете запустить сервер с hot-reload:

   npm run dev

Примечание: В файле App.js бекенд части необходимо настроить доступ CORS для разрешения запросов с фронтенд части.

Для фронтенд части

1. Перейдите в директорию проекта, выполнив команду:

   cd react-mesto-api-full-gha

   cd frontend

2. Установите все необходимые зависимости проекта, выполнив команду:

   npm install

3. Перед запуском проекта в режиме разработки или деплоем на хостинг, необходимо собрать проект. Для этого выполните команду:

   npm run build

4. Вы можете запустить проект в режиме разработки, выполнив команду:

   npm run dev

Примечание: Для корректной работы фронтенд части необходимо изменить файлы utils/Api.js и utils/Auth.js собственными значениями, соответствующими вашему бекенду.

Требования:

Перед началом убедитесь, что у вас установлены:

• Node.js
• MongoDB

Статус разработки:

✅ Завершено