Skip to content

Интерактивная страница, куда можно добавлять/ удалять фотографии, ставить лайки и редактировать профиль. Является упрощенной копией Инстаграма.

Notifications You must be signed in to change notification settings

script696/mesto

Repository files navigation


Проект Mesto

Интерактивная страница, куда можно добавлять/ удалять фотографии, ставить лайки и редактировать профиль. Является упрощенной копией Инстаграма.

Посмотреть этот проект

О проекте


Screen Shot

Проект Mesto стал моим первым серьезным проектом и иыспытание на пути Веб разработчика. Начавшись с банальной верстки, он расширялся и обрастал все новым и новым функционалом. Статичная разметка из карточек заменялась на динамический рендеринг с использованием шаблона и данных из локального массива. Массив данных, впоследствии, стал запрашиваться с сервера. Для карточек появилась возможность лайков, открытия - фуллскрин, удаления и добавления. Функциональный подход был переписан на классовый. Добавилась динамическая валидация форм. Этот проект дал мне хорошие базовые знания и подготовил к изучению новых библиотек и фреймворков.

Использованные технологии

  • Figma
  • Методология БЭМ (Nested БЭМ)
  • Адаптивная верстка
  • Синтаксис ES6
  • ООП
  • REST API
  • Динамическая валидация форм
  • Webpack
  • Проект подключен к серверу и размещен в интернете с использованием GitHub Pages

Установка

1. Клонируйте репозиторий командой:

git clone git@github.com:script696/mesto.git

2. Установите пакеты командой:

npm i

3. Доступные скрипты:

npm start

Запуск приложения в режиме разработки.
Откройте http://localhost:3000 чтобы увидеть результат в браузере.

Страница обновится автоматически при внесении изменений.

Как это можно использовать

  1. При нажатии на кнопку редактирования аватара, откроется попап. Для изменения аватара профиля введите ссылку на изображение и нажмите "Сохранить."
  2. При нажатии на кнопку редактирования профиля, откроется попап. Для изменения имени и информации о себе введите необходимую информацию и нажмите кнопку "Сохранить"
  3. При нажатии на кнопку добавления фотографии, откроется попап. Для добавления фотографии на страницу введите ссылку на изображение и нажмите "Создать"
  4. При нажатии на изображение откроется полноэкранный попап с данным изображением.
  5. При нажатии на сердечко устанавливается/снимается лайк для данной карточки

Что планируется улучшить

Данный проект является учебным, дальнейшая работа над ним не планируется

Авторы

About

Интерактивная страница, куда можно добавлять/ удалять фотографии, ставить лайки и редактировать профиль. Является упрощенной копией Инстаграма.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published