Upload E-Commerce Product Intelligence Dashboard (frontend + backend)

backend/app.py

@@ -0,0 +1,285 @@
+import logging
+import os
+import pandas as pd
+from fastapi import FastAPI, HTTPException, Query
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse
+from pathlib import Path
+from huggingface_hub import hf_hub_download
+from typing import Optional
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = FastAPI(title="E-Commerce Product Intelligence Platform")
+
+# HF Dataset config
+HF_DATASET_ID = "Vincentran/ecommerce-dataset"
+HF_CSV_PATH = "data/ecommerce_products.csv"
+
+# Cache DataFrame
+_data_cache = None
+
+
+def load_data():
+    """Load CSV từ HF Dataset with cache."""
+    try:
+        if _data_cache is not None:
+            logger.info("Using cached DataFrame")
+            return _data_cache
+
+        logger.info(f"Downloading CSV from HF Dataset: {HF_DATASET_ID}/{HF_CSV_PATH}")
+        local_csv_path = hf_hub_download(
+            repo_id=HF_DATASET_ID,
+            filename=HF_CSV_PATH,
+            repo_type="dataset"
+        )
+
+        file_size = os.path.getsize(local_csv_path)
+        logger.info(f"Loading CSV from: {local_csv_path} (size: {file_size} bytes)")
+
+        if file_size == 0:
+            raise ValueError(f"CSV file is empty: {local_csv_path}")
+
+        df = pd.read_csv(local_csv_path)
+        logger.info(f"Loaded {len(df)} rows, columns: {list(df.columns)}")
+
+        # Cache DataFrame
+        _data_cache = df
+        return df
+
+    except Exception as e:
+        logger.error(f"Failed to load data from HF Dataset: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to load data: {str(e)}")
+
+
+def refresh_cache():
+    """Refresh data cache."""
+    _data_cache = None
+    return load_data()
+
+
+@app.get("/")
+def root():
+    return {"status": "E-Commerce Product Intelligence API is running"}
+
+
+@app.get("/data")
+def get_data(
+        page: int = Query(1, ge=1, description="Page number"),
+        limit: int = Query(100, ge=1, le=500, description="Items per page")
+):
+    df = load_data()
+    total = len(df)
+    start = (page - 1) * limit
+    end = start + limit
+
+    if start >= total:
+        raise HTTPException(status_code=404, detail="Page not found")
+
+    data = df.iloc[start:end].to_dict("records")
+    return {
+        "data": data,
+        "page": page,
+        "limit": limit,
+        "total": total,
+        "total_pages": (total + limit - 1) // limit
+    }
+
+
+@app.get("/stats/categories")
+def stats_categories():
+    df = load_data()
+    if "category" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'category' column")
+    return df["category"].value_counts().head(10).to_dict()
+
+
+@app.get("/stats/brands")
+def stats_brands():
+    df = load_data()
+    if "brand" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'brand' column")
+    return df["brand"].value_counts().head(10).to_dict()
+
+
+@app.get("/stats/price")
+def stats_price():
+    df = load_data()
+    if "category" not in df.columns or "price" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'category' or 'price' column")
+    return df.groupby("category")["price"].agg(["mean", "median", "min", "max", "count"]).reset_index().to_dict(
+        "records")
+
+
+@app.get("/stats/rating")
+def stats_rating():
+    df = load_data()
+    if "category" not in df.columns or "rating" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'category' or 'rating' column")
+    return df.groupby("category")["rating"].agg(["mean", "median", "min", "max", "count"]).reset_index().to_dict(
+        "records")
+
+
+@app.get("/stats/price-range")
+def stats_price_range():
+    """Price distribution by range."""
+    df = load_data()
+    if "price" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'price' column")
+
+    price_ranges = {
+        "Under $50": len(df[df["price"] < 50]),
+        "$50 - $100": len(df[(df["price"] >= 50) & (df["price"] < 100)]),
+        "$100 - $200": len(df[(df["price"] >= 100) & (df["price"] < 200)]),
+        "$200 - $500": len(df[(df["price"] >= 200) & (df["price"] < 500)]),
+        "$500+": len(df[df["price"] >= 500])
+    }
+    return price_ranges
+
+
+@app.get("/insights")
+def insights():
+    df = load_data()
+    return JSONResponse(content={
+        "total_products": len(df),
+        "categories": df["category"].nunique() if "category" in df.columns else 0,
+        "brands": df["brand"].nunique() if "brand" in df.columns else 0,
+        "avg_price": round(df["price"].mean(), 2) if "price" in df.columns else 0,
+        "avg_rating": round(df["rating"].mean(), 2) if "rating" in df.columns else 0,
+        "min_price": round(df["price"].min(), 2) if "price" in df.columns else 0,
+        "max_price": round(df["price"].max(), 2) if "price" in df.columns else 0,
+    })
+
+
+@app.get("/search")
+def search(
+        query: str = Query(..., description="Search query"),
+        page: int = Query(1, ge=1, description="Page number"),
+        limit: int = Query(100, ge=1, le=500, description="Items per page")
+):
+    df = load_data()
+    q = query.lower()
+
+    # Search only in important columns
+    search_cols = ["product_name", "category", "brand", "description"]
+    search_cols = [col for col in search_cols if col in df.columns]
+
+    mask = pd.Series([False] * len(df), index=df.index)
+    for col in search_cols:
+        try:
+            mask |= df[col].str.contains(q, case=False, na=False)
+        except:
+            pass
+
+    total = len(df[mask])
+    start = (page - 1) * limit
+    end = start + limit
+
+    if start >= total:
+        raise HTTPException(status_code=404, detail="No results found")
+
+    data = df[mask].iloc[start:end].to_dict("records")
+    return {
+        "data": data,
+        "query": query,
+        "page": page,
+        "limit": limit,
+        "total": total,
+        "total_pages": (total + limit - 1) // limit
+    }
+
+
+@app.get("/filter")
+def filter_products(
+        category: Optional[str] = Query(None, description="Filter by category"),
+        min_price: Optional[float] = Query(None, description="Min price"),
+        max_price: Optional[float] = Query(None, description="Max price"),
+        min_rating: Optional[float] = Query(None, description="Min rating"),
+        page: int = Query(1, ge=1, description="Page number"),
+        limit: int = Query(100, ge=1, le=500, description="Items per page")
+):
+    df = load_data()
+
+    # Apply filters
+    if category and "category" in df.columns:
+        df = df[df["category"] == category]
+    if min_price and "price" in df.columns:
+        df = df[df["price"] >= min_price]
+    if max_price and "price" in df.columns:
+        df = df[df["price"] <= max_price]
+    if min_rating and "rating" in df.columns:
+        df = df[df["rating"] >= min_rating]
+
+    total = len(df)
+    start = (page - 1) * limit
+    end = start + limit
+
+    if start >= total:
+        raise HTTPException(status_code=404, detail="No results found")
+
+    data = df.iloc[start:end].to_dict("records")
+    return {
+        "data": data,
+        "filters": {
+            "category": category,
+            "min_price": min_price,
+            "max_price": max_price,
+            "min_rating": min_rating
+        },
+        "page": page,
+        "limit": limit,
+        "total": total,
+        "total_pages": (total + limit - 1) // limit
+    }
+
+
+@app.get("/recommend")
+def recommend(category: str, limit: int = Query(10, ge=1, le=50, description="Number of recommendations")):
+    df = load_data()
+    if "category" not in df.columns:
+        raise HTTPException(status_code=400, detail="Missing 'category' column")
+
+    subset = df[df["category"] == category]
+    if len(subset) == 0:
+        raise HTTPException(status_code=404, detail="No products found in this category")
+
+    if "rating" in df.columns:
+        subset = subset.sort_values("rating", ascending=False)
+
+    return subset.head(limit).to_dict("records")
+
+
+@app.post("/refresh-data")
+def refresh_data():
+    """Refresh data cache from HF Dataset."""
+    try:
+        df = refresh_cache()
+        return {"status": "Data refreshed successfully", "rows": len(df)}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/run-scraper")
+def trigger_scraper():
+    """Trigger download Kaggle → save CSV → upload to HF."""
+    import subprocess
+    result = subprocess.run(["python", "backend/scraper.py"], capture_output=True, text=True)
+    if result.returncode == 0:
+        # Refresh cache after scraper
+        refresh_cache()
+        return {"status": "Scraper completed successfully", "output": result.stdout}
+    else:
+        return {"status": "Scraper failed", "error": result.stderr}
+
+
+# Mount frontend
+frontend_dir = Path("frontend")
+if frontend_dir.exists():
+    app.mount("/", StaticFiles(directory=str(frontend_dir), html=True), name="frontend")
+else:
+    @app.get("/")
+    def frontend_placeholder():
+        return HTMLResponse(
+            content="<h1>E-Commerce Product Intelligence Dashboard</h1><p>Frontend placeholder.</p>"
+        )

