E-commerce application
Mimic Angular team's
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
<type>:
build: Changes that affect the build system or external dependenciesci: Changes to CI configuration files and scriptsdocs: Documentation only changesfeat: A new featurefix: A bug fixpolish: Improving or polishing existing feature(s)perf: A code change that improves performancerefactor: A code change that neither fixes a bug nor adds a featurestyle: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)test: Adding missing tests or correcting existing tests
<scope>:
fe: Frontend relatedbe: Backend related
feat(fe): Add header navigation
fix(be): Change API endpoint for price - GET
The current API doesn't work well when there's no internet. Look more here: https://github.com/loia5tqd001/Jewelry-Store
- Atomic architecture structure
- Component file:
my-component.comp.jsx styled-componentfile:my-component.styled.js- utility related to the component:
my-component.utils.js - data related to the component:
my-component.data.js - test related to the component:
my-component.test.js - hooks related to the component:
my-component.hooks.js(hooks shared between components will be in the folder hooks/ though) - ...
If you want to enforce a coding style for your project, consider using Prettier instead of ESLint style rules.
- Source: https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor
- https://react-slick.neostack.com/docs/api
- Add both
react-slickandslick-carousel - Imported
.cssfiles fromslick-carouselinindex.jsx
- 100% free, better than Fontawesome (IMO)
- Included the cdn link in
index.html - Get the more updated link (than the one in the documentation) from the console window:
- Crawl product list
// Sản phẩm mới
a = Array.from(document.querySelectorAll('.wrapper-collection-2 .product-block'))
// Sản phẩm bán chạy
a = Array.from(document.querySelectorAll('.wrapper-collection-2 .product-block'))
b = a.map((x) => {
const productName = x.querySelector('h3.pro-name a').title;
const price = x.querySelector('.pro-price');
let originalPrice = 0;
if (price.classList.contains('highlight')) {
originalPrice = price.querySelector('.pro-price-del').innerText;
} else {
originalPrice = price.innerText;
}
originalPrice = +originalPrice.replace(/,|₫/g, '');
const sale = x.querySelector('.product-sale span');
const productSale = sale ? +sale.innerText.replace(/-|%/g, '') : null;
const pictures = x.querySelectorAll('picture');
const srcImage = pictures[0].children[1].srcset.slice(2);
const srcOnHover = pictures[1].children[1].srcset.slice(2);
return {
productName,
srcImage,
srcOnHover,
originalPrice,
productSale,
};
});