Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tatyanazakiryanova/tea-shop
Online tea store. React | Redux
https://github.com/tatyanazakiryanova/tea-shop
api hooks react redux-toolkit scss typescript
Last synced: about 2 months ago
JSON representation
Online tea store. React | Redux
- Host: GitHub
- URL: https://github.com/tatyanazakiryanova/tea-shop
- Owner: TatyanaZakiryanova
- Created: 2024-03-29T01:08:39.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T21:15:03.000Z (about 2 months ago)
- Last Synced: 2024-11-06T21:39:04.755Z (about 2 months ago)
- Topics: api, hooks, react, redux-toolkit, scss, typescript
- Language: TypeScript
- Homepage: https://teaonlinestore.netlify.app/
- Size: 20.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tea Shop
Интернет-магазин чая.
## Deployment & Live Demo
[Deploy](https://teaonlinestore.netlify.app/)
## Technologies Used
- Typescript
- React
- React-Redux, Redux Toolkit (createAsyncThunk для асинхронных запросов)
- SCSS (Sass)
- Custom React Hooks
- React-router-dom
- Vite
- ESLint, Prettier
- Netlify
## Features
- Список товаров с указанием изображений и информации
- Сортировка выдачи по типу чая, названию, цене, рейтингу
- Поиск чая
- Пагинация
- Возможность выбора веса товара при добавлении в корзину и вычисление его цены в зависимости от веса
- Кастомный хук useFetchTea для получения данных о конкретном чае с помощью его id
- Кастомный хук useAddToCart для добавления чая в корзину
- Собственный UI
## More details
### Routing
- Главная страница с товарами
- Страница корзины
- Страница конкретного чая
- Страница "Not found"
### State Management
- slices для организации состояний
- createAsyncThunk для запросов к API
### Loading & Error Handling
- Скелетон при загрузке товаров
- Спиннер при загрузке страницы товара и корзины
- Сообщение, если товары не найдены
### Performance Optimizations
- Lazy Loading страниц
### Styling and Responsiveness
- Адаптивная вёрстка до 360px ширины экрана (SCSS-модули)
## How to start project
in the project directory enter:
```js
npm install
```
and then run in dev mode:
```js
npm run dev
```
build the project:
```js
npm run build
```
production mode:
```js
npm run serve
```