backend/main.py

@@ -0,0 +1,10 @@
+from fastapi import FastAPI
+import uvicorn
+
+# Import FastAPI app từ app.py
+import sys
+sys.path.insert(0, '/app')
+from app import app
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+pandas
+uvicorn
+huggingface_hub
+kaggle

backend/scraper.py

@@ -7,8 +7,8 @@ import shutil
 # Set Kaggle env vars TRƯỚC khi import Kaggle
 token = os.getenv("KAGGLE_API_TOKEN")
 if token:
-    token_value = token.split('_')[1] if '_' in token else token
-    os.environ['KAGGLE_KEY'] = token_value
+    # Kaggle API v2:直接使用 access_token
+    os.environ['KAGGLE_API_TOKEN'] = token
     os.environ['KAGGLE_USERNAME'] = 'johnsontrann'
 
 logging.basicConfig(level=logging.INFO)

backend/services.py

@@ -1,22 +0,0 @@
-import pandas as pd
-from pathlib import Path
-
-PARQUET_PATH = Path("data/ecommerce_products.parquet")
-
-def load_data():
-    """Load parquet."""
-    if not PARQUET_PATH.exists():
-        raise FileNotFoundError(f"Parquet not found: {PARQUET_PATH}")
-    return pd.read_parquet(PARQUET_PATH)
-
-def get_top_categories(df: pd.DataFrame, n: int = 10):
-    return df["category"].value_counts().head(n)
-
-def get_top_brands(df: pd.DataFrame, n: int = 10):
-    return df["brand"].value_counts().head(n)
-
-def get_price_stats(df: pd.DataFrame):
-    return df.groupby("category")["price"].agg(["mean", "median", "min", "max", "count"]).reset_index()
-
-def get_rating_stats(df: pd.DataFrame):
-    return df.groupby("category")["rating"].agg(["mean", "median", "min", "max", "count"]).reset_index()

frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ecommerce-dashboard",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0",
+    "echarts": "^5.5.0",
+    "vue-echarts": "^6.6.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue-router": "^4.2.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="container">
+    <header>
+      <h1>🛍️ E-Commerce Product Intelligence</h1>
+      <p>Browse, search, and analyze thousands of products</p>
+    </header>
+
+    <Insights />
+    <Charts />
+    <SearchFilter @search="handleSearch" />
+    <Table
+      :products="products"
+      :currentPage="currentPage"
+      :totalPages="totalPages"
+      @page-change="changePage"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Insights from './components/Insights.vue'
+import Charts from './components/Charts.vue'
+import SearchFilter from './components/SearchFilter.vue'
+import Table from './components/Table.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { Insights, Charts, SearchFilter, Table },
+  data() {
+    return {
+      products: [],
+      currentPage: 1,
+      totalPages: 1,
+      filters: {}
+    }
+  },
+  methods: {
+    async loadProducts() {
+      try {
+        const params = new URLSearchParams({
+          page: this.currentPage,
+          limit: 50
+        })
+        if (this.filters.category) params.append('category', this.filters.category)
+        if (this.filters.minPrice) params.append('min_price', this.filters.minPrice)
+        if (this.filters.maxPrice) params.append('max_price', this.filters.maxPrice)
+        if (this.filters.minRating) params.append('min_rating', this.filters.minRating)
+
+        const res = await fetch(`/filter?${params}`)
+        const data = await res.json()
+        this.products = data.data
+        this.totalPages = data.total_pages
+      } catch (error) {
+        console.error('Failed to load products:', error)
+      }
+    },
+    changePage(page) {
+      this.currentPage = page
+      this.loadProducts()
+    },
+    handleSearch(filters) {
+      this.filters = filters
+      this.currentPage = 1
+      this.loadProducts()
+    }
+  },
+  mounted() {
+    this.loadProducts()
+  }
+})
+</script>
+
+<style>
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  background: white;
+  padding: 30px;
+  text-align: center;
+  border-radius: 15px;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+header h1 {
+  color: #667eea;
+  font-size: 2.5em;
+  margin-bottom: 10px;
+}
+
+header p {
+  color: #666;
+  font-size: 1.2em;
+}
+</style>

