Let backend update automatically

.gitignore

@@ -1,14 +1,14 @@
-# Environment variables (DO NOT COMMIT)
+# Environment variables (DO NOT COMMIT)
-.env
+.env
-
+
-# Node dependencies
+# Node dependencies
-node_modules/
+node_modules/
-
+
-# Build output (if using a bundler or React later)
+# Build output (if using a bundler or React later)
-dist/
+dist/
-build/
+build/
-
+
-# Logs
+# Logs
-npm-debug.log*
+npm-debug.log*
-yarn-debug.log*
+yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

backend/.dockerignore

@@ -1,5 +1,5 @@
-node_modules
+node_modules
-.git
+.git
-dist
+dist
-build
+build
-*.log
+*.log

backend/Dockerfile

@@ -1,12 +1,12 @@
-FROM node:20-alpine
+FROM node:20-alpine
-
+
-WORKDIR /app
+WORKDIR /app
-
+
-COPY package*.json ./
+COPY package*.json ./
-RUN npm install
+RUN npm install
-
+
-COPY . .
+COPY . .
-
+
-EXPOSE 5000
+EXPOSE 5000
-
+
-CMD ["node", "server.js"]
+CMD ["npm", "run", "dev"]

backend/package-lock.json

@@ -13,6 +13,7 @@
       "devDependencies": {
         "cpx": "^1.5.0",
         "esbuild": "^0.25.5",
+        "nodemon": "^3.1.11",
         "rimraf": "^6.0.1"
       }
     },
@@ -1512,6 +1513,15 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -1632,6 +1642,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2144,6 +2160,208 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.11.tgz",
+      "integrity": "sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/nodemon/node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nodemon/node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nodemon/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/nodemon/node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nodemon/node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/nodemon/node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nodemon/node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/nodemon/node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@@ -2455,6 +2673,18 @@
         "split2": "^4.1.0"
       }
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -2526,6 +2756,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -3091,6 +3327,18 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
@@ -3271,6 +3519,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -3605,6 +3865,18 @@
         "minimist": "^1.1.0"
       }
     },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3677,6 +3949,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/type-is": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
@@ -3690,6 +3971,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
+    },
     "node_modules/union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

backend/package.json

@@ -8,10 +8,11 @@
   "devDependencies": {
     "cpx": "^1.5.0",
     "esbuild": "^0.25.5",
+    "nodemon": "^3.1.11",
     "rimraf": "^6.0.1"
   },
   "scripts": {
     "build": "rimraf dist && node build.js && cpx \"public/**/*\" dist/public",
-    "dev": "node server.js"
+    "dev": "nodemon server.js"
   }
 }

backend/server.js

@@ -15,12 +15,26 @@ const pool = new Pool({
   port: 5432,
 });
 
+
+
 app.use(express.json());
+
+const allowedOrigins = [
+  "http://localhost:3000",
+  "https://mygroceryapp.com",
+];
 app.use(cors({
-  origin: "http://localhost:3000",
+  origin: function (origin, callback) {
+    if (!origin) return callback(null, true);
+    if (allowedOrigins.includes(origin)) return callback(null, true);
+    if (/^http:\/\/192\.168\.\d+\.\d+/.test(origin)) return callback(null, true);
+    callback(new Error("Not allowed by CORS"));
+  },
   methods: ["GET", "POST"],
 }));
 
