Проект "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 для получения данных о профиле и фотографиях.
-
Клонируйте репозиторий:
git clone git@github.com:Dmitry145528/react-mesto-api-full-gha.git git clone https://github.com/Dmitry145528/react-mesto-api-full-gha.git
Для бекэнд части
-
Перейдите в директорию проекта, выполнив команду:
cd react-mesto-api-full-gha
cd backend
-
Установите все необходимые зависимости проекта, выполнив команду:
npm install
-
Создайте файл .env в корневой директории проекта и добавьте следующие переменные среды:
PORT=3000
MONGO_URL=mongodb://127.0.0.1:27017/mestodb
-
Вы можете запустить сервер:
npm run start
-
Вы можете запустить сервер с hot-reload:
npm run dev
Примечание:
В файле App.js бекенд части необходимо настроить доступ CORS для разрешения запросов с фронтенд части.
Для фронтенд части
-
Перейдите в директорию проекта, выполнив команду:
cd react-mesto-api-full-gha
cd frontend
-
Установите все необходимые зависимости проекта, выполнив команду:
npm install
-
Перед запуском проекта в режиме разработки или деплоем на хостинг, необходимо собрать проект. Для этого выполните команду:
npm run build
-
Вы можете запустить проект в режиме разработки, выполнив команду:
npm run dev
Примечание:
Для корректной работы фронтенд части необходимо изменить файлы utils/Api.js и utils/Auth.js собственными значениями, соответствующими вашему бекенду.
Перед началом убедитесь, что у вас установлены:
✅ Завершено