https://github.com/ashenoooone/audio-store

Интернет-магазин для продажи наушников
https://github.com/ashenoooone/audio-store

css react typescript zustand

Last synced: about 2 months ago
JSON representation

Интернет-магазин для продажи наушников

• Host: GitHub
• URL: https://github.com/ashenoooone/audio-store
• Owner: ashenoooone
• Created: 2024-03-29T09:36:35.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-31T13:19:57.000Z (10 months ago)
• Last Synced: 2024-04-01T10:52:13.904Z (10 months ago)
• Topics: css, react, typescript, zustand
• Language: TypeScript
• Homepage:
• Size: 4.25 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## О проекте

Проект представляет из себя магазин по продаже наушников.

## Список выполненных задач

1. [x] Разработка с использованием React, React Router, с двумя страницами интернет-магазина: каталог товаров и корзина.

2. [x] Реализация удобного и масштабируемого роутинга.

3. [x] Все элементы ссылок и иконок отзываются при наведении на них.

4. [x] Реализация перехода с корзины обратно на главную страницу через логотип или кнопку возврата.

5. [x] При нажатии на кнопку "Купить" в карточке товара на первой странице увеличивается счетчик товаров рядом с иконкой корзины.

6. [x] При изменении количества товаров в корзине обновляется сумма и количество товаров.

7. [x] Хранение данных о каждом товаре в виде элемента массив

8. [x] Возможность удалять карточку товара из корзины товаров;

9. [x] Добавил интернационализацию (смену языков)

10. [x] Адаптивность на все устройства

11. [x] Реализовать «Переход к оформлению» на отдельную страницу с формой оплаты или

   модальное окно с формой оплаты;

12. [x] Реализовать модальное окно с подробной информацией о товаре, добавить в карточку

    иконку просмотра на свой выбор, которая будет открывать данное модальное окно

13. [x] Добавил страницу избранное

14. [x] Страница "Условия использования"

15. [x] Страница "Контакты"

## Роутинг

Основной файл для роутинга - ```src/shared/configs/routerConfig/routerConfig.ts```

В нем находятся следующие переменные: 

```tsx

 // енам для хранения всех роутов

export enum Routes {

  MAIN = 'main',

  CART = 'cart',

  FAVOURITES = 'favourites',

  TERMS = 'terms',

  CONTACTS = 'contacts',

  NOT_FOUND = 'not_found',

}

// объект для хранения путей для роутов

export const RoutesPaths: Record = {

  [Routes.CART]: '/cart',

  [Routes.FAVOURITES]: '/favourites',

  [Routes.TERMS]: '/terms',

  [Routes.CONTACTS]: '/contacts',

  [Routes.MAIN]: '/',

  [Routes.NOT_FOUND]: '*',

};

// объект для хранения настроек роутов

export const RoutesConfig: Record = {

  [Routes.MAIN]: {

    path: RoutesPaths.main,

    element: ,

  },

  [Routes.CONTACTS]: {

    path: RoutesPaths.contacts,

    element: ,

  },

  [Routes.TERMS]: {

    path: RoutesPaths.terms,

    element: ,

  },

  [Routes.CART]: {

    path: RoutesPaths.cart,

    element: ,

  },

  [Routes.FAVOURITES]: {

    path: RoutesPaths.favourites,

    element: ,

  },

  [Routes.NOT_FOUND]: {

    path: RoutesPaths.not_found,

    element: ,

  },

};

```

Далее в файле ```src/app/providers/RouterProvider/ui/RouterProvider.tsx``` создаем роуты следующим образом

```tsx

export const RouterProvider = () => {

  return (

    

      {Object.values(RoutesConfig).map((route) => {

        return (

          

        );

      })}

    

  );

};

```

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

## Запуск в режиме разработки

1. Установите все зависимости, запустив команду:

```bash

npm install

```

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

```bash

npm run dev

```

## Запуск в продакшн режиме

1. Соберите проект, выполните следующие команды:

```bash

npm run build

```

Эта команда сначала выполнит компиляцию TypeScript кода, а затем соберет проект для продакшн с использованием Vite.

2. Запустите предпросмотр собранного проекта:

```bash

npm run preview

```

## Зависимости

Вот основные зависимости проекта:

- `react`: 18.2.0

- `react-dom`: 18.2.0

- `react-router-dom`: 6.22.3

- `zustand`: 4.5.2

- `typescript`: 4.5.2

## Архитектура

При построении приложения ориентирвоался на FSD. Однако в целях экономия времени некоторые моменты игнорировал.

Есть 6 основных слоев

1. app

2. entities

3. features

4. pages

5. shared

6. widgets

Каждый слой состоит из слайсов. Например

```

Entities ( слой )

    └

    cart ( слайс )

      └ model ( бизнес-логика слайса, напр.: стор, типы, селекторы )

          └ selectors.ts

          └ store.ts

          └ types.ts

      └ ui ( все необходимые юай компоненты для слайса )

         └ CartIcon

         └ CartList

         └ CartTotal

         └ CartItem

               └ CartItem.tsx

               └ CatrItem.module.css

      └ index.ts (паблик апи для слайса)

```

### shared 

Cлой кода общего использования

``shared/assets`` - место, куда складывались все изображения\svg

``shared/configs`` - различные конфиги (интернационализации и роутера)

``shared/lib`` - сторонние функции, в рамках проекта там хранится функция для создания селекторов для сторов

``shared/ui`` - общие юай компоненты для всего приложения

### app

настройки, стили и провайдеры для всего приложения.

### entities

бизнес-сущности. (например, cart, product, favourites)

### features

Действия, несущие бизнес-ценность. Именно этот слой в данном проекте был упрощен и туда была помещена лишь модалка для оплаты корзины. Многие другие действия, например, добавить элемент в корзину/избранное я решил туда не добавлять, чтобы не усложнять проект

### widgets

композиционный слой для соединения сущностей и фич в самостоятельные блоки

### pages

композиционный слой для сборки полноценных страниц