e-commerce PoC built with NextJS, TypeScript, ChakraUI, Zustand and Contentful API for content delivery
MIT License
e-commerce PoC built with NextJS, TypeScript, ChakraUI, Zustand and Contentful API for content delivery.
npm i
npm start
react-paginate
for paginationPAGE_COUNT
is dynamically generated the pagination list is hidden when there's only 1 results page. 'prev' arrow is hidden on the first page and 'next' arrow is hidden on the last page.This is the shape of an entry that comes from the Contentful collection.
{
"name": "Person Posing Near Body of Water",
"category": "fashion",
"price": 101,
"currency": "USD",
"image": {
"src": "",
"alt": ""
},
"bestseller": true,
"featured": true,
"details": {
"dimensions": {
"width": 1020,
"height": 1020
},
"size": 15000,
"description": "What? One point twenty-one gigawatts. One point twenty-one gigawatts. Great Scott. Thank god I still got my hair. What on Earth is that thing I'm wearing? Kids, we're gonna have to eat this cake by ourselves, Uncle Joey didn't make parole again. I think it would be nice, if you all dropped him a line. I don't know, I can't keep up with all of your boyfriends."
}
}
Pagination is dynamic and only display when there's more than 1 page to show (6 products per page.)
See it live