Manor

Магазин товаров для дома в Льюисе: каталог с разделами и сортировкой по цене, материал у каждой вещи, корзина.

Живая версия: https://pafuluofu-dev.github.io/manor-store/

В портфолио: https://verno-dev.com/manor-store/index.html

О проекте

Магазин товаров для дома в Льюисе: мебель для сидения, свет, столы и предметы интерьера. Каталог фильтруется по разделам и сортируется по цене, у каждой вещи указан материал, а корзина держит количество и сумму заказа. Рядом с ассортиментом — условия доставки и возврата.

Как сделано

• Стек — React 18 и Vite, стили на Sass — без UI-библиотек и CSS-фреймворков
• Структура — секция страницы и переиспользуемый компонент — каждый своей папкой с .jsx и .scss рядом; контент вынесен в src/data, расчёты — в src/utils
• БЭМ — именование блок__элемент--модификатор, плоские одноклассовые селекторы, вложенность не глубже трёх уровней
• Семантика — header/nav/main/section/footer, один h1 на страницу, списки списками, осмысленные alt
• Адаптив — mobile-first, сетки на auto-fit/minmax, флюидная типографика на clamp()
• Доступность — фокус через :focus-visible, aria-атрибуты у меню и диалогов, движение выключается при prefers-reduced-motion
• Корзина — количества и суммы считает src/utils/basket.js, выдвижная панель — отдельный компонент
• Разделы — полоса категорий прокручивается по горизонтали и не ломает сетку на узком экране
• Сортировка — порядок по цене задаётся нативным <select> — доступно и без своего выпадающего списка

Запуск

npm install
npm run dev

Сборка:

npm run build

Результат — в dist/. На GitHub Pages его собирает и публикует .github/workflows/pages.yml при каждом пуше в main.

Автор

Георгий Павлов — вёрстка и фронтенд. Другие работы и контакты: https://verno-dev.com