Проект: Shop

Описание

Мини приложение для демонстрации навыков разраотки e-comerce приложений.
Приложение состоит из каталога товаров и корзины.
Корзина содержит в себе помещенные в неё товары, знает общие кол-во товаров и сумму. При изменении содержания корзины пересчитывается количество товаров и общая стоимость, а так же меняется количество товара доступное для дальнейшего заказа.
При нажатии на кнопку "оплатить" появляется модальное окно с прогресс баром, который заполняется от 0 до 100%, по достижении 100% в модальном окне появтся информация о приобретенных товарах и общей сумме.

Проект разработак как с использованием Redux Toolkit, так и с использованием Effector.
Для просмотра кода с использованием Redux Toolkit перейти в ветку redux.

git checkout redux

Архитектура проекта

Архитектура: Feature-Sliced Design

• Shared — переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса.
• Entities (сущности) — бизнес-сущности (например, User, Product или Order).
• Features (фичи) — взаимодействия с пользователем, действия, которые несут бизнес-ценность для пользователя.
• Widgets (виджеты) — композиционный слой для соединения сущностей и фич в самостоятельные блоки.
• Pages (страницы) — композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов.
• Processes — сложные сценарии, покрывающие несколько страниц (например, аутентификация).
• App — настройки, стили и провайдеры для всего приложения.

Stacks:

• TypeScript
• React
• React-Router v.6
• Redux Toolkit
• Effector
• Axios
• SCSS-module
• Eslint
• Node v18.x

Быстрый старт

1. Склонировать проект на свой компьютер

git clone https://github.com/SergeyKazarinov/unicorn-test.git

2. Установить зависимости

npm install

3. Запустить проект (запуск сервера + frontend проекта в dev режиме)

npm run start:dev