Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergeykazarinov/shop
Мини приложение для демонстрации навыков разраотки e-comerce приложений.
https://github.com/sergeykazarinov/shop
axios effector eslint react redux-toolkit scss-modules typescript typrescript
Last synced: 15 days ago
JSON representation
Мини приложение для демонстрации навыков разраотки e-comerce приложений.
- Host: GitHub
- URL: https://github.com/sergeykazarinov/shop
- Owner: SergeyKazarinov
- Created: 2023-06-24T05:21:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-26T13:36:43.000Z (8 months ago)
- Last Synced: 2024-11-17T13:37:27.033Z (3 months ago)
- Topics: axios, effector, eslint, react, redux-toolkit, scss-modules, typescript, typrescript
- Language: TypeScript
- Homepage:
- Size: 4.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проект: Shop
## Описание
Мини приложение для демонстрации навыков разраотки e-comerce приложений.
Приложение состоит из каталога товаров и корзины.
Корзина содержит в себе помещенные в неё товары, знает общие кол-во товаров и сумму. При изменении содержания корзины пересчитывается количество товаров и общая стоимость, а так же меняется количество товара доступное для дальнейшего заказа.
При нажатии на кнопку "оплатить" появляется модальное окно с прогресс баром, который заполняется от 0 до 100%, по достижении 100% в модальном окне появтся информация о приобретенных товарах и общей сумме.
Проект разработак как с использованием Redux Toolkit, так и с использованием Effector.
Для просмотра кода с использованием Redux Toolkit перейти в ветку redux.
```bash
git checkout redux
```
## Архитектура проекта
Архитектура: [Feature-Sliced Design](https://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. Склонировать проект на свой компьютер
```bash
git clone https://github.com/SergeyKazarinov/unicorn-test.git
```
2. Установить зависимости
```bash
npm install
```
3. Запустить проект (запуск сервера + frontend проекта в dev режиме)
```bash
npm run start:dev
```