stalink456/a-store

Магазин A-Store

Пример интернет-магазина мерча Альфа-Банка.

Используемый стек

1. React
2. TypeScript
3. Redux Toolkit + Redux-Saga
4. Jest + React Testing Library
5. React Router v6
6. Error Boundary
7. React-Hook-Form + yup
8. React lazy laoding
9. Lazy loading image
10. Адаптивная верстка
11. Webpack
12. ESLint

Запуск проекта

yarn && yarn start

Страницы проекта

Каждая страница содержит в себе хэдер с выезжающим меню и футер. Если в корзине лежит какой-то товар, отображается иконка с корзиной.

Главная страница (компонент Main)

На главной странице располагаются две каритинки с ссылками, ведущие на страницы:

• "Сделано в Альфе" (компонент MadeInAlfa) с эндпоинтом /made-in-alfa
• "Свой дизайн" (компонент YourDesign) с эндпоинтом /your-design

Сделано в Альфе (компонент MadeInAlfa)

При переходе на эту страницу происходит GET-запрос к нашей апишке с эндпоинтом /made-in-alfa.

200 ответ

[
{
"id": 0,
"preview": "http://qa-games.ru/astore/public/images/15932051.jpeg",
"title": "Рюкзак «Для умных и свободных»",
"description": "Поместится и ноутбук, и худи. У рюкзака широкие красные лямки и светоотражающие элементы — вас заметят и днём, и ночью.",
"price": 4999,
"availability": true
},
{
"id": 1,
"preview": "http://qa-games.ru/astore/public/images/68519498.jpeg",
"title": "Футболка Для умных и свободных",
"description": "Мягкая хлопковая футболка для тех, кто любит быть в центре внимания. Состав и способ ухода вынесли на самое видное место.",
"price": 1999,
"availability": true
},
{
"id": 2,
"preview": "http://qa-games.ru/astore/public/images/77117755.jpeg",
"title": "Блокнот Для умных и свободных",
"description": "Под твёрдой обложкой — 300 белых страниц с градиентом. Должно хватить для небольшого романа или рабочих записей.",
"price": 1499,
"availability": true
},
{
"id": 3,
"preview": "http://qa-games.ru/astore/public/images/15932051.jpeg",
"title": "Чехол с кардхолдером",
"description": "Чтобы карта всегда была под рукой. К чехлу мы сделали яркий стикер — вам решать, клеить его или нет.",
"price": 799,
"availability": false
},
{
"id": 4,
"preview": "http://qa-games.ru/astore/public/images/56369345.jpeg",
"title": "Экоручка",
"description": "Мы сделали ручки из переработанной офисной бумаги. У нас всё идёт в дело.",
"price": 99,
"availability": true
}
]

После успешного ответа от апи появляется список с карточками товаров, кликнув по нужной карточке произойдет переход на страницу "Товара" (компонент Product) с эндпоинтом /product/id_товара

Свой дизайн (компонент YourDesign)

При переходе на эту страницу происходит GET-запрос к нашей апишке с эндпоинтом /your-design.

200 ответ

