Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mirror45/card-product

Card-product - это SPA-приложение с роутингом и каталогом. На странице с товаром реализована галерея с помощью Swiper а так же accordion , можно выбрать кол-во товаров для покупки и оформить заказ.
https://github.com/mirror45/card-product

react react-hooks react-router-dom storybook styled-components swiper-js

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/mirror45/card-product
Owner: Mirror45
Created: 2024-07-13T22:36:28.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-09-24T11:26:10.000Z (about 2 months ago)
Last Synced: 2024-10-13T21:44:00.281Z (about 1 month ago)
Topics: react, react-hooks, react-router-dom, storybook, styled-components, swiper-js
Language: JavaScript
Homepage: https://card-product-mirror45.netlify.app/
Size: 374 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Проект «Card-product»

## О проекте

«Card-product» - это SPA приложение для покупки товаров.
- Страница каталога, на которой можно выбрать нужный товар.
- Страница товара, на которой имеется галерея, реализована с помощью Swiper, выбор кол-ва товара для покупки, описание и комментарии реализованные с помощью accordion.
- При нажатии на кнопку «Купить» открывается окно в котором можно указать свои данные.

### Типовые задачи, которые пришлось решить во время разработки:

- Проект являеться Single Page Application (SPA).
- Создание React-компонентов на JSX.
- Стилизация компонентов на CSS-in-JS с использованием Styled-components.
- Создание интерактивных компонентов.
- Настройка роутинга для перехода между страницами.
- Сборка Storybook.

## Установка 🛠

1. Сначала требуется склонировать проект на ваш пк

```
git clone [email protected]:Mirror45/card-product.git
```

2. Переходим в только что склонированный репозиторий

```
cd card-product
```

3. Устанавливаем все зависимости

```
npm i
```

4. Запускаем проект на локальном хосте

```
npm start
```