+
+
 app.get('/', async (req, res) => {
   const { query } = req.query;
   const { rows } = await pool.query(

build.js

@@ -1,15 +1,15 @@
-// build.js
+// build.js
-const esbuild = require('esbuild');
+const esbuild = require('esbuild');
-const fs = require('fs');
+const fs = require('fs');
-
+
-// Ensure dist folder exists
+// Ensure dist folder exists
-if (!fs.existsSync('dist')) fs.mkdirSync('dist', { recursive: true });
+if (!fs.existsSync('dist')) fs.mkdirSync('dist', { recursive: true });
-
+
-esbuild.build({
+esbuild.build({
-  entryPoints: ['server.js'],
+  entryPoints: ['server.js'],
-  outfile: 'dist/server.js',
+  outfile: 'dist/server.js',
-  bundle: true,
+  bundle: true,
-  platform: 'node',
+  platform: 'node',
-  target: 'node18',
+  target: 'node18',
-  minify: false,
+  minify: false,
-}).catch(() => process.exit(1));
+}).catch(() => process.exit(1));

docker-compose.dev.yml

@@ -1,21 +1,24 @@
-services:
+services:
-  frontend:
+  frontend:
-    build: 
+    build: 
-      context: ./frontend
+      context: ./frontend
-      dockerfile: Dockerfile.dev
+      dockerfile: Dockerfile.dev
-    environment:
+    environment:
-      - NODE_ENV=development
+      - NODE_ENV=development
-    volumes:
+    volumes:
-      - ./frontend:/app
+      - ./frontend:/app
-      - /app/node_modules
+      - /app/node_modules
-    ports:
+    ports:
-      - "3000:5173"
+      - "3000:5173"
-    depends_on:
+    depends_on:
-      - backend
+      - backend
-
+
-  backend:
+  backend:
-    build: ./backend
+    build: ./backend
-    ports:
+    volumes:
-      - "5000:5000"
+      - ./backend:/app
-    env_file:
+      - /app/node_modules
+    ports:
+      - "5000:5000"
+    env_file:
       - ./backend/.env

docker-compose.prod.yml

@@ -1,16 +1,16 @@
-services:
+services:
-  frontend:
+  frontend:
-    build: ./frontend
+    build: ./frontend
-    environment:
+    environment:
-      - MODE_ENV=production
+      - MODE_ENV=production
-    ports:
+    ports:
-      - "3000:80"
+      - "3000:80"
-    depends_on:
+    depends_on:
-      - backend
+      - backend
-
+
-  backend:
+  backend:
-    build: ./backend
+    build: ./backend
-    ports:
+    ports:
-      - "5000:5000"
+      - "5000:5000"
-    env_file:
+    env_file:
       - ./backend/.env

frontend/.dockerignore

@@ -1,5 +1,5 @@
-node_modules
+node_modules
-.git
+.git
-dist
+dist
-build
+build
-*.log
+*.log

frontend/Dockerfile

@@ -1,15 +1,15 @@
-FROM node:20-alpine AS build
+FROM node:20-alpine AS build
-
+
-WORKDIR /app
+WORKDIR /app
-COPY package*.json ./
+COPY package*.json ./
-RUN npm install
+RUN npm install
-
+
-COPY . .
+COPY . .
-RUN npm run build
+RUN npm run build
-
+
-FROM nginx:alpine
+FROM nginx:alpine
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
-
+
-EXPOSE 80
+EXPOSE 80
-
+
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile.dev

@@ -1,16 +1,16 @@
-# FROM node:20-alpine
+# FROM node:20-alpine
-FROM node:20-slim
+FROM node:20-slim
-# FROM node:20
+# FROM node:20
-
+
-
+
-WORKDIR /app
+WORKDIR /app
-
+
-COPY package*.json ./
+COPY package*.json ./
-RUN npm install
+RUN npm install
-
+
-COPY . .
+COPY . .
-
+
-ENV CHOKIDAR_USEPOLLING=true
+ENV CHOKIDAR_USEPOLLING=true
-
+
-EXPOSE 5173
+EXPOSE 5173
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

frontend/index.html

@@ -1,12 +1,12 @@
-<!doctype html>
+<!doctype html>
-<html lang="en">
+<html lang="en">
-  <head>
+  <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Costco Grocery List</title>
+    <title>Costco Grocery List</title>
-  </head>
+  </head>
-  <body>
+  <body>
-    <div id="root"></div>
+    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
-  </body>
+  </body>
-</html>
+</html>

frontend/src/components/GroceryItem.tsx

@@ -1,23 +1,23 @@
-import type { GroceryItemType } from "../types";
+import type { GroceryItemType } from "../types";
-
+
-interface Props {
+interface Props {
-  item: GroceryItemType;
+  item: GroceryItemType;
-  onClick: (id: number) => void;
+  onClick: (id: number) => void;
-}
+}
-
+
-export default function GroceryItem({ item, onClick }: Props) {
+export default function GroceryItem({ item, onClick }: Props) {
-  return (
+  return (
-    <li
+    <li
-      onClick={() => onClick(item.id)}
+      onClick={() => onClick(item.id)}
-      style={{
+      style={{
-        padding: "0.5em",
+        padding: "0.5em",
-        background: "#e9ecef",
+        background: "#e9ecef",
-        marginBottom: "0.5em",
+        marginBottom: "0.5em",
-        borderRadius: "4px",
+        borderRadius: "4px",
-        cursor: "pointer",
+        cursor: "pointer",
-      }}
+      }}
-    >
+    >
-      {item.item_name} ({item.quantity})
+      {item.item_name} ({item.quantity})
-    </li>
+    </li>
-  );
+  );
-}
+}

frontend/src/components/SuggestionList.tsx

@@ -1,40 +1,40 @@
-interface Props {
+interface Props {
-  suggestions: string[];
+  suggestions: string[];
-  onSelect: (value: string) => void;
+  onSelect: (value: string) => void;
-}
+}
-
+
-export default function SuggestionList({ suggestions, onSelect }: Props) {
+export default function SuggestionList({ suggestions, onSelect }: Props) {
-  if (!suggestions.length) return null;
+  if (!suggestions.length) return null;
-
+
-  return (
+  return (
-    <ul
+    <ul
-      style={{
+      style={{
-        background: "#fff",
+        background: "#fff",
-        border: "1px solid #ccc",
+        border: "1px solid #ccc",
-        maxHeight: "150px",
+        maxHeight: "150px",
-        overflowY: "auto",
+        overflowY: "auto",
-        position: "absolute",
+        position: "absolute",
-        zIndex: 1000,
+        zIndex: 1000,
-        left: "1em",
+        left: "1em",
-        right: "1em",
+        right: "1em",
-        listStyle: "none",
+        listStyle: "none",
-        padding: 0,
+        padding: 0,
-        margin: 0,
+        margin: 0,
-      }}
+      }}
-    >
+    >
-      {suggestions.map((s) => (
+      {suggestions.map((s) => (
-        <li
+        <li
-          key={s}
+          key={s}
-          onClick={() => onSelect(s)}
+          onClick={() => onSelect(s)}
-          style={{
+          style={{
-            padding: "0.5em",
+            padding: "0.5em",
-            cursor: "pointer",
+            cursor: "pointer",
-            borderBottom: "1px solid #eee",
+            borderBottom: "1px solid #eee",
-          }}
+          }}
-        >
+        >
-          {s}
+          {s}
-        </li>
+        </li>
-      ))}
+      ))}
-    </ul>
+    </ul>
-  );
+  );
-}
+}

frontend/src/types.ts

@@ -1,5 +1,5 @@
-export interface GroceryItemType {
+export interface GroceryItemType {
-  id: number;
+  id: number;
-  item_name: string;
+  item_name: string;
-  quantity: number;
+  quantity: number;
-}
+}