Product Redux

A modern product browsing application built with React, Redux, and Vite.
The project provides a clean shopping flow where users can browse products, manage a cart, and maintain a favorites list.

Overview

This application fetches product data from the DummyJSON API and renders it in a responsive, Tailwind-powered interface.
State for cart and favorites is managed globally using Redux.

Key Features

• Browse products fetched from https://dummyjson.com/products
• Add and remove items from cart
• Increase or decrease item quantity in cart
• Clear the full cart in one action
• Add and remove products from favorites
• View total cart amount calculation in real time
• Navigate between Home, Product, Cart, and Favorite pages

Tech Stack

• React 19
• Redux + React Redux
• React Router
• Vite
• Tailwind CSS v4
• Axios
• ESLint

Project Structure

src/
  components/      Reusable UI pieces (card, nav, footer)
  layout/          Shared page layout
  pages/           Route-level pages (home, product, cart, favorite)
  router/          Route configuration
  store/
    action/        Redux action creators
    reducer/       Redux reducers
    store.js       Redux store setup

Getting Started

Prerequisites

• Node.js 18+ recommended
• npm

Installation

npm install

Run in Development

npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

Code Quality

Run lint checks with:

npm run lint

Available Routes

• / → Home page
• /product → Product listing
• /cart → Shopping cart
• /favorite → Favorites list

Notes

• Product data is loaded from the public DummyJSON service.
• Cart quantity controls respect product stock limits.
• Favorites prevent duplicate entries for the same product.