This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

yarn dev
# or

Live Demo: https://demo-ecommerce-blue.vercel.app

page: index.tsx

Home page of the project

Home page is same as shop page

page: shop.tsx

Shop page of the project

all products are listed here


user can filter products by category

& sort products by price,title and rating


User can add products to cart

& increments and decrements the quantity of the product in the cart (with the help of Redux)

page: categories/[category].tsx

category page of the project

dynamic category page

page is generated dynamically based on the category name in the url (with the help of getStaticPaths & getStaticProps)

products are filtered by category here

page: products/[id].tsx

product page of the project

dynamic product page

product details are listed here with SSG

user can add product to cart from here (with the help of Redux)

page: cart.tsx

cart page of the project

cart items are listed here .

user can increments & decrements the quantity of product  & remove the product in the cart (with the help of Redux)

State Management: Redux

Cart Reducer: cartSlice.ts

cart reducer is used to manage cart items

Styling: Tailwind CSS

tailwind css is used for styling