Проект "Mesto" - это простое веб-приложение, которое представляет собой страницу для обмена фотографиями и путешествиями. Пользователи могут просматривать фотографии различных мест, добавлять свои собственные фотографии, ставить лайки и редактировать свой профиль. Ссылка на gh-pages | Ссылка на макет в Figma
- Mesto (версия Java Script) - этот репозиторий
- Mesto (версия React)
- Mesto (версия для сервера)
- Mesto (версия с фронтендом и бэкендом)
-
Создал компоненты интерфейса, такие как карточки с фотографиями, формы для ввода данных, профиль пользователя и другие. Применил Flexbox и Grid Layout для создания структуры страницы.
-
Я реализовал запросы к API, включая GET и POST запросы, а также другие необходимые для взаимодействия с сервером. Эти запросы позволили получать данные о фотографиях, загружать новые фотографии на сервер, а также обновлять информацию о профиле пользователя.
-
Написал компонент для валидации данных, вводимых пользователями в различные формы. Это помогает предотвратить отправку некорректной или неполной информации на сервер.
-
Применил JavaScript и CSS для добавления анимаций и эффектов при взаимодействии пользователя с интерфейсом, что делает его более интерактивным и привлекательным.
-
Внедрил функциональность для сохранения некоторых данных на стороне клиента, что повышает производительность и удобство использования приложения.
-
Пользователи могут просматривать фотографии мест, загруженные другими пользователями.
-
Пользователи могут выражать своё восхищение фотографиями, ставя лайки.
-
Пользователи могут добавлять новые места, создавая собственные карточки, которые будут доступны для просмотра другим участникам. Также имеется возможность удалить собственную карточку, если она перестала быть актуальной.
-
Пользователи могут просматривать фотографии в увеличенном режиме, открывая их в модальном окне.
-
Каждый пользователь имеет возможность изменить свои данные, такие как имя, аватар и деятельность.
- Технология Flex-вёрстка.
- Технология @font-face.
- Технология для сложных сеток Grid-Layout.
- Технология гибких элементов и блоков, при помощи относительных единиц vw/vh/%/rem/em.
- Технология псевдокласса :hover.
- Технология заплнения и отправки формы при помощи JavaScript.
- Технология позиционирования элементов.
- Технология БЭМ (Nested).
- Технология адптации вёрстки под разные устройства @media screen.
- Технология работы с тегом template.
- Технология работы с методами массива.
- Технология работы с данными по умолчанию.
- Технология по валидации форм.
- Технология написания ООП.
- Технология import и export.
- Технология работы модулей.
-
Склонировать репозиторий:
git clone [email protected]:Dmitry145528/mesto.git git clone https://github.com/Dmitry145528/mesto.git
-
Перейдите в директорию проекта, выполнив команду:
cd mesto
-
Установите все необходимые зависимости проекта, выполнив команду:
npm install
-
Перед запуском проекта в режиме разработки или деплоем на хостинг, необходимо собрать проект. Для этого выполните команду:
npm run build
-
Вы можете запустить проект в режиме разработки, выполнив команду:
npm run dev
-
Если вы хотите разместить ваш проект на GitHub Pages, выполните следующую команду:
npm run deploy
✅ Завершено
Дальнейшая разработка ведётся в репозитории Mesto (версия на React)