Fix UI issues and add example data

- Update Home page to match local version (remove unnecessary features section)
- Update Browse page with proper styling and functionality
- Update server with comprehensive example data and all endpoints
- Add missing dependencies (axios, cheerio, node-cron, uuid, dotenv)
- Fix Random page crash by providing /api/stats endpoint and example data

client/package-lock.json

@@ -1,25 +1,28 @@
 {
   "name": "transcreation-explorer-client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "transcreation-explorer-client",
-      "version": "0.1.0",
+      "version": "1.0.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "axios": "^1.6.2",
-        "framer-motion": "^10.16.5",
-        "lucide-react": "^0.294.0",
+        "axios": "^1.6.7",
+        "framer-motion": "^10.16.16",
+        "lucide-react": "^0.323.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.4.1",
-        "react-router-dom": "^6.8.1",
+        "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.1"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -2950,9 +2953,9 @@
       }
     },
     "node_modules/@jest/expect-utils": {
-      "version": "30.0.4",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.0.4.tgz",
-      "integrity": "sha512-EgXecHDNfANeqOkcak0DxsoVI4qkDUsR7n/Lr2vtmTBjwLPBnnPOF71S11Q8IObWzxm2QgQoY6f9hzrRD3gHRA==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.0.5.tgz",
+      "integrity": "sha512-F3lmTT7CXWYywoVUGTCmom0vXq3HTTkaZyTAzIy+bXSBizB7o5qzlC9VCtq0arOa8GqmNsbg/cE9C6HLn7Szew==",
       "license": "MIT",
       "dependencies": {
         "@jest/get-type": "30.0.1"
@@ -3329,9 +3332,9 @@
       }
     },
     "node_modules/@jest/schemas": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.1.tgz",
-      "integrity": "sha512-+g/1TKjFuGrf1Hh0QPCv0gISwBxJ+MQSNXmG9zjHy7BmFhtoJ9fdNhWJp3qUKRi93AOZHXtdxZgJ1vAtz6z65w==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz",
+      "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "license": "MIT",
       "dependencies": {
         "@sinclair/typebox": "^0.34.0"
@@ -3538,13 +3541,13 @@
       }
     },
     "node_modules/@jest/types": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.0.1.tgz",
-      "integrity": "sha512-HGwoYRVF0QSKJu1ZQX0o5ZrUrrhj0aOOFA8hXrumD7SIzjouevhawbTjmXdwOmURdGluU9DM/XvGm3NyFoiQjw==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.0.5.tgz",
+      "integrity": "sha512-aREYa3aku9SSnea4aX6bhKn4bgv3AXkgijoQgbYV3yvbiGt6z+MQ85+6mIhx9DsKW2BuB/cLR/A+tcMThx+KLQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/pattern": "30.0.1",
-        "@jest/schemas": "30.0.1",
+        "@jest/schemas": "30.0.5",
         "@types/istanbul-lib-coverage": "^2.0.6",
         "@types/istanbul-reports": "^3.0.4",
         "@types/node": "*",
@@ -4458,12 +4461,12 @@
       }
     },
     "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.2.tgz",
-      "integrity": "sha512-yC5/EBSOrTtqhCKfLHqoUIAXVRZnukHPwWBJWR7h84Q3Be1DRQZLncwcfLoPA5RPQ65qfiCMqgYwdUuQ//eVpg==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
+      "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==",
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "30.0.1",
+        "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
         "react-is": "^18.3.1"
       },
@@ -4496,9 +4499,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.0.15",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.15.tgz",
-      "integrity": "sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA==",
+      "version": "24.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
+      "integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.8.0"
@@ -5682,13 +5685,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -7699,9 +7702,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.187",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",
-      "integrity": "sha512-cl5Jc9I0KGUoOoSbxvTywTa40uspGJt/BDBoDLoxJRSBpWh4FFXBsjNRHfQrONsV/OoEjDfHUmZQa2d6Ze4YgA==",
+      "version": "1.5.190",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.190.tgz",
+      "integrity": "sha512-k4McmnB2091YIsdCgkS0fMVMPOJgxl93ltFzaryXqwip1AaxeDqKCGLxkXODDA5Ab/D+tV5EL5+aTx76RvLRxw==",
       "license": "ISC"
     },
     "node_modules/emittery": {
@@ -8704,17 +8707,17 @@
       }
     },
     "node_modules/expect": {
-      "version": "30.0.4",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-30.0.4.tgz",
-      "integrity": "sha512-dDLGjnP2cKbEppxVICxI/Uf4YemmGMPNy0QytCbfafbpYk9AFQsxb8Uyrxii0RPK7FWgLGlSem+07WirwS3cFQ==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-30.0.5.tgz",
+      "integrity": "sha512-P0te2pt+hHI5qLJkIR+iMvS+lYUZml8rKKsohVHAGY+uClp9XVbdyYNJOIjSRpHVp8s8YqxJCiHUkSYZGr8rtQ==",
       "license": "MIT",
       "dependencies": {
-        "@jest/expect-utils": "30.0.4",
+        "@jest/expect-utils": "30.0.5",
         "@jest/get-type": "30.0.1",
-        "jest-matcher-utils": "30.0.4",
-        "jest-message-util": "30.0.2",
-        "jest-mock": "30.0.2",
-        "jest-util": "30.0.2"
+        "jest-matcher-utils": "30.0.5",
+        "jest-message-util": "30.0.5",
+        "jest-mock": "30.0.5",
+        "jest-util": "30.0.5"
       },
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
@@ -11320,15 +11323,15 @@
       }
     },
     "node_modules/jest-diff": {
-      "version": "30.0.4",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.0.4.tgz",
-      "integrity": "sha512-TSjceIf6797jyd+R64NXqicttROD+Qf98fex7CowmlSn7f8+En0da1Dglwr1AXxDtVizoxXYZBlUQwNhoOXkNw==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.0.5.tgz",
+      "integrity": "sha512-1UIqE9PoEKaHcIKvq2vbibrCog4Y8G0zmOxgQUVEiTqwR5hJVMCoDsN1vFvI5JvwD37hjueZ1C4l2FyGnfpE0A==",
       "license": "MIT",
       "dependencies": {
         "@jest/diff-sequences": "30.0.1",
         "@jest/get-type": "30.0.1",
         "chalk": "^4.1.2",
-        "pretty-format": "30.0.2"
+        "pretty-format": "30.0.5"
       },
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
@@ -11347,12 +11350,12 @@
       }
     },
     "node_modules/jest-diff/node_modules/pretty-format": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.2.tgz",
