Готовый клон конфигуратора, здесь дается полное описание: работы, функциональных особенностей, используемых библиотек и применяемых подходов при разработке. Также представлены рекомедации по интеграции в крупные проекты и варианты дополнения функционала. Итак, основные критерии, заявленные в переписке:

• Клонирование функционала с учетом присутствия двух страниц;
• Маршрутизация;
• Миграция сохранения данных в redux;
• Использование bootstrap;
• Возможность дополнения функционала;
• Стилизация несильно важна;

Считаю, что данные пункты оказались выполнены, произведу аргументацию после описания того, как это всё запускается и какие средства использовались

В данном проекте были использованы следующие зависимости:

• Для redux: redux + redux-persist (для хранения данных после перезагрузки страницы) + @reduxjs/toolkit (для оптимизированного использования redux сущностей)
• Для маршрутизации: react-router + connected-react-router (Для полной интеграции с redux-стором)
• Для стилизации: bootstrap + react-bootstrap (Для поддержания компонентного подхода к описанию компонентов)

При разработке использовал темплейт create-react-app (как и в оригинале приложения), для запуска необходимо использовать npm i, затем npm run start, для переноса приложения на кастомный конфиг - просто перенести код из src и ресурсы из public, нет никакой разницы, cra только ради шаблона для демонстрации.

Так выглядит структура самого приложения, далее описание каждой папки:

• public - хранение всех ассетов (изображения, иконки) для конфигуратора
• src/components - основные react-компоненты приложения
• src/layouts - слои-обертки, используются в app.js для добавления функционала по принципу SRP в декларативном стиле
• src/reduxSetup/*slice - основная конфигурация редакса, использовались так называемые "слайсы" - смесь: редюсер + экшны + экшн тайпы в оптимизированном виде, собственность либки "redux-toolkit", очень полезная штука, в официальном стайл-гайде редакса советуют использовать именно её из-за оптимизаций и лаконичности использования, почитать об этом - сюда тык, - селекторы вынесены в доп файлы в тех же папках, что и слайсы. Из слайсов идет на экспорт редюсер, который добавляется в основной редюсер приложения, находящийся в src/reduxSetup/rootSlice/index.js
• steps/* - основной "мозг" по генерации роутов относительно конфига с шагами конфигуратора, находятся файлы, связанные с этим. Маршруты генерируются автоматически, логика прописана в ./stepsContainer.jsx

А так выглядит структура redux стора приложения:

В сторе хранятся следующие данные (практически вся логика):

1. Конфиги моделей машин (models) - содержит всю информацию о машинах, с полями для информации (ими заполняются данные на странице)
2. Текущий конфиг пользовательского выбора (currentConfig) - поля со значениями текущего выбора. Хранит данные о пользовательском выборе по каждой машине (целесообразно, чтобы не слетал конфиг при смене машины) + текущий на конфигурации автомобиль
3. Конфиг шагов (steps) - основной конфиг для конструирования страниц маршрутизации (шагов), содержит информацию о текущем шаге + информацию о всех шагах конструктора.

1. Добавить rootSlice редюсер в combineReducers верхнего уровня
2. Переписать селекторы rootSlice на поле в стейте верхнего уровня
3. Проставить относительные url, если используется react-router в верхнем уровне

Всё сводится к тому, какой функционал хочется добавить

1. Добавляете новый шаг в reduxConfig/stepsSlice
2. Прописываете необходимые поля - name, prevStep, nextStep и те, которые нужны для разметки
3. Обновляете prev и next для шагов, к которым будете подцеплять ваш
4. Система автоматически простроит маршрут в зависимости от имени и обновит ссылки в компонентах

1. Добавляете новую характеристику в модель в data.js
2. Добавляете новую характеристику в summaryFields в data.js
3. Добавляете новую характеристику в конфиг в reduxConfig/currentConfigSlice
4. Добавляете опцию в шаг, в котором хотите менять данную характеристику (в массив settings)
5. Обновляете селекторы

Всё описано в компоненте src/components/configuration/summary.jsx связка селекторов getSummaryInfo и getCurrentPrice дает полную информацию о пользовательском выборе (включая цену, названия элементов и итог). Всё это можно легко адаптировать через изменение селекторов.

Всё из-за redux-persist, он сохраняет текущее состояние стора в localStorage для того, чтобы не потерялись изменения. Для обновления конфигурации стора в браузере нужно или отключить эту библиотеку (отсоединить зависимости в reduxConfig/store.js), или удалить данные в localStorage браузера.

Согласно ТЗ - на ваше усмотрение, использовал по максимуму bootstrap 5 в базовой его стилизации, кастомизируйте, как угодно, layout на нем