A modern, high-performance product management interface built with React, Redux Toolkit, and Tailwind CSS. ProductHub offers a streamlined experience for managing product catalogs with real-time filtration, sorting, and shopping cart functionality.
Unlike generic "AI-generated" templates, ProductHub features a custom-crafted design system:
- Color Palette: A sophisticated deep plum and charcoal palette (
#893168,#2E1C2B,#050404). - Typography: Utilizing Outfit for a premium, retail-focused atmosphere.
- Stability: Focus on solid layouts and intentional spacing, moving away from jumpy hover effects and excessive blur layers.
- Full CRUD Operations: Create, Read, Update, and Delete products seamlessly.
- Advanced State Management: Powered by Redux Toolkit for consistent data flow across the application.
- Shopping Experience: Integrated cart system with quantity management and real-time total calculation.
- Intelligent Discovery: Instant search functionality combined with category-based filtering.
- Polished UX: Custom-designed modals, form validations (price/stock), and responsive grid layouts.
- Persistence: Built-in support for dummy data initialization and local state persistence.
- Frontend: React 18
- State: Redux Toolkit (Slices:
data,cart,modal) - Routing: React Router DOM v6
- Styling: Tailwind CSS (Custom components layer)
- Icons: React Icons (Fi, Bi, Ai)
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone [repository-url]
- Install dependencies:
npm install
- Start the development server:
npm start
/src/components: UI atoms likeInput,Button, and complex blocks likeHeader,Modal./src/pages: Main application views (Product.jsx)./src/redux: Redux slices and store configuration./src/index.css: Global design tokens and Tailwind component utilities.
Crafted with attention to detail and user experience.