-      "integrity": "sha512-yC5/EBSOrTtqhCKfLHqoUIAXVRZnukHPwWBJWR7h84Q3Be1DRQZLncwcfLoPA5RPQ65qfiCMqgYwdUuQ//eVpg==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
+      "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==",
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "30.0.1",
+        "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
         "react-is": "^18.3.1"
       },
@@ -11951,15 +11954,15 @@
       }
     },
     "node_modules/jest-matcher-utils": {
-      "version": "30.0.4",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.0.4.tgz",
-      "integrity": "sha512-ubCewJ54YzeAZ2JeHHGVoU+eDIpQFsfPQs0xURPWoNiO42LGJ+QGgfSf+hFIRplkZDkhH5MOvuxHKXRTUU3dUQ==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.0.5.tgz",
+      "integrity": "sha512-uQgGWt7GOrRLP1P7IwNWwK1WAQbq+m//ZY0yXygyfWp0rJlksMSLQAA4wYQC3b6wl3zfnchyTx+k3HZ5aPtCbQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/get-type": "30.0.1",
         "chalk": "^4.1.2",
-        "jest-diff": "30.0.4",
-        "pretty-format": "30.0.2"
+        "jest-diff": "30.0.5",
+        "pretty-format": "30.0.5"
       },
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
@@ -11978,12 +11981,12 @@
       }
     },
     "node_modules/jest-matcher-utils/node_modules/pretty-format": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.2.tgz",
-      "integrity": "sha512-yC5/EBSOrTtqhCKfLHqoUIAXVRZnukHPwWBJWR7h84Q3Be1DRQZLncwcfLoPA5RPQ65qfiCMqgYwdUuQ//eVpg==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
+      "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==",
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "30.0.1",
+        "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
         "react-is": "^18.3.1"
       },
@@ -11998,18 +12001,18 @@
       "license": "MIT"
     },
     "node_modules/jest-message-util": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.0.2.tgz",
-      "integrity": "sha512-vXywcxmr0SsKXF/bAD7t7nMamRvPuJkras00gqYeB1V0WllxZrbZ0paRr3XqpFU2sYYjD0qAaG2fRyn/CGZ0aw==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.0.5.tgz",
+      "integrity": "sha512-NAiDOhsK3V7RU0Aa/HnrQo+E4JlbarbmI3q6Pi4KcxicdtjV82gcIUrejOtczChtVQR4kddu1E1EJlW6EN9IyA==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
-        "@jest/types": "30.0.1",
+        "@jest/types": "30.0.5",
         "@types/stack-utils": "^2.0.3",
         "chalk": "^4.1.2",
         "graceful-fs": "^4.2.11",
         "micromatch": "^4.0.8",
-        "pretty-format": "30.0.2",
+        "pretty-format": "30.0.5",
         "slash": "^3.0.0",
         "stack-utils": "^2.0.6"
       },
@@ -12030,12 +12033,12 @@
       }
     },
     "node_modules/jest-message-util/node_modules/pretty-format": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.2.tgz",
-      "integrity": "sha512-yC5/EBSOrTtqhCKfLHqoUIAXVRZnukHPwWBJWR7h84Q3Be1DRQZLncwcfLoPA5RPQ65qfiCMqgYwdUuQ//eVpg==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.5.tgz",
+      "integrity": "sha512-D1tKtYvByrBkFLe2wHJl2bwMJIiT8rW+XA+TiataH79/FszLQMrpGEvzUVkzPau7OCO0Qnrhpe87PqtOAIB8Yw==",
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "30.0.1",
+        "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
         "react-is": "^18.3.1"
       },
@@ -12050,14 +12053,14 @@
       "license": "MIT"
     },
     "node_modules/jest-mock": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.2.tgz",
