Product App

A React component library for managing and displaying products with API integration. This package provides a complete product management interface with filtering, search, and product details functionality.

Installation

npm install product-app

Peer Dependencies

Make sure you have React and React DOM installed in your project:

npm install react react-dom

Usage

Basic Usage

import React from 'react';
import ProductApp from 'product-app';
import 'product-app/style.css';

function App() {
  return (
    <ProductApp 
      apiUrl={import.meta.env.VITE_API_URL} // or process.env.VITE_API_URL
      authToken="YOUR_BEARER_TOKEN" // optional
    />
  );
}

export default App;

With Base Path

If you need to mount the app at a specific base path:

import React from 'react';
import ProductApp from 'product-app';
import 'product-app/style.css';

function App() {
  return (
    <ProductApp 
      apiUrl="https://your-api-url.com/api"
      basePath="/products"
    />
  );
}

export default App;

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiUrl | string | Yes | import.meta.env.VITE_API_URL or process.env.VITE_API_URL if provided | The base API URL for all API calls | | authToken | string | No | - | Optional bearer token to pre-seed auth | | basePath | string | No | '/' | Base path for routing | | theme | object | No | - | Theme configuration (coming soon) |

API Requirements

The package expects your API to have the following endpoint:

• GET /products - Returns a list of products

Expected Product Data Structure

{
  "id": 1,
  "name": "Product Name",
  "category": "Category Name",
  "price": 100,
  "originalPrice": 120,
  "stock": 50,
  "maxStock": 100,
  "status": "Active",
  "image": "image-url",
  "offer": "Special offer text",
  "sku": "SKU: 123456"
}

Authentication

The package uses cookies for authentication:

• token - Access token (Bearer token)
• refreshToken - Refresh token for token renewal

Make sure your API supports token refresh at:

• POST /api/v1/auth/refresh

Features

• ✅ Product listing with grid view
• ✅ Product filtering by category and status
• ✅ Search functionality
• ✅ Product details page
• ✅ Bulk selection
• ✅ Redux state management
• ✅ Token refresh handling
• ✅ Responsive design

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

License

MIT