/marketCart

Primary LanguageTypeScript

Профильное задание отбора на стажировку в команду 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 карточки товара, чтобы изменить её данные.