frontend/src/components/Charts.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="charts-grid">
+    <div class="chart-card">
+      <h3>📊 Top 10 Categories</h3>
+      <VChart :option="categoriesOption" />
+    </div>
+    <div class="chart-card">
+      <h3>🏆 Top 10 Brands</h3>
+      <VChart :option="brandsOption" />
+    </div>
+    <div class="chart-card">
+      <h3>💰 Price by Category</h3>
+      <VChart :option="priceOption" />
+    </div>
+    <div class="chart-card">
+      <h3>⭐ Rating by Category</h3>
+      <VChart :option="ratingOption" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import VChart from 'vue-echarts'
+import { BarChart, PieChart, LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TitleComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+VChart.use([
+  BarChart,
+  PieChart,
+  LineChart,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  CanvasRenderer
+])
+
+export default defineComponent({
+  name: 'Charts',
+  components: { VChart },
+  data() {
+    return {
+      categoriesOption: {
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: [{ type: 'bar', data: [], itemStyle: { color: '#667eea' } }],
+        toolbox: { show: false }
+      },
+      brandsOption: {
+        series: [{
+          type: 'pie',
+          data: [],
+          itemStyle: {
+            color: ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#fee140']
+          }
+        }],
+        toolbox: { show: false }
+      },
+      priceOption: {
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: [{ type: 'bar', data: [], itemStyle: { color: '#667eea' } }],
+        toolbox: { show: false }
+      },
+      ratingOption: {
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value', min: 0, max: 5 },
+        series: [{
+          type: 'line',
+          data: [],
+          smooth: true,
+          itemStyle: { color: '#764ba2' },
+          areaStyle: { color: 'rgba(118, 75, 162, 0.2)' }
+        }],
+        toolbox: { show: false }
+      }
+    }
+  },
+  methods: {
+    async loadCharts() {
+      try {
+        // Categories
+        const catsRes = await fetch('/stats/categories')
+        const catsData = await catsRes.json()
+        this.categoriesOption.xAxis.data = Object.keys(catsData)
+        this.categoriesOption.series[0].data = Object.values(catsData)
+
+        // Brands
+        const brandsRes = await fetch('/stats/brands')
+        const brandsData = await brandsRes.json()
+        this.brandsOption.series[0].data = Object.keys(brandsData).map((key, i) => ({
+          name: key,
+          value: brandsData[key]
+        }))
+
+        // Price
+        const priceRes = await fetch('/stats/price')
+        const priceData = await priceRes.json()
+        this.priceOption.xAxis.data = priceData.map(d => d.category)
+        this.priceOption.series[0].data = priceData.map(d => d.mean)
+
+        // Rating
+        const ratingRes = await fetch('/stats/rating')
+        const ratingData = await ratingRes.json()
+        this.ratingOption.xAxis.data = ratingData.map(d => d.category)
+        this.ratingOption.series[0].data = ratingData.map(d => d.mean)
+      } catch (error) {
+        console.error('Failed to load charts:', error)
+      }
+    }
+  },
+  mounted() {
+    this.loadCharts()
+  }
+})
+</script>
+
+<style scoped>
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.chart-card {
+  background: white;
+  padding: 25px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.chart-card h3 {
+  color: #667eea;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.chart-card div {
+  height: 300px;
+}
+</style>

frontend/src/components/Insights.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="insights-grid">
+    <div class="insight-card" v-for="(value, key) in insights" :key="key">
+      <h3>{{ labels[key] }}</h3>
+      <div class="value">{{ formatValue(key, value) }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Insights',
+  data() {
+    return {
+      insights: {},
+      labels: {
+        total_products: 'Total Products',
+        categories: 'Categories',
+        brands: 'Brands',
+        avg_price: 'Avg Price',
+        avg_rating: 'Avg Rating',
+        min_price: 'Min Price',
+        max_price: 'Max Price'
+      }
+    }
+  },
+  methods: {
+    formatValue(key, value) {
+      if (key.includes('price')) return `$${value}`
+      if (key.includes('rating')) return value
+      return value
+    },
+    async loadInsights() {
+      try {
+        const res = await fetch('/insights')
+        this.insights = await res.json()
+      } catch (error) {
+        console.error('Failed to load insights:', error)
+      }
+    }
+  },
+  mounted() {
+    this.loadInsights()
+  }
+}
+</script>
+
+<style scoped>
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.insight-card {
+  background: white;
+  padding: 25px;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: transform 0.3s;
+}
+
+.insight-card:hover {
+  transform: translateY(-5px);
+}
+
+.insight-card h3 {
+  color: #666;
+  font-size: 0.9em;
+  margin-bottom: 10px;
+}
+
+.insight-card .value {
+  color: #667eea;
+  font-size: 2em;
+  font-weight: bold;
+}
+</style>

frontend/src/components/SearchFilter.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="search-section">
+    <h3>🔍 Search & Filter Products</h3>
+    <form class="search-form" @submit.prevent="submit">
+      <input
+        type="text"
+        v-model="query"
+        placeholder="Search products..."
+        class="search-input"
+      />
+      <select v-model="category" class="filter-select">
+        <option value="">All Categories</option>
+        <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
+      </select>
+      <input
+        type="number"
+        v-model="minPrice"
+        placeholder="Min Price"
+        class="filter-select"
+      />
+      <input
+        type="number"
+        v-model="maxPrice"
+        placeholder="Max Price"
+        class="filter-select"
+      />
+      <input
+        type="number"
+        v-model="minRating"
+        placeholder="Min Rating"
+        step="0.1"
+        min="0"
+        max="5"
+        class="filter-select"
+      />
+      <button type="submit" class="btn">Search</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchFilter',
+  data() {
+    return {
+      query: '',
+      category: '',
+      minPrice: '',
+      maxPrice: '',
+      minRating: '',
+      categories: []
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit('search', {
+        query: this.query,
+        category: this.category,
+        minPrice: this.minPrice,
+        maxPrice: this.maxPrice,
+        minRating: this.minRating
+      })
+    },
+    async loadCategories() {
+      try {
+        const res = await fetch('/stats/categories')
+        const data = await res.json()
+        this.categories = Object.keys(data)
+      } catch (error) {
+        console.error('Failed to load categories:', error)
+      }
+    }
+  },
+  mounted() {
+    this.loadCategories()
+  }
+}
+</script>
+
+<style scoped>
+.search-section {
+  background: white;
+  padding: 25px;
+  border-radius: 15px;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.search-section h3 {
+  color: #667eea;
+  margin-bottom: 20px;
+}
+
+.search-form {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 300px;
+  padding: 15px;
+  border: 2px solid #ddd;
+  border-radius: 10px;
+  font-size: 1em;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.filter-select {
+  padding: 15px;
+  border: 2px solid #ddd;
+  border-radius: 10px;
+  font-size: 1em;
+  background: white;
+}
+
+.btn {
+  padding: 15px 30px;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1em;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: #764ba2;
+}
+
+@media (max-width: 768px) {
+  .search-form {
+    flex-direction: column;
+  }
+  .search-input {
+    min-width: 100%;
+  }
+}
+</style>

frontend/src/components/Table.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="table-section">
+    <h3>📦 Products</h3>
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Category</th>
+            <th>Brand</th>
+            <th>Price</th>
+            <th>Rating</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="product in products" :key="product.product_name">
+            <td>{{ product.product_name || '-' }}</td>
+            <td>{{ product.category || '-' }}</td>
+            <td>{{ product.brand || '-' }}</td>
+            <td>${{ product.price || 0 }}</td>
+            <td>{{ product.rating || '-' }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="pagination">
+      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">Previous</button>
+      <span>Page {{ currentPage }} of {{ totalPages }}</span>
+      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">Next</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Table',
+  props: {
+    products: Array,
+    currentPage: Number,
+    totalPages: Number
+  },
+  methods: {
+    changePage(page) {
+      if (page < 1 || page > this.totalPages) return
+      this.$emit('page-change', page)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-section {
+  background: white;
+  padding: 25px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.table-section h3 {
+  color: #667eea;
+  margin-bottom: 20px;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 15px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background: #667eea;
+  color: white;
+  font-weight: bold;
+}
+
+tr:hover {
+  background: #f5f5f5;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.pagination button {
+  padding: 10px 20px;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.pagination button:hover:not(:disabled) {
+  background: #764ba2;
+}
+
+.pagination button:disabled {
+  background: #ddd;
+  cursor: not-allowed;
+}
+</style>

frontend/src/index.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}

frontend/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')

frontend/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#667eea',
+        secondary: '#764ba2',
+        accent: '#f093fb'
+      }
+    }
+  },
+  plugins: []
+}

frontend/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/data': 'http://localhost:8000',
+      '/stats': 'http://localhost:8000',
+      '/insights': 'http://localhost:8000',
+      '/search': 'http://localhost:8000',
+      '/filter': 'http://localhost:8000',
+      '/recommend': 'http://localhost:8000'
+    }
+  }
+})

requirements.txt

@@ -1,4 +1,4 @@
-fastapi==0.109.2
+fastapi
 uvicorn
 pandas
 kaggle