LuminaShop

A fully functional e-commerce web app built with Vite, React 18, TypeScript, Tailwind CSS, and Zustand, featuring an AI Product Assistant.

Features

• Home/Dashboard — hero banner, category quick-links, trending products, promo banners, new arrivals.
• Product Detail — image gallery with crossfade, variant selectors (color/storage), tabs (Description, Specs, Reviews, Shipping), related products carousel.
• Cart — quantity steppers, animated item removal, sticky order summary, promo code input, empty-cart state.
• AI Product Assistant — floating chat button with a drawer chat panel that can call an OpenAI-compatible LLM API for recommendations/comparisons, using the mock product catalog as context.
• Global cart state via Zustand, with a live-updating badge count in the navbar.
• Animations via the motion (Framer Motion successor) package: page transitions, hover/tap feedback, staggered hero entrance, cart item exit animations.
• Responsive design: sidebar collapses into a Sheet drawer on mobile, product grid adapts from 4 → 2 → 1 columns, navbar search collapses into an icon overlay on small screens.

Tech Stack

• Vite + React 18 + TypeScript
• Tailwind CSS (custom indigo/lavender theme)
• Hand-built shadcn/ui-style primitives (Button, Card, Input, Badge, Tabs, Sheet, Slider, Checkbox, Avatar, Separator)
• motion for animation
• React Router v6
• Zustand for cart/wishlist state
• lucide-react for icons

Setup

npm install
npm run dev

The app will be available at http://localhost:5173.

Build

npm run build
npm run preview

Environment Variables (AI Feature)

Copy .env.example to .env and fill in your credentials to enable the AI Product Assistant:

cp .env.example .env

VITE_AI_API_KEY=your_openai_api_key_here
VITE_AI_API_BASE=https://api.openai.com/v1
VITE_AI_MODEL=gpt-4o-mini

If VITE_AI_API_KEY is not set, the AI Assistant will gracefully fall back to a static message instead of erroring out.

Any OpenAI-compatible endpoint (OpenAI, Azure OpenAI proxy, local LLM gateway, etc.) can be used by adjusting VITE_AI_API_BASE and VITE_AI_MODEL.

Project Structure

src/
  components/
    layout/     Navbar, Sidebar, Footer, Layout
    product/    ProductCard, ProductGallery, ProductTabs, RelatedProducts
    cart/       CartItem, OrderSummary, EmptyCartState
    ai/         AIChatButton (floating AI assistant)
    ui/         Reusable UI primitives (button, card, input, badge, tabs, sheet, slider, checkbox, avatar, separator)
  pages/        Home.tsx, Shop.tsx, ProductDetail.tsx, Cart.tsx
  store/        cartStore.ts, wishlistStore.ts (Zustand)
  data/         products.ts (mock catalog)
  types/        product.ts, cart.ts, user.ts
  App.tsx       Routes + animated page transitions
  main.tsx      Entry point

Notes

• All product images are sourced from Unsplash placeholder URLs — swap in real product photography for production.
• The mock catalog in src/data/products.ts mirrors the products shown in the reference screenshots (LuminaBook Pro, SonicPro Wireless Earbuds, Lumina Watch Series, Tactile Mechanical Keyboard, EchoBeam Smart Hub, etc.) and can be extended or connected to a real backend/CMS.