Профильное задание отбора на стажировку в команду VK Market

Ссылка на реализацию: https://gleb001.github.io/marketCart/build/

Задание

Разработать функционал корзины для интернет-магазина, который позволяет пользователям удалять и изменять количество товаров в корзине (от 1 до 10 штук).

Сборка и отладка проекта

PS: Данная сборка не настроена в codesandbox. Приношу свои извинения...

Если вы собираетесь внести определённые правки в проект, то вам потребуется сделать следующее:

Установить все зависимости проекта (указанные в package.json):

$ npm install

Выполнить сборку проекта, предназначенную для удобного внесения изменений в проект:

$ npm run dev

После того, как вы внесли все необходимые изменения, соберите проект:

$ npm run prod

Реализация

Основные технологии, используемые в проекте: React, Mobx, VK UI и TypeScript.

Методология разработки проекта: Feature-Sliced Design.

Данные для корзины товаров взяты из: https://dummyjson.com/carts/1.

Примечание к реализации

Пользовательский опыт

В ходе разработки функционала корзины товаров было принято решение предоставить пользователю возможность "выбирать" товары, которые он собирается заказать или, наоборот, удалить из корзины.

Описание:

Если пользователь захочет отложить заказ товара, то он просто его не отметит (не поставит галочку) перед отправлением запроса на оформление заказа.
Если пользователь захочет удалить несколько товаров из корзины, то он может их также отметить (поставить галочку) и удалить кнопкой в шапке корзины.

Хранение данных товаров корзины в стейт-менеджере

Данные карточек товаров корзины хранятся в стейт-менеджере в виде коллекции Map. Основная причина - скорость обращения к данным для их изменения. Так как в Map данные хранятся в виде пар ключ -> значение, то нам достаточно знать id карточки товара, чтобы изменить её данные.