## Overview
- Official website: [https://e-shopbee.vercel.app](https://e-shopbee.vercel.app)
- Author: Nguyễn Hoàng Lâm ([@lamhoang1256](https://github.com/lamhoang1256))

## Resources
```
API NodeJS: https://github.com/lamhoang1256/shopbee-api
Heroicons: https://heroicons.com
Google Font: https://fonts.google.com/specimen/Inter
```
## Main technology used

- React, Typescript
- Tailwindcss
- Zustand (State management)
- Axios (Support fetching data)
- Swiper (Slider), react-modal
- Formik , yup (Validation)
- React-toastify, sweetalert2 (Message UI)
- Socket.io-client (Support real time notify message)
- React-helmet-async (Optimize SEO)
- Other: react-router-dom, uuid, react-lazy-load-image-component, query-string, jwt-decode, react-credit-cards, react-quill, ...

## Features

- Update

## Environment Variables

```
# See: https://github.com/lamhoang1256/shopbee-api
REACT_APP_API_URL =

# See: https://cloudinary.com/documentation
REACT_APP_CLOUDINARY_API = 

# See: https://cloudinary.com/documentation/upload_presets
REACT_APP_CLOUDINARY_UPLOAD_PRESET = 

REACT_APP_API_ADMINISTRATION_URL = https://vietnamese-administration.up.railway.app
```

## Screenshots

<details>
 <summary>Home Page</summary>
 <div>
 
 ![homepage](https://user-images.githubusercontent.com/61537853/191778840-f6a056ad-f1f4-4f5c-b8fd-a415d5191ad7.png)
 </div>
</details>
<details>
 <summary>Product Details Page</summary>
 <div>

![product-detail](https://user-images.githubusercontent.com/61537853/191779641-26c3ca3d-6708-49d6-ba33-5a7bc560afc0.png)
 </div>
</details>
<details>
 <summary>Cart Page</summary>
 <div>

![cart-page](https://user-images.githubusercontent.com/61537853/191882927-898eec87-64da-4dcb-a426-a094e9a7d4f7.png)
 </div>
</details>
<details>
 <summary>Checkout Page</summary>
 <div>

![checkout-page](https://user-images.githubusercontent.com/61537853/191882914-313555f2-03c7-4718-a874-4b0213480115.png)
 </div>
</details>
<details>
 <summary>Seach Page</summary>
 <div>

 ![searchpage](https://user-images.githubusercontent.com/61537853/191779399-862c0d7b-930a-40ab-9673-905abcf80070.png)
 </div>
</details>
<details>
 <summary>Sign Up Page</summary>
 <div>
 
![sign-up](https://user-images.githubusercontent.com/61537853/191889741-68966572-404f-47c2-92bf-7ca26e58a90c.png)
 </div>
</details>
<details>
 <summary>Sign In Page</summary>
 <div>
 
![sign-in](https://user-images.githubusercontent.com/61537853/191889758-a7e43bbc-7cdd-4b78-b0e3-e1e41dbc51e2.png)
 </div>
</details>
<details>
 <summary>Profile Page</summary>
 <div>

 ![user-profile](https://user-images.githubusercontent.com/61537853/191779988-af7ea2bc-3ce9-4ac7-965c-42e38f4da716.png)
 </div>
</details>
<details>
 <summary>Change Password Page</summary>
 <div>

 ![user-password-page](https://user-images.githubusercontent.com/61537853/191780195-2e9c63fe-1261-40c5-adb9-1f9d781ad8e3.png)
 </div>
</details>
<details>
 <summary>Voucher collected</summary>
 <div>

 ![user-voucher-collect](https://user-images.githubusercontent.com/61537853/191880801-b1bdb4d9-3625-4a65-8473-0d1a0982eb38.png)
 </div>
</details>
<details>
 <summary>View History</summary>
 <div>

 ![user-product-history](https://user-images.githubusercontent.com/61537853/191880841-1d6b14f8-e65c-4900-a4bd-eca61e67e987.png)
 </div>
</details>
<details>
 <summary>Product Favorite Page</summary>
 <div>

 ![user-product-favorite](https://user-images.githubusercontent.com/61537853/191880884-86fa7b5a-9e64-41d2-93ef-9497fa4a9f64.png)
 </div>
</details>
<details>
 <summary>Notification Page</summary>
 <div>

 ![user-notification](https://user-images.githubusercontent.com/61537853/191880950-9a85728c-1c66-49da-a4e7-21b61883a96c.png)
 </div>
</details>
<details>
 <summary>Card Bank Page</summary>
 <div>

 ![user-card-bank](https://user-images.githubusercontent.com/61537853/191880964-38b89af9-379f-43dd-8038-7e5ef2bc4fac.png)
 </div>
</details>
<details>
 <summary>Order Details Page</summary>
 <div>

 ![user-order-detail](https://user-images.githubusercontent.com/61537853/191881295-af09809f-ec73-40eb-939a-c1a28aff1767.png)
 </div>
</details>
<details>
 <summary>Dashboard Overview Page</summary>
 <div>

 ![dashboard-manage](https://user-images.githubusercontent.com/61537853/191881420-ccfbddd1-ed4b-4f4f-96dd-889b5959aaff.png)
 </div>
</details>
<details>
 <summary>Dashboard Banner Manage Page</summary>
 <div>

![dashboard-banner-manage](https://user-images.githubusercontent.com/61537853/191881483-742e1786-13d5-44d4-a86f-e1cfdff0174a.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Manage Page</summary>
 <div>

![dashboard-product-manage](https://user-images.githubusercontent.com/61537853/191881520-8afbcef1-897f-4955-9360-ab99b2293742.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Add New Page</summary>
 <div>

![dashboard-add-product](https://user-images.githubusercontent.com/61537853/191881604-6c45f552-bede-4885-a071-85410d74bbf0.png)
 </div>
</details>
<details>
 <summary>Dashboard Product Update Page</summary>
 <div>

![dashboard-product-update](https://user-images.githubusercontent.com/61537853/191881824-5f6f17ce-2e57-4246-8ffa-cabcc6dfded4.png)
 </div>
</details>
<details>
 <summary>Dashboard Category Manage Page</summary>
 <div>

![dashboard-category-manage](https://user-images.githubusercontent.com/61537853/191881871-41ec6887-13ea-45e8-9b64-4a6d38fbf339.png)
 </div>
</details>
<details>
 <summary>Dashboard Category Add New Page</summary>
 <div>

![dashboard-add-category](https://user-images.githubusercontent.com/61537853/191881874-57a292d2-27ca-494f-a081-bc365676a349.png)
 </div>
</details>
<details>
 <summary>Dashboard Order Manage Page</summary>
 <div>

![dashboard-order-manage](https://user-images.githubusercontent.com/61537853/191881956-37c1e472-9916-4745-9c30-5245cad26ef1.png)
 </div>
</details>
<details>
 <summary>Dashboard User Manage Page</summary>
 <div>

![dashboard-user-manage](https://user-images.githubusercontent.com/61537853/191882034-54d5f2dc-352c-4f89-b9d2-e42f1a797706.png)
 </div>
</details>
<details>
 <summary>Dashboard User Add New Page</summary>
 <div>

![dashboard-add-user](https://user-images.githubusercontent.com/61537853/191882046-c6ef8c8b-e1ec-48d2-a336-68a7b38fe7da.png)
 </div>
</details>
<details>
 <summary>Dashboard User Update Page</summary>
 <div>

![dashboard-user-update](https://user-images.githubusercontent.com/61537853/191882048-8940ac41-78e3-4dac-a069-692f35188664.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Manage Page</summary>
 <div>

![dashboard-voucher-manage](https://user-images.githubusercontent.com/61537853/191882494-8964ab32-f68d-4e6e-baca-1a25fab4f957.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Add New Page</summary>
 <div>

![dashboard-voucher-add](https://user-images.githubusercontent.com/61537853/191882498-caedc9e0-efa5-466c-9a5d-303384511997.png)
 </div>
</details>
<details>
 <summary>Dashboard Voucher Update Page</summary>
 <div>

![dashboard-voucher-update](https://user-images.githubusercontent.com/61537853/191882502-b5be177d-048a-450c-9423-6ecd95a4d7fa.png)
 </div>
</details>
<details>
 <summary>Page Not Found</summary>
 <div>

![page-not-found](https://user-images.githubusercontent.com/61537853/191882449-6170cbe9-983f-4206-9d1f-39427f071323.png)
 </div>
</details>


A Website Ecommmerce Using ReactJS, Tailwindcss

Shopbee

Overview

Resources

Main technology used

Features

Environment Variables

Screenshots