О проекте

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

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

1. Разработка с использованием React, React Router, с двумя страницами интернет-магазина: каталог товаров и корзина.
2. Реализация удобного и масштабируемого роутинга.
3. Все элементы ссылок и иконок отзываются при наведении на них.
4. Реализация перехода с корзины обратно на главную страницу через логотип или кнопку возврата.
5. При нажатии на кнопку "Купить" в карточке товара на первой странице увеличивается счетчик товаров рядом с иконкой корзины.
6. При изменении количества товаров в корзине обновляется сумма и количество товаров.
7. Хранение данных о каждом товаре в виде элемента массив
8. Возможность удалять карточку товара из корзины товаров;
9. Добавил интернационализацию (смену языков)
10. Адаптивность на все устройства
11. Реализовать «Переход к оформлению» на отдельную страницу с формой оплаты или модальное окно с формой оплаты;
12. Реализовать модальное окно с подробной информацией о товаре, добавить в карточку иконку просмотра на свой выбор, которая будет открывать данное модальное окно
13. Добавил страницу избранное
14. Страница "Условия использования"
15. Страница "Контакты"

Роутинг

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

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

 // енам для хранения всех роутов
export enum Routes {
  MAIN = 'main',
  CART = 'cart',
  FAVOURITES = 'favourites',
  TERMS = 'terms',
  CONTACTS = 'contacts',
  NOT_FOUND = 'not_found',
}
// объект для хранения путей для роутов
export const RoutesPaths: Record<Routes, string> = {
  [Routes.CART]: '/cart',
  [Routes.FAVOURITES]: '/favourites',
  [Routes.TERMS]: '/terms',
  [Routes.CONTACTS]: '/contacts',
  [Routes.MAIN]: '/',
  [Routes.NOT_FOUND]: '*',
};
// объект для хранения настроек роутов
export const RoutesConfig: Record<Routes, RouteProps> = {
  [Routes.MAIN]: {
    path: RoutesPaths.main,
    element: <MainPage />,
  },
  [Routes.CONTACTS]: {
    path: RoutesPaths.contacts,
    element: <ContactsPage />,
  },
  [Routes.TERMS]: {
    path: RoutesPaths.terms,
    element: <TermsPage />,
  },
  [Routes.CART]: {
    path: RoutesPaths.cart,
    element: <CartPage />,
  },
  [Routes.FAVOURITES]: {
    path: RoutesPaths.favourites,
    element: <FavouritesPage />,
  },
  [Routes.NOT_FOUND]: {
    path: RoutesPaths.not_found,
    element: <ErrorPage />,
  },
};

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

export const RouterProvider = () => {
  return (
    <Routes>
      {Object.values(RoutesConfig).map((route) => {
        return (
          <Route
            key={route.path}
            path={route.path}
            element={route.element}
          />
        );
      })}
    </Routes>
  );
};

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

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

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

npm install

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

npm run dev

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

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

npm run build

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

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

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

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