Achats Commerce (Frontend)

Achats Commerce ek modern React + Redux e‑commerce UI hai jisme complete shopping flow implemented hai: product browsing, dynamic product details, cart/wishlist management, checkout → order placement, aur account dashboard. Yeh project fully responsive hai aur localStorage persistence use karta hai taa‑ke refresh ke baad bhi state safe rahe.

Features

• Dynamic product catalog with category filters (Shop, Men, Women) and search
• Product Details with size/color selection and add‑to‑cart
• Cart with quantity updates, totals calculation, and empty‑state UX
• Wishlist with toggle and “Add to cart” moves item from wishlist → cart
• Checkout that places an order and routes to “My Orders”
• Orders list and Order detail view rendered from Redux + localStorage
• Account area with Sign‑In/Sign‑Up (demo), saved addresses, and profile
• Styled-components based theming and Bootstrap Icons for UI polish

Tech Stack

• Build tooling: Vite
• Framework: React
• State: Redux Toolkit
• Router: React Router
• Styling: styled-components
• Icons: Bootstrap Icons

Core Modules

• Store and slices

  • src/redux/store.js – Redux store setup
  • src/redux/slices/cartSlice.js – cart items, totals, localStorage sync
  • src/redux/slices/wishlistSlice.js – wishlist items and toggle
  • src/redux/slices/orderSlice.js – order placement and storage
  • src/redux/slices/authSlice.js – demo auth state
  • src/redux/slices/addressSlice.js – saved addresses

• Screens and flows

  • Product: src/screens/product/ProductListScreen.jsx, src/screens/product/ProductDetailsScreen.jsx
  • Cart & Checkout: src/screens/cart/*, src/screens/checkout/CheckoutScreen.jsx
  • Orders: src/screens/user/OrderListScreen.jsx, src/screens/user/OrderDetailScreen.jsx
  • Wishlist: src/screens/user/WishListScreen.jsx
  • Account: src/screens/user/AccountScreen.jsx, src/screens/user/AddressScreen.jsx

• UI components

  • Product: src/components/product/* (cards, preview, tabs)
  • User: src/components/user/* (menu, order items)
  • Common: src/components/common/* (breadcrumb, title)

Routing

• / – Home
• /product | /men | /women – Listings (filters/search enabled)
• /product/:id – Product details (dynamic)
• /cart – Cart
• /checkout – Checkout
• /order – My Orders
• /order_detail/:id – Order details (dynamic)
• /wishlist – Wishlist
• /account & /account/add – Account and Address

Local Storage Keys

• achats_cart_items – Cart items
• achats_wishlist_items – Wishlist items
• achats_orders – Orders
• achats_auth – Current user (demo)
• achats_address_book – Saved addresses

Architecture Diagram

flowchart LR
  A[User] --> B[Product List]
  B -->|Click Card| C["Product Details (/product/:id)"]
  C -->|Add To Cart| D["Cart (/cart)"]
  D -->|Proceed To Checkout| E[Checkout]
  E -->|Place Order| F["Order Slice + localStorage"]
  F -->|Success| G["My Orders (/order)"]
  G -->|View Detail| H["Order Detail (/order_detail/:id)"]

Loading

State Flow (Redux)

sequenceDiagram
  participant U as User
  participant C as Component
  participant R as Redux Slice
  participant LS as localStorage

  U->>C: Click "Add to cart"
  C->>R: dispatch(addItem(payload))
  R->>R: Update state.items and totals
  R->>LS: Persist achats_cart_items
  C->>C: Navigate to /cart (UI updates from store)

  U->>C: Proceed to Checkout
  C->>R: dispatch(placeOrder({items, totals, user}))
  R->>R: Create order object
  R->>LS: Persist achats_orders
  C->>C: Navigate to /order (My Orders)

Loading

Notable UX Details

• Wishlist “Add to cart” removes the item from wishlist automatically.
• Favicon configured via src/main.jsx to ensure consistent dev/build behavior.
• Product details route is dynamic: product/:id with graceful fallback.

Folder Structure (high-level)

src/
  assets/          # images, icons
  components/      # UI components (common, product, user)
  data/            # static product/order samples
  redux/           # store + slices
  screens/         # routed screens
  styles/          # global styles, themes, utilities
  utils/           # helpers like currencyFormat

---

Professional Overview

• Single‑page application leveraging React 18, Vite, Redux Toolkit, and styled-components.
• Deterministic state management with normalized slices and minimal side effects.
• Client‑side persistence layer built on localStorage with safe parse/stringify guards.
• Responsive, accessible UI with clear component boundaries and reusable design tokens.

Table of Contents

• Overview
• Features
• Architecture
• Domain & State
• Routing
• Codebase Layout
• Engineering Decisions
• Quality & Tooling
• Extending the App

Engineering Decisions

• State Management
  • Redux Toolkit for predictable updates and immutable patterns.
  • Selectors for memoized reads and minimal rerenders.
  • Local persistence handled inside slices to avoid duplication across views.
• Routing
  • Resource‑first routes (/product/:id, /order_detail/:id) to keep pages bookmarkable.
  • Graceful fallbacks to prevent blank screens when an id is missing.
• UX & UI
  • Empty‑state components for cart, wishlist, and orders improve clarity.
  • Wishlist “Add to cart” is a move operation to reduce user friction.
  • Sizes/colors modeled as selectable options with clear active styles.
• Performance & DX
  • Vite fast dev server and code‑split builds.
  • Static assets kept lean; icons via Bootstrap Icons and optimized PNG/SVG.
• Accessibility
  • Interactive elements are buttons/links with proper semantics.
  • Consistent contrast and focusable targets in key actions.

Quality & Tooling

• NPM Scripts
  • npm run dev – Start dev server
  • npm run build – Production build
  • npm run preview – Preview build
  • npm run lint – Lint with strict warnings
• Code Style
  • Styled-components encapsulate styles; shared tokens in theme files.
  • Utility helpers (e.g., currencyFormat) centralize formatting concerns.
• Favicon
  • Runtime injection ensures consistent icon in dev and build: see src/main.jsx.

Extending the App

• Real backend integration: replace localStorage saves with API services; keep slice interfaces stable.
• Product variants/stock: extend product model and wire selection/stock validation in ProductDetails.
• Coupons/discounts: add a pricing slice to compute totals with promotions.
• Internationalization: extract strings and introduce locale management + currency formatting.