Проект: Место от "Yandex Practicum".

Проект "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.
• Технология работы модулей.

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

1. Склонировать репозиторий:

   git clone git@github.com:Dmitry145528/mesto.git
   git clone https://github.com/Dmitry145528/mesto.git
   

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

   cd mesto

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

   npm install

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

   npm run build

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

   npm run dev

6. Если вы хотите разместить ваш проект на GitHub Pages, выполните следующую команду:

   npm run deploy

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

✅ Завершено

Дальнейшая разработка ведётся в репозитории Mesto (версия на React)