SKILL.md — AI-Based Enhanced E-Commerce Web App (Aura)

This document maps the skills & technologies used in this repository to specific code locations (evidence) and summarizes architecture.

Repository Snapshot (What the code shows)

1) Architecture Infographic (High-level)

                 ┌─────────────────────────────────────┐
                 │            React SPA (CRA)           │
                 │         src/index.js → App.js        │
                 └─────────────────────────────────────┘
                                  │
                                  ▼
        ┌───────────────────────────────────────────────────────┐
        │                   Routing (React Router)              │
        │  /  /shop  /product/:id  /search  /checkout  /profile │
        │  /ai-stylist  /trends  /order-confirmation            │
        └───────────────────────────────────────────────────────┘
                 │                          │
                 │                          │
                 ▼                          ▼
   ┌──────────────────────────┐   ┌─────────────────────────────┐
   │  Context: Auth + Cart     │   │   Data Layer (Mock Data)     │
   │ AuthContext: localStorage │   │ products.js, mockData.js     │
   │ CartContext: localStorage │   └─────────────────────────────┘
   └──────────────────────────┘
                 │
                 ▼
   ┌─────────────────────────────────────────────────────────────┐
   │ AI Stylist (Prototype)                                      │
   │ - Upload image (base64)                                     │
   │ - If env keys missing => mock recommendations               │
   │ - Else => POST OpenAI chat/completions (vision model prompt)│
   └─────────────────────────────────────────────────────────────┘

2) Tech Stack Table (from package.json + code)

3) Skills-to-Code Evidence Matrix (Structured)

4) Flow Diagrams + Step Tables

A) AI Stylist Flow (Image → Env Validation → OpenAI or Mock → UI)

Infographic (AI Stylist)

User
 │
 │ 1) Upload image (<= 5MB)  ────────────────┐
 ▼                                            │
AiStylistPage (state: image, preferences, ...)│
src/pages/AiStylistPage.js                    │
 │                                            │
 │ 2) on mount: debugConfig + validateConfig   │
 │    - show config error only if prod & missing
 ▼
config/env.js + utils/debug.js
 │
 │ 3) "Get Style Recommendations" click
 ▼
Decision:
 ├─ If (useMockData || !openaiApiKey) ─────────────► setRecommendations(mockAIRecommendations)
 │                                                   usingMockData=true
 │                                                   (Demo mode banner)
 │
 └─ Else: fetch OpenAI chat/completions
        - model: "gpt-4-vision-preview"
        - sends text prompt + image_url(base64 data URL)
        - parses response.choices[0].message.content
        - fallback to mock on error
                     │
                     ▼
Recommendations UI (rendered list)

Structured table (AI Stylist Steps → Evidence)

B) Shopping Flow (Filters → Product Card → Add to Cart → Sidebar → Checkout → Confirmation)

Infographic (Shopping)

ShopPage
src/pages/ShopPage.js
  │
  │ 1) Load products from mock data
  │    - allProductsData
  ▼
Filter/Sort pipeline (useMemo)
  - category filter
  - price filter
  - sorting (price asc/desc or default)
  │
  │ 2) Render ProductCard grid
  ▼
ProductCard
src/components/ProductCard.js
  │
  │ 3) Add to cart button
  │    - validates required fields
  ▼
CartContext.addToCart
src/context/CartContext.js
  │
  │ 4) Update state + persist to localStorage ("aura_cart")
  │ 5) Open Cart sidebar after delay (setIsCartOpen(true))
  ▼
CartSidebar
src/components/CartSidebar.js
  │
  │ 6) Update quantity / remove
  │ 7) Proceed to /checkout
  ▼
CheckoutPage → OrderConfirmationPage
src/pages/CheckoutPage.js / src/pages/OrderConfirmationPage.js

Structured table (Shopping Steps → Evidence)

C) Auth Flow (Register/Login Modal → localStorage → Session → Wishlist/Logout)

Infographic (Auth)

Header (top nav)
src/components/Header.js
  │
  │ Click user icon
  ▼
Decision (useAuth):
  ├─ Not authenticated → open AuthModal
  │       src/components/auth/AuthModal (dir exists)
  │
  └─ Authenticated → show dropdown
          - Profile / Wishlist / Logout
                  │
                  ▼
AuthContext
src/context/AuthContext.js
  │
  │ register/login simulate async delay
  │ save users list to localStorage: "aura_users"
  │ save current user to localStorage: "aura_user"
  ▼
App-wide session
(AuthProvider wraps App)
src/App.js

Structured table (Auth Steps → Evidence)

5) Environment Variables (as implemented)

Expected client env vars (Create React App style):

REACT_APP_OPENAI_API_KEY=...
REACT_APP_UNSPLASH_API_KEY=...
REACT_APP_API_BASE_URL=http://localhost:3001/api
REACT_APP_USE_MOCK_DATA=true

Evidence: src/config/env.js, src/utils/debug.js