[
  {
      "id": 0,
      "title": "Бархатные стикеры",
      "description": "Тактильный антистресс",
      "products": [
          {
              "id": 5,
              "preview": "http://qa-games.ru/astore/public/images/43306375.jpeg",
              "title": "Худи с бархатными стикерами",
              "description": "Выберите стикер, а мы перенесём его на ткань — как на фото. Одежду можно стирать в машинке при 30 °C, вывернув наизнанку. Гладить — с внутренней стороны. Посмотреть и потрогать все стикеры можно в A-Store на Технопарке. А ещё там можно добавить сразу несколько стикеров на одну вещь.",
              "price": 4199,
              "availability": true,
              "subtitle": "Выберите один из восьми стикеров"
          },
          {
              "id": 6,
              "preview": "http://qa-games.ru/astore/public/images/61646585.png",
              "title": "Футболка с бархатными стикерами",
              "description": "Выберите стикер, а мы перенесём его на ткань — как на фото. Одежду можно стирать в машинке при 30 °C, вывернув наизнанку. Гладить — с внутренней стороны. Посмотреть и потрогать все стикеры можно в A-Store на Технопарке. А ещё там можно добавить сразу несколько стикеров на одну вещь.",
              "price": 1799,
              "availability": true,
              "subtitle": "Все варианты — внутри"
          },
          {
              "id": 7,
              "preview": "http://qa-games.ru/astore/public/images/51168667.png",
              "title": "Футболка оверсайз с бархатными стикерами",
              "description": "Выберите стикер, а мы перенесём его на ткань — как на фото. Одежду можно стирать в машинке при 30 °C, вывернув наизнанку. Гладить — с внутренней стороны. Посмотреть и потрогать все стикеры можно в A-Store на Технопарке. А ещё там можно добавить сразу несколько стикеров на одну вещь.",
              "price": 1799,
              "availability": true,
              "subtitle": "Нажмите, чтобы выбрать стикер"
          }
      ]
  }
]

После успешного ответа от апи появляется список групп с карточками товаров, кликнув по нужной карточке произойдет переход на страницу "Товара" (компонент Product) с эндпоинтом /product/id_товара

Товар (компонент Product)

При переходе на эту страницу происходит GET-запрос к нашей апишке с эндпоинтом, например, id = 1 /product/id.

200 ответ

{
"id": 1,
"preview": "http://qa-games.ru/astore/public/images/68519498.jpeg",
"images": [
"http://qa-games.ru/astore/public/images/68519498.jpeg",
"http://qa-games.ru/astore/public/images/56653281.jpeg",
"http://qa-games.ru/astore/public/images/22582542.jpeg"
],
"title": "Футболка Для умных и свободных",
"description": "Мягкая хлопковая футболка для тех, кто любит быть в центре внимания. Состав и способ ухода вынесли на самое видное место.",
"sizes": [
"S",
"M",
"L",
"XL"
],
"colors": [
"white",
"black",
"red"
],
"price": 1999,
"availability": true
}

После чего у нас отображаются картинки с нужным товаром и форма добавления в корзину. Если нам понравился товар и мы заполнили форму, то после нажатия кнопки "В корзину" у нас появится компонент "Корзина" (Cart) на странице.

Контакты (компонент Contacts)

На этой странице отображаются контакты для связи, часы работы и карта пункта выдачи товара

Компоненты проекта

Корзина (компонент Cart)

При нажатии на данный компонент откроется side-menu, где будет отображен товар с картинкой, описанием, количеством, суммой и общей стоимостью покупок. Также в этом компоненте присутствует кнопка "Дальше", при нажатии которой будет открыто модальное окно с компонентом "Заказ" (Order).

Заказ (компонент Order)

В этом компоненте имеется форма заказа, описание товара и кнопка "Дальше". Если:

• форма заполнена неправильно, то в соответствующих полях будет подсказка с примером, как правильно заполнить то или инное поле.
• форма заполнена правильно, тогда выполняется POST-запрос к нашей апи с эндпоинтом /create-order и

тело запроса

{
"address": "Ул. Ленина",
"comment": "",
"deliveryType": "Доставка по России — 350₽",
"email": "example@mail.ru",
"name": "Василий Иванович",
"paymentType": "Банковская карта",
"phone": "+7 (000) 000-00-00",
"promocode": "sale500",
"isAgree": true,
"products": [
  {
    "color": null,
    "totalCount": 1,
    "id": "1",
    "preview": "http://qa-games.ru/astore/public/images/61646585.png",
    "price": 1799,
    "size": null,
    "stickerName": null,
    "title": "Футболка с бархатными стикерами",
    "totalPrice": 1799
  }
]
}

При успешном запросе, мы получим 200 ответ с текстом "Заказ успешно создан!", который будет отображен на странице в виде нотификации. Если произойдет какая-то ошибка, то отобразится нотификация с текстом "Произошла ошибка".