Belle Robe — каталог женской одежды на React
Чистый каталог одежды: крупные фотографии, коллекции, артикулы, размеры и цены — и ничего лишнего между вещью и решением её купить. Собран на React и Tailwind, с современным дизайном без шаблонных приёмов, и с админкой, в которой владелец сам ведёт ассортимент.
Проект открыт: hadija.store — можно открыть и посмотреть своими глазами.
Как это выглядит
Что умеет продукт
- Чистая витрина: фотография, артикул, цена, размеры — и ничего лишнего
- Пять коллекций с переключением между ними без перезагрузки страницы
- Несколько фотографий на позицию с быстрым просмотром
- Фотографии конвертируются в WebP прямо при загрузке через админку
- Ленивая загрузка картинок и зарезервированное место под них: сетка не прыгает
- Админка: добавить товар, отредактировать, удалить — без разработчика
- Крупная сетка, рассчитанная в первую очередь на телефон
Чистый каталог и свежий дизайн
В одежде решает изображение, поэтому вся вёрстка подчинена ему: крупная сетка, воздух между карточками, минимум подписей. Всё, что нужно для решения, помещается в три строки — артикул, цена, размеры, — а остальное делает фотография.
Дизайн собран с нуля, а не взят готовой темой: своя типографика, своя сетка, аккуратные состояния наведения и переходы между коллекциями. Интерфейс написан на React, оформление — на Tailwind, поэтому вид остаётся одинаковым на всех экранах, а новая коллекция не требует переверстки.
Картинки: WebP при загрузке и ленивая подгрузка
Каталог одежды — это десятки крупных фотографий, и без обработки он открывался бы с телефона неприлично долго. Поэтому конвертация встроена в саму загрузку: снимок, добавленный через админку, тут же превращается в WebP и ужимается до разумного веса. Владельцу не нужно ничего готовить заранее — можно грузить прямо то, что пришло с фотосессии.
На витрине картинки подгружаются по мере прокрутки, а место под каждую зарезервировано ещё до того, как она пришла: сетка не дёргается и не перескакивает под пальцем. В сумме витрина открывается быстро даже в мобильной сети.
Админка: товары под полным контролем
Ассортимент ведёт владелец, а не мы. В админке товар добавляется, редактируется и удаляется целиком: фотографии, артикул, цена, доступные размеры, коллекция. Ушла позиция — убрали, приехала новая — добавили, поменялась цена — поправили; всё это видно на витрине сразу, без выкладки и без разработчика.
Интерфейс админки сознательно простой: полей ровно столько, сколько есть у вещи, и ни одного технического. Это важнее, чем кажется, — каталог имеет смысл ровно до тех пор, пока он актуален, а актуальным он остаётся только там, где обновить его не страшно и не долго.
Как это устроено
- 1 Интерфейс React и Tailwind: компоненты вместо страниц, переключение коллекций без перезагрузки
- 2 Загрузка Фотография, загруженная через админку, тут же конвертируется в WebP и ужимается
- 3 Витрина Крупная сетка с ленивой загрузкой: картинка приходит, когда до неё долистали
- 4 Карточка Артикул, цена, размеры и несколько кадров на модель — всё, что нужно для решения
- 5 Заказ Из карточки — сразу в переписку, где заказ и оформляется
На чём собрано
Нужно похожее?
Расскажите, что у вас происходит сейчас. Разбор задачи и оценка — бесплатно и ни к чему не обязывают.