"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 рабочей директории