Skip to content

Files

Latest commit

 

History

History
33 lines (24 loc) · 2.88 KB

README.md

File metadata and controls

33 lines (24 loc) · 2.88 KB

"Melody-Home"

Pet-проект. Выполнен по дизайн-макету реального сайта продаж квартир ЖК "Мелодия"

О приложениии

Демо Melody-Home

Реализована часть проекта: главная страница выбора этажа и модальное окно выбора квартиры.

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

Стек технологий

  • ReactHooks, StyledComponents, ContextProvider.
  • Адаптивная кроссбраузерная верстка Grid/Flex.
  • Динамическое построение SVG для интерактива с пользователем. Для этого координаты svg-примитивов выгружены в JSON файл public/db/homeCoords.json, куда добавлены свойства для управления ими средствами JS.
  • Сборка с помощью Create React App.
  • Деплой готовой сборки на Firebase Hosting.

Как установить?

  • Скопировать содержимое репозитория в рабочую папку
  • В терминале выполнить команду npm install
  • Затем дополнительно установить StyledComponents командой npm install styled-components
  • После установки модулей запустить development mode командой npm start
  • Открыть http://localhost:3000 для просмотра в браузере
  • Для сборки приложения команда npm run build. Готовый проект будет в папке build рабочей директории