Один источник состояния
Цена и дальность выводятся из выбранных опций. Отдельных копий этих значений в состоянии нет, поэтому цвет, батарея и итог не расходятся.
01 / Продукт / PORTFOLIO CONCEPT
VOLTОдин велосипед. Два сценария.
Связать внешний вид, цену и условную дальность велосипеда в одном предсказуемом конфигураторе.
volt.interaction
ЗАПИСЬ СЦЕНАРИЯ / БЕЗ ЗВУКАЗапись работающего интерфейса. Видео загружается только после нажатия кнопки; сценарий описан ниже текстом.
РОЛЬ И КОНТЕКСТОт структуры
От структуры
до взаимодействия.
Учебный проект, созданный совместно с AI-ассистентом. Работа включала визуальное направление, адаптивную вёрстку, клиентскую логику, автоматические проверки и публикацию. Это не коммерческий заказ; клиенты и бизнес-результаты не заявляются.
Архитектура
Next.js App Router и статические страницы, React для интерактивных сценариев, SCSS Modules и Framer Motion. Контент и чистые расчёты отделены от компонентов.
- 01Данные комплектаций
- 02Чистые расчёты
- 03Состояние конфигуратора
- 04SVG, итог и ссылка
Решения и компромиссы
Независимые варианты A и B
Сравнение сохраняет снимки комплектаций. Последующие изменения текущей сборки не меняют сохранённые варианты; любой из них можно вернуть в конфигуратор.
Сопоставимые условия
Помощь и рельеф входят в снимок. Если условия различаются, интерфейс предупреждает об этом и позволяет назначить обоим вариантам одинаковые значения.
Один конкретный сценарий
Сохрани базовый вариант A, выбери терракоту и большую батарею, сохрани B. В сравнении появится разница в цене и условной дальности. Применение A восстановит исходные опции.
Повторить в демоКлючевые части кода
content/bike.jslib/compare-configurations.jscomponents/Configurator.jsxcomponents/ConfigurationCompare.jsx
Границы реализации
VOLT One — вымышленная модель. Дальность считается упрощённо, без испытаний и учёта веса, погоды и давления в шинах. Покупки, оплаты и настоящего бронирования нет.
Браузерные проверки выполняются в CI. Реальные устройства и скринридеры требуют отдельного ручного прохода.