-      "integrity": "sha512-PnZOHmqup/9cT/y+pXIVbbi8ID6U1XHRmbvR7MvUy4SLqhCbwpkmXhLbsWbGewHrV5x/1bF7YDjs+x24/QSvFA==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.5.tgz",
+      "integrity": "sha512-Od7TyasAAQX/6S+QCbN6vZoWOMwlTtzzGuxJku1GhGanAjz9y+QsQkpScDmETvdc9aSXyJ/Op4rhpMYBWW91wQ==",
       "license": "MIT",
       "dependencies": {
-        "@jest/types": "30.0.1",
+        "@jest/types": "30.0.5",
         "@types/node": "*",
-        "jest-util": "30.0.2"
+        "jest-util": "30.0.5"
       },
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
@@ -12673,12 +12676,12 @@
       }
     },
     "node_modules/jest-util": {
-      "version": "30.0.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.0.2.tgz",
-      "integrity": "sha512-8IyqfKS4MqprBuUpZNlFB5l+WFehc8bfCe1HSZFHzft2mOuND8Cvi9r1musli+u6F3TqanCZ/Ik4H4pXUolZIg==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.0.5.tgz",
+      "integrity": "sha512-pvyPWssDZR0FlfMxCBoc0tvM8iUEskaRFALUtGQYzVEAqisAztmy+R8LnU14KT4XA0H/a5HMVTXat1jLne010g==",
       "license": "MIT",
       "dependencies": {
-        "@jest/types": "30.0.1",
+        "@jest/types": "30.0.5",
         "@types/node": "*",
         "chalk": "^4.1.2",
         "ci-info": "^4.2.0",
@@ -13585,9 +13588,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.294.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.294.0.tgz",
-      "integrity": "sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==",
+      "version": "0.323.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.323.0.tgz",
+      "integrity": "sha512-rTXZFILl2Y4d1SG9p1Mdcf17AcPvPvpc/egFIzUrp7IUy60MUQo3Oi1mu8LGYXUVwuRZYsSMt3csHRW5mAovJg==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
@@ -18822,9 +18825,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -18832,7 +18835,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {

client/src/pages/Browse.js

@@ -1,35 +1,36 @@
 import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
 import axios from 'axios';
+import toast from 'react-hot-toast';
 import ExampleCard from '../components/ExampleCard';
-import LoadingSpinner from '../components/LoadingSpinner';
+import { Filter, Grid } from 'lucide-react';
 
 const Browse = () => {
   const [examples, setExamples] = useState([]);
   const [filteredExamples, setFilteredExamples] = useState([]);
   const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
   const [selectedCategory, setSelectedCategory] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [examplesResponse, categoriesResponse] = await Promise.all([
-          axios.get('/api/examples'),
-          axios.get('/api/categories')
-        ]);
-        
-        setExamples(examplesResponse.data.data || []);
-        setCategories(categoriesResponse.data.data || []);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-        setExamples([]);
-        setCategories([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+  const fetchData = async () => {
+    try {
+      const [examplesRes, categoriesRes] = await Promise.all([
+        axios.get('/api/examples'),
+        axios.get('/api/categories')
+      ]);
+
+      setExamples(examplesRes.data.data);
+      setFilteredExamples(examplesRes.data.data);
+      setCategories(categoriesRes.data.data);
+    } catch (error) {
+      toast.error('Failed to load examples');
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchData();
   }, []);
 
@@ -37,52 +38,56 @@ const Browse = () => {
     let filtered = examples;
 
     if (selectedCategory) {
-      filtered = filtered.filter(example => 
-        example.category === selectedCategory
-      );
-    }
-
-    if (searchTerm) {
       filtered = filtered.filter(example =>
-        example.english.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        example.mainland.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (example.taiwan && example.taiwan.toLowerCase().includes(searchTerm.toLowerCase())) ||
-        example.brand.toLowerCase().includes(searchTerm.toLowerCase())
+        example.category === selectedCategory
       );
     }
 
     setFilteredExamples(filtered);
-  }, [examples, selectedCategory, searchTerm]);
+  }, [examples, selectedCategory]);
 
-  if (isLoading) {
-    return <LoadingSpinner />;
-  }
+  const handleCategoryChange = (e) => {
+    setSelectedCategory(e.target.value);
+  };
 
-  return (
-    <div className="browse">
-      <div className="browse-header">
-        <h1>Browse Examples</h1>
-        <p>Explore our collection of transcreation examples</p>
+  const clearFilters = () => {
+    setSelectedCategory('');
+  };
+
+  if (loading) {
+    return (
+      <div className="loading">
+        <div className="spinner"></div>
       </div>
+    );
+  }
 
-      <div className="browse-filters">
-        <div className="filter-group">
-          <label htmlFor="search">Search:</label>
-          <input
-            id="search"
-            type="text"
-            placeholder="Search examples..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6 }}
+    >
+      <div className="card" style={{ marginBottom: '2rem' }}>
+        <h1 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Grid size={24} />
+          Browse Examples
+        </h1>
+        <p style={{ color: '#666', marginBottom: '1.5rem' }}>
+          Explore our collection of {examples.length} transcreation examples from 
+          leading global brands. Use the filter below to find specific examples.
+        </p>
 
-        <div className="filter-group">
-          <label htmlFor="category">Category:</label>
+        <div className="filters">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Filter size={16} />
+            <span style={{ fontWeight: '600' }}>Filter:</span>
+          </div>
+          
           <select
-            id="category"
+            className="filter-select"
             value={selectedCategory}
-            onChange={(e) => setSelectedCategory(e.target.value)}
+            onChange={handleCategoryChange}
           >
             <option value="">All Categories</option>
             {categories.map(category => (
@@ -91,25 +96,67 @@ const Browse = () => {
               </option>
             ))}
           </select>
+
+          {selectedCategory && (
+            <button 
+              className="btn btn-secondary" 
+              onClick={clearFilters}
+              style={{ padding: '0.5rem 1rem' }}
+            >
+              Clear Filter
+            </button>
+          )}
         </div>
-      </div>
 
-      <div className="examples-grid">
-        {filteredExamples.length === 0 ? (
-          <div className="no-results">
-            <p>No examples found matching your criteria.</p>
-          </div>
-        ) : (
-          filteredExamples.map(example => (
-            <ExampleCard key={example.id} example={example} />
-          ))
-        )}
+        <div style={{ color: '#666', fontSize: '0.9rem' }}>
+          Showing {filteredExamples.length} of {examples.length} examples
+        </div>
       </div>
 
-      <div className="results-count">
-        Showing {filteredExamples.length} of {examples.length} examples
-      </div>
-    </div>
+      {examples.length === 0 ? (
+        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
+          <Grid size={48} style={{ color: '#ccc', marginBottom: '1rem' }} />
+          <h3 style={{ marginBottom: '1rem' }}>No Examples Available</h3>
+          <p style={{ color: '#666', marginBottom: '1.5rem' }}>
+            There are currently no examples in the database.
+          </p>
+        </div>
+      ) : filteredExamples.length === 0 ? (
+        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
+          <h3 style={{ marginBottom: '1rem' }}>No examples found</h3>
+          <p style={{ color: '#666', marginBottom: '1.5rem' }}>
+            No examples match your current filter setting. Try adjusting your filter.
+          </p>
+          <button 
+            className="btn btn-secondary" 
+            onClick={clearFilters}
+          >
+            Clear Filter
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-2">
+          {filteredExamples.map((example, index) => (
+            <ExampleCard 
+              key={example.id} 
+              example={example} 
+              index={index}
+            />
+          ))}
+        </div>
+      )}
+
+      <style jsx>{`
+        .spin {
+          animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </motion.div>
   );
 };
 

client/src/pages/Home.js

@@ -1,44 +1,58 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Shuffle, List } from 'lucide-react';
 
 const Home = () => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+      },
+    },
+  };
+
   return (
-    <div className="home">
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
       <section className="hero">
-        <h1>Transcreation Explorer</h1>
-        <p>
+        <motion.h1 variants={itemVariants}>
+          Transcreation Explorer
+        </motion.h1>
+        <motion.p variants={itemVariants}>
           Discover the art of transcreation through real-world examples of English-Chinese 
           marketing adaptations. See how global brands craft different messages for 
           mainland China and Taiwan markets.
-        </p>
+        </motion.p>
         
-        <div className="hero-actions">
+        <motion.div className="hero-actions" variants={itemVariants}>
           <Link to="/random" className="btn btn-large">
-            Explore Random Example
+            <Shuffle size={20} />
+            Discover Examples
           </Link>
-          <Link to="/browse" className="btn btn-outline">
-            Browse All Examples
+          <Link to="/browse" className="btn btn-secondary btn-large">
+            <List size={20} />
+            Browse Collection
           </Link>
-        </div>
-      </section>
-
-      <section className="features">
-        <div className="feature-grid">
-          <div className="feature-card">
-            <h3>Real Examples</h3>
-            <p>Curated collection of actual brand transcreations</p>
-          </div>
-          <div className="feature-card">
-            <h3>Cultural Context</h3>
-            <p>Understanding why adaptations were made</p>
-          </div>
-          <div className="feature-card">
-            <h3>Regional Differences</h3>
-            <p>See how mainland China and Taiwan differ</p>
-          </div>
-        </div>
+        </motion.div>
       </section>
-    </div>
+    </motion.div>
   );
 };
 

server/index.js

@@ -1,31 +1,25 @@
 const express = require('express');
 const cors = require('cors');
+const axios = require('axios');
+const cheerio = require('cheerio');
 const path = require('path');
 const fs = require('fs').promises;
+const cron = require('node-cron');
+const { v4: uuidv4 } = require('uuid');
+require('dotenv').config();
 
 const app = express();
 const PORT = process.env.PORT || 7860;
 
-console.log('🚀 Starting Transcreation Explorer Server...');
-console.log('📍 Environment:', process.env.NODE_ENV);
-console.log('🔌 Port:', PORT);
-
 app.use(cors());
 app.use(express.json());
 
 // Serve static files from React build in production
 if (process.env.NODE_ENV === 'production') {
-  const buildPath = path.join(__dirname, '../client/build');
-  console.log('📁 Serving static files from:', buildPath);
-  app.use(express.static(buildPath));
+  app.use(express.static(path.join(__dirname, '../client/build')));
 }
 
-// Test route to confirm our server is running
-app.get('/test', (req, res) => {
-  res.json({ message: 'Transcreation Explorer API is working!', timestamp: new Date().toISOString() });
-});
-
-// In-memory storage for examples
+// In-memory storage for examples (in production, you'd use a database)
 let transcreationExamples = [];
 
 // Load cached examples from file on startup
@@ -43,30 +37,300 @@ const loadCachedExamples = async () => {
 // Save examples to file
 const saveCachedExamples = async () => {
   try {
+    // Sort examples by dateAdded to maintain consistent order
+    const sortedExamples = [...transcreationExamples].sort((a, b) => 
+      new Date(a.dateAdded) - new Date(b.dateAdded)
+    );
+
+    // Ensure all examples have consistent structure
+    const cleanedExamples = sortedExamples.map(example => ({
+      ...example,
+      // Ensure optional fields are properly handled
+      status: example.status ?? 'pending',
+      contributor: example.contributor === undefined ? null : example.contributor,
+      type: example.type ?? 'slogan',
+      description: example.description ?? '',
+      lastModified: example.lastModified ?? example.dateAdded
+    }));
+
     await fs.writeFile(
       path.join(__dirname, 'cached-examples.json'), 
-      JSON.stringify(transcreationExamples, null, 2)
+      JSON.stringify(cleanedExamples, null, 2)
     );
-    console.log(`💾 Saved ${transcreationExamples.length} examples to cache`);
+    console.log(`💾 Saved ${cleanedExamples.length} examples to cache`);
   } catch (error) {
     console.error('❌ Failed to save examples:', error);
   }
 };
 
+// Search for transcreation examples online
+const searchTranscreationExamples = async (category = '', maxResults = 5) => {
+  console.log(`🔍 Searching for transcreation examples...`);
+  
+  try {
+    // Simulate online search with curated examples
+    // In a real implementation, this would scrape marketing sites, case studies, etc.
+    const simulatedResults = await simulateOnlineSearch(category, maxResults);
+    
+    // Add to our cache
+    for (const example of simulatedResults) {
+      // Check if already exists
+      const exists = transcreationExamples.find(ex => 
+        ex.english.toLowerCase() === example.english.toLowerCase() && 
+        ex.brand.toLowerCase() === example.brand.toLowerCase()
+      );
+      
+      if (!exists) {
+        example.id = Date.now().toString() + Math.random().toString(36).substr(2, 9);
+        example.dateAdded = new Date().toISOString();
+        example.source = 'Online Search';
+        transcreationExamples.push(example);
+        console.log(`✅ Added new example: ${example.brand} - ${example.english}`);
+      }
+    }
+    
+    // Save to cache
+    await saveCachedExamples();
+    
+    return simulatedResults;
+  } catch (error) {
+    console.error('❌ Search failed:', error);
+    return [];
+  }
+};
+
+// Simulate online search with realistic examples
+const simulateOnlineSearch = async (category = '', maxResults = 5) => {
+  // This simulates what would be scraped from marketing sites
+  const searchResults = [
+    // Brand Names
+    {
+      english: 'MasterCard',
+      mainland: '万事达卡',
+      taiwan: '萬事達卡',
+      brand: 'MasterCard',
+      category: 'Financial Services',
+      description: 'Global payment brand name adaptation emphasizing universal capability.',
+      type: 'brand_name',
+      culturalNote: 'Both versions use characters meaning "everything achievable", with traditional vs simplified characters being the main difference.'
+    },
+    {
+      english: 'IKEA',
+      mainland: '宜家',
+      taiwan: '宜家家居',
+      brand: 'IKEA',
+      category: 'Retail',
+      description: 'Swedish furniture retailer\'s name adapted to reflect affordability and home focus.',
+      type: 'brand_name',
+      culturalNote: 'Mainland uses shorter version meaning "suitable home", Taiwan adds "home furnishings" for clarity.'
+    },
+    {
+      english: 'Bing',
+      mainland: '必应',
+      taiwan: '必應',
+      brand: 'Microsoft',
+      category: 'Technology',
+      description: 'Microsoft\'s search engine name adapted to reflect responsiveness.',
+      type: 'brand_name',
+      culturalNote: 'Both versions use characters meaning "must respond", maintaining the concept of getting answers.'
+    },
+    {
+      english: 'Subway',
+      mainland: '赛百味',
+      taiwan: '賽百味',
+      brand: 'Subway',
+      category: 'Food & Beverage',
+      description: 'Restaurant chain name adapted to focus on taste rather than transportation meaning.',
+      type: 'brand_name',
+      culturalNote: 'Both use characters meaning "competing hundred tastes", completely departing from subway/metro meaning.'
+    },
+    {
+      english: 'Mercedes-Benz',
+      mainland: '奔驰',
+      taiwan: '賓士',
+      brand: 'Mercedes-Benz',
+      category: 'Automotive',
+      description: 'Luxury car manufacturer name adapted differently in each region.',
+      type: 'brand_name',
+      culturalNote: 'Mainland emphasizes speed ("galloping"), Taiwan uses phonetic translation of "Benz".'
+    },
+    {
+      english: 'BMW',
+      mainland: '宝马',
+      taiwan: '寶馬',
+      brand: 'BMW',
+      category: 'Automotive',
+      description: 'German automaker name adapted using traditional lucky symbolism.',
+      type: 'brand_name',
+      culturalNote: 'Both use "precious horse", a culturally auspicious symbol, differing only in traditional vs simplified characters.'
+    },
+    {
+      english: 'Revlon',
+      mainland: '露华浓',
+      taiwan: '露華濃',
+      brand: 'Revlon',
+      category: 'Beauty & Cosmetics',
+      description: 'Cosmetics brand name adapted using poetic beauty references.',
+      type: 'brand_name',
+      culturalNote: 'Both use poetic phrase meaning "concentrated dew", evoking natural beauty and luxury.'
+    },
+    // Food & Beverage
+    {
+      english: 'Open Happiness',
+      mainland: '畅爽开怀',
+      taiwan: '分享快樂',
+      brand: 'Coca-Cola',
+      category: 'Food & Beverage',
+      description: 'Coca-Cola\'s global campaign adapted differently for mainland China (emphasizing refreshment) vs Taiwan (emphasizing sharing joy).',
+      type: 'slogan',
+      culturalNote: 'Mainland version focuses on personal refreshing experience, Taiwan version emphasizes social sharing aspect valued in Taiwanese culture.'
+    },
+    {
+      english: 'Taste the Feeling',
+      mainland: '可口可乐 就是要这个味',
+      taiwan: '就是這個味道',
+      brand: 'Coca-Cola',
+      category: 'Food & Beverage',
+      description: 'Another Coca-Cola campaign focusing on the sensory experience of the product.',
+      type: 'slogan',
+      culturalNote: 'Mainland version includes brand name and emphasizes specificity, Taiwan version is more poetic.'
+    },
+    {
+      english: 'Have a Break, Have a Kit Kat',
+      mainland: '休息一下，来根奇巧',
+      taiwan: '休息一下，吃個Kit Kat',
+      brand: 'Kit Kat',
+      category: 'Food & Beverage',
+      description: 'Kit Kat\'s break concept maintaining rhythm while using different approaches to product naming.',
+      type: 'slogan',
+      culturalNote: 'Mainland uses localized brand name, Taiwan keeps original brand name with local language structure.'
+    },
+    {
+      english: 'I\'m Lovin\' It',
+      mainland: '我就喜欢',
+      taiwan: '我愛死了',
+      brand: 'McDonald\'s',
+      category: 'Food & Beverage',
+      description: 'McDonald\'s global jingle adapted for regional expressions of enjoyment and enthusiasm.',
+      type: 'slogan',
+      culturalNote: 'Mainland uses softer expression of liking, Taiwan uses more enthusiastic colloquial expression.'
+    },
+    {
+      english: 'Finger Lickin\' Good',
+      mainland: '美味到舔手指',
+      taiwan: '好吃到舔手指',
+      brand: 'KFC',
+      category: 'Food & Beverage',
+      description: 'KFC\'s sensory appeal slogan with regional preferences for describing taste intensity.',
+      type: 'slogan',
+      culturalNote: 'Both maintain the playful imagery but use different intensifiers for taste description.'
+    },
+    // Technology
+    {
+      english: 'Think Different',
+      mainland: '非同凡想',
+      taiwan: '不同凡想',
+      brand: 'Apple',
+      category: 'Technology',
+      description: 'Apple\'s famous campaign with slight variations - mainland uses more contemporary language, Taiwan preserves traditional elements.',
+      type: 'slogan',
+      culturalNote: 'Both versions maintain the creative rebellion message but adapt to local linguistic preferences.'
+    },
+    {
+      english: 'Connecting People',
+      mainland: '科技以人为本',
+      taiwan: '串聯你我',
+      brand: 'Nokia',
+      category: 'Technology',
+      description: 'Nokia\'s brand promise adapted to different cultural values about technology\'s role in society.',
+      type: 'slogan',
+      culturalNote: 'Mainland emphasizes human-centered technology philosophy, Taiwan emphasizes personal connection.'
+    },
+    {
+      english: 'Just Do It',
+      mainland: '想做���做',
+      taiwan: '做就對了',
+      brand: 'Nike',
+      category: 'Sports & Lifestyle',
+      description: 'Nike\'s motivational slogan adapted to resonate with different cultural attitudes toward action and decision-making.',
+      type: 'slogan',
+      culturalNote: 'Mainland version emphasizes desire and action, Taiwan version emphasizes confidence and correctness.'
+    },
+    {
+      english: 'Because You\'re Worth It',
+      mainland: '你值得拥有',
+      taiwan: '因為你值得',
+      brand: 'L\'Oréal',
+      category: 'Beauty & Cosmetics',
+      description: 'L\'Oréal\'s empowerment message adapted for different concepts of self-worth and beauty standards.',
+      type: 'slogan',
+      culturalNote: 'Mainland focuses on possession/ownership, Taiwan emphasizes inherent worthiness.'
+    },
+    {
+      english: 'The Ultimate Driving Machine',
+      mainland: '终极驾驶机器',
+      taiwan: '終極駕馭樂趣',
+      brand: 'BMW',
+      category: 'Automotive',
+      description: 'BMW\'s precision-focused tagline adapted to emphasize different aspects of the driving experience.',
+      type: 'slogan',
+      culturalNote: 'Mainland emphasizes mechanical excellence, Taiwan emphasizes the joy and control of driving.'
+    },
+    {
+      english: 'The World\'s Local Bank',
+      mainland: '环球金融，地方智慧',
+      taiwan: '環球金融，地方智慧',
+      brand: 'HSBC',
+      category: 'Financial Services',
+      description: 'HSBC\'s global-local positioning adapted for different markets.',
+      type: 'slogan',
+      culturalNote: 'Different approaches to expressing the global-local balance.'
+    }
+  ];
+
+  // Filter by category if specified
+  let results = searchResults;
+  if (category) {
+    results = searchResults.filter(ex => 
+      ex.category.toLowerCase().includes(category.toLowerCase())
+    );
+  }
+
+  // Simulate network delay
+  await new Promise(resolve => setTimeout(resolve, 1500 + Math.random() * 2000));
+
+  // Return random subset
+  const shuffled = results.sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, Math.min(maxResults, shuffled.length));
+};
+
 // Initialize cache on startup
 loadCachedExamples();
 
 // API Routes
+
+// Get all examples
 app.get('/api/examples', (req, res) => {
-  const { category } = req.query;
+  const { category, type, random } = req.query;
   let examples = [...transcreationExamples];
 
+  // Filter by category
   if (category) {
     examples = examples.filter(ex => 
       ex.category.toLowerCase().includes(category.toLowerCase())
     );
   }
 
+  // Filter by type
+  if (type) {
+    examples = examples.filter(ex => ex.type === type);
+  }
+
+  // Randomize if requested
+  if (random === 'true') {
+    examples = examples.sort(() => Math.random() - 0.5);
+  }
+
   res.json({
     success: true,
     data: examples,
@@ -74,13 +338,20 @@ app.get('/api/examples', (req, res) => {
   });
 });
 
+// Get random example (or search for new one if cache is low)
 app.get('/api/examples/random', async (req, res) => {
   try {
+    // If we have few examples, try to find more
+    if (transcreationExamples.length < 5) {
+      console.log('🔍 Cache low, searching for new examples...');
+      await searchTranscreationExamples('', 10);
+    }
+
     if (transcreationExamples.length === 0) {
       return res.json({
         success: true,
         data: null,
-        message: 'No examples available yet.'
+        message: 'No examples available yet. Try searching to discover new ones!'
       });
     }
 
@@ -99,14 +370,67 @@ app.get('/api/examples/random', async (req, res) => {
   }
 });
 
+// Search for new examples online
+app.post('/api/examples/search-online', async (req, res) => {
+  try {
+    const { category } = req.body;
+    console.log(`🔍 Online search requested for category: ${category || 'all'}`);
+    
+    const newExamples = await searchTranscreationExamples(category, 5);
+    
+    res.json({
+      success: true,
+      data: newExamples,
+      message: `Found ${newExamples.length} new example${newExamples.length !== 1 ? 's' : ''}`,
+      totalCached: transcreationExamples.length
+    });
+  } catch (error) {
+    console.error('Search error:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Online search failed'
+    });
+  }
+});
+
+// Get example by ID
+app.get('/api/examples/:id', (req, res) => {
+  const example = transcreationExamples.find(ex => ex.id === req.params.id);
+  
+  if (!example) {
+    return res.status(404).json({
+      success: false,
+      error: 'Example not found'
+    });
+  }
+
+  res.json({
+    success: true,
+    data: example
+  });
+});
+
+// Get categories
 app.get('/api/categories', (req, res) => {
   const categories = [...new Set(transcreationExamples.map(ex => ex.category))];
+  
   res.json({
     success: true,
     data: categories
   });
 });
 
+// Get types
+app.get('/api/types', (req, res) => {
+  const types = [...new Set(transcreationExamples.map(ex => ex.type))];
+  
+  res.json({
+    success: true,
+    data: types
+  });
+});
+
+// Search examples
 app.get('/api/search', (req, res) => {
   const { q } = req.query;
   
@@ -135,6 +459,23 @@ app.get('/api/search', (req, res) => {
   });
 });
 
+// Get database stats
+app.get('/api/stats', (req, res) => {
+  const stats = {
+    totalExamples: transcreationExamples.length,
+    categories: [...new Set(transcreationExamples.map(ex => ex.category))].length,
+    types: [...new Set(transcreationExamples.map(ex => ex.type))].length,
+    lastUpdated: transcreationExamples.length > 0 ? 
+      Math.max(...transcreationExamples.map(ex => new Date(ex.dateAdded || Date.now()).getTime())) : null
+  };
+
+  res.json({
+    success: true,
+    data: stats
+  });
+});
+
+// Health check
 app.get('/api/health', (req, res) => {
   res.json({
     success: true,
@@ -144,14 +485,201 @@ app.get('/api/health', (req, res) => {
   });
 });
 
-// Serve React app for all other routes
+// Manual Edit API Endpoints
+
+// Add new example
+app.post('/api/examples/add', async (req, res) => {
+  try {
+    console.log('📝 Received new example request:', JSON.stringify(req.body, null, 2));
+    
+    // Determine if this is a Chinese to English entry (no taiwan field)
+    const isChineseToEnglish = req.body.hasOwnProperty('isChineseToEnglish') && req.body.isChineseToEnglish;
+    
+    // Validate required fields based on direction
+    const requiredFields = isChineseToEnglish
+      ? ['english', 'mainland', 'brand', 'category', 'type']
+      : ['english', 'mainland', 'taiwan', 'brand', 'category', 'type'];
+    
+    const missingFields = requiredFields.filter(field => !req.body[field]);
+    
+    if (missingFields.length > 0) {
+      console.error('❌ Missing required fields:', {
+        missingFields,
+        receivedFields: Object.keys(req.body),
+        receivedValues: req.body
+      });
+      return res.status(400).json({
+        success: false,
+        message: `Missing required fields: ${missingFields.join(', ')}`,
+        details: {
+          missingFields,
+          receivedFields: Object.keys(req.body)
+        }
+      });
+    }
+
+    // Create new example with cleaned data
+    const newExample = {
+      ...req.body,
+      // Clean strings and handle optional fields
+      english: req.body.english.trim(),
+      mainland: req.body.mainland.trim(),
+      taiwan: isChineseToEnglish ? undefined : req.body.taiwan?.trim(),
+      brand: req.body.brand.trim(),
+      category: req.body.category.trim(),
+      type: req.body.type || 'slogan',
+      description: req.body.description?.trim() ?? '',
+      status: req.body.status || 'pending',
+      contributor: req.body.contributor === undefined ? null : req.body.contributor.trim(),
+      id: Date.now().toString() + Math.random().toString(36).substring(2),
+      dateAdded: new Date().toISOString()
+    };
+
+    console.log('✨ Created new example:', JSON.stringify(newExample, null, 2));
+    transcreationExamples.push(newExample);
+    await saveCachedExamples();
+
+    res.json({
+      success: true,
+      message: 'Example added successfully',
+      example: newExample
+    });
+  } catch (error) {
+    console.error('❌ Error adding example:', error);
+    res.status(500).json({
+      success: false,
+      message: 'Error adding example',
+      error: error.message
+    });
+  }
+});
+
+// Update existing example
+app.put('/api/examples/:id', async (req, res) => {
+  try {
+    const { id } = req.params;
+    console.log(`📝 UPDATE REQUEST for ID: ${id}`);
+    console.log(`📝 REQUEST BODY:`, JSON.stringify(req.body, null, 2));
+    
+    const index = transcreationExamples.findIndex(ex => ex.id === id);
+    
+    if (index === -1) {
+      console.log(`❌ Example with ID ${id} not found`);
+      return res.status(404).json({
+        success: false,
+        message: 'Example not found'
+      });
+    }
+
+    console.log(`📝 FOUND EXAMPLE at index ${index}:`, JSON.stringify(transcreationExamples[index], null, 2));
+
+    // Determine if this is a Chinese to English entry (no taiwan field)
+    const isChineseToEnglish = !req.body.hasOwnProperty('taiwan');
+    
+    // Validate required fields based on direction
+    const requiredFields = isChineseToEnglish
+      ? ['english', 'mainland', 'brand', 'category', 'type']
+      : ['english', 'mainland', 'taiwan', 'brand', 'category', 'type'];
+    
+    const missingFields = requiredFields.filter(field => !req.body[field]);
+    
+    if (missingFields.length > 0) {
+      console.error('❌ Missing required fields:', {
+        missingFields,
+        receivedFields: Object.keys(req.body),
+        receivedValues: req.body
+      });
+      return res.status(400).json({
+        success: false,
+        message: `Missing required fields: ${missingFields.join(', ')}`,
+        details: {
+          missingFields,
+          receivedFields: Object.keys(req.body)
+        }
+      });
+    }
+
+    // Preserve original dateAdded and merge updates
+    const updatedExample = {
+      ...transcreationExamples[index],  // Start with existing data
+      ...req.body,  // Merge in updates
+      id,  // Ensure ID doesn't change
+      dateAdded: transcreationExamples[index].dateAdded,  // Preserve original date
+      lastModified: new Date().toISOString(),  // Add last modified timestamp
+      // Handle optional fields - if not provided in request, keep existing value
+      status: req.body.status ?? transcreationExamples[index].status ?? 'pending',
+      contributor: req.body.contributor === undefined ? transcreationExamples[index].contributor : req.body.contributor,
+      type: req.body.type ?? transcreationExamples[index].type ?? 'slogan',
+      description: req.body.description ?? transcreationExamples[index].description ?? ''
+    };
+
+    // Update the example in the array
+    transcreationExamples[index] = updatedExample;
+
+    console.log(`📝 UPDATED EXAMPLE:`, JSON.stringify(updatedExample, null, 2));
+    console.log(`📝 EXAMPLE IN ARRAY AFTER UPDATE:`, JSON.stringify(transcreationExamples[index], null, 2));
+
+    // Save to cache file
+    await saveCachedExamples();
+
+    console.log(`✅ UPDATE COMPLETED for ID: ${id}`);
+
+    res.json({
+      success: true,
+      message: 'Example updated successfully',
+      data: updatedExample
+    });
+  } catch (error) {
+    console.error('❌ Error updating example:', error);
+    res.status(500).json({
+      success: false,
+      message: 'Failed to update example',
+      error: error.message
+    });
+  }
+});
+
+// Delete example
+app.delete('/api/examples/:id', (req, res) => {
+  try {
+    const { id } = req.params;
+    
+    // Find and remove example
+    const index = transcreationExamples.findIndex(ex => ex.id === id);
+    if (index === -1) {
+      return res.status(404).json({
+        success: false,
+        error: 'Example not found'
+      });
+    }
+
+    transcreationExamples.splice(index, 1);
+    saveCachedExamples();
+
+    res.json({
+      success: true,
+      message: 'Example deleted successfully'
+    });
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: 'Failed to delete example'
+    });
+  }
+});
+
+// Serve static files from React build (for production)
 if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(path.join(__dirname, '../client/build')));
+  
   app.get('*', (req, res) => {
-    res.sendFile(path.join(__dirname, '../client/build/index.html'));
+    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
   });
 }
 
 app.listen(PORT, () => {
   console.log(`🚀 Transcreation Explorer API running on port ${PORT}`);
   console.log(`📊 Cached examples: ${transcreationExamples.length}`);
-}); 
+});
+
+module.exports = app; 

server/package.json

@@ -1,12 +1,30 @@
 {
   "name": "transcreation-explorer-server",
   "version": "1.0.0",
+  "description": "Server for Transcreation Explorer",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js"
+    "start": "node index.js",
+    "dev": "nodemon index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "keywords": [
+    "transcreation",
+    "server",
+    "api"
+  ],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
+    "axios": "^1.6.7",
+    "cheerio": "^1.0.0-rc.12",
     "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "dotenv": "^16.4.1",
+    "express": "^4.18.2",
+    "node-cron": "^3.0.3",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.3"
   }
 }