.vscode/settings.json

@@ -40,8 +40,8 @@
   // Prettier
   // ============================
   "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" },
-  "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" },
+  "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
-  "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" },
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
   "[typescriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" },
 
   // ============================

backend/app.js

@@ -1,12 +1,17 @@
+require("dotenv").config();
 const express = require("express");
 const cors = require("cors");
-const User = require("./models/user.model");
+
+
 
 const app = express();
 app.use(express.json());
 
-const allowedOrigins = process.env.ALLOWED_ORIGINS.split(",").map(origin => origin.trim());
+const allowedOrigins = [
-console.log("Allowed Origins:", allowedOrigins);
+  "http://localhost:3000",
+  "https://costco.nicosaya.com",
+  "https://costco.api.nicosaya.com",
+];
 app.use(
   cors({
     origin: function (origin, callback) {
@@ -21,10 +26,7 @@ app.use(
 );
 
 app.get('/', async (req, res) => {
-  resText = `Grocery List API is running.\n` +
+  res.status(200).send('Grocery List API is running.');
-    `Roles available: ${Object.values(User.ROLES).join(', ')}`
-
-  res.status(200).type("text/plain").send(resText);
 });
 
 
@@ -40,4 +42,5 @@ app.use("/admin", adminRoutes);
 const usersRoutes = require("./routes/users.routes");
 app.use("/users", usersRoutes);
 
+
 module.exports = app;

backend/controllers/auth.controller.js

@@ -3,15 +3,11 @@ const jwt = require("jsonwebtoken");
 const User = require("../models/user.model");
 
 exports.register = async (req, res) => {
-  let { username, password, name } = req.body;
+  const { email, password, role } = req.body;
-  username = username.toLowerCase();
-  console.log(`🆕   Registration attempt for ${name} => username:${username}, password:${password}`);
 
   try {
     const hash = await bcrypt.hash(password, 10);
-    const user = await User.createUser(username, hash, name);
+    const user = await User.createUser(email, hash, role);
-    console.log(`✅   User registered: ${username}`);
-
     res.json({ message: "User registered", user });
   } catch (err) {
     res.status(400).json({ message: "Registration failed", error: err });
@@ -19,20 +15,13 @@ exports.register = async (req, res) => {
 };
 
 exports.login = async (req, res) => {
-  let { username, password } = req.body;
+  const { email, password } = req.body;
 
-  username = username.toLowerCase();
+  const user = await User.findByEmail(email);
-  const user = await User.findByUsername(username);
+  if (!user) return res.status(401).json({ message: "Invalid credentials" });
-  if (!user) {
-    console.log(`⚠️   Login attempt -> No user found: ${username}`);
-    return res.status(401).json({ message: "User not found" });
-  }
 
   const valid = await bcrypt.compare(password, user.password);
-  if (!valid) {
+  if (!valid) return res.status(401).json({ message: "Invalid credentials" });
-    console.log(`⛔   Login attempt for user ${username} with password ${password}`);
-    return res.status(401).json({ message: "Invalid credentials" });
-  }
 
   const token = jwt.sign(
     { id: user.id, role: user.role },
@@ -40,5 +29,5 @@ exports.login = async (req, res) => {
     { expiresIn: "1d" }
   );
 
-  res.json({ token, username, role: user.role });
+  res.json({ token, role: user.role });
 };

backend/controllers/lists.controller.js

@@ -6,17 +6,11 @@ exports.getList = async (req, res) => {
   res.json(items);
 };
 
-exports.getItemByName = async (req, res) => {
-  const { itemName } = req.query;
-  const item = await List.getItemByName(itemName);
-  res.json(item);
-}
-
 
 exports.addItem = async (req, res) => {
-  const { itemName, quantity } = req.body;
+  const { item_name, quantity } = req.body;
 
-  const id = await List.addOrUpdateItem(itemName, quantity);
+  const id = await List.addOrUpdateItem(item_name, quantity);
 
   await List.addHistoryRecord(id, quantity);
 
@@ -28,10 +22,3 @@ exports.markBought = async (req, res) => {
   await List.setBought(req.body.id);
   res.json({ message: "Item marked bought" });
 };
-
-
-exports.getSuggestions = async (req, res) => {
-  const { query } = req.query || "";
-  const suggestions = await List.getSuggestions(query);
-  res.json(suggestions);
-};

backend/controllers/users.controller.js

@@ -1,55 +1,6 @@
 const User = require("../models/user.model");
 
-exports.test = async (req, res) => {
-  console.log("User route is working");
-  res.json({ message: "User route is working" });
-};
-
 exports.getAllUsers = async (req, res) => {
-  console.log(req);
   const users = await User.getAllUsers();
   res.json(users);
 };
-
-
-exports.updateUserRole = async (req, res) => {
-  try {
-    const { id, role } = req.body;
-
-    console.log(`Updating user ${id} to role ${role}`);
-    if (!Object.values(User.ROLES).includes(role))
-      return res.status(400).json({ error: "Invalid role" });
-
-    const updated = await User.updateUserRole(id, role);
-    if (!updated)
-      return res.status(404).json({ error: "User not found" });
-
-    res.json({ message: "Role updated", id, role });
-  } catch (err) {
-    res.status(500).json({ error: "Failed to update role" });
-  }
-};
-
-exports.deleteUser = async (req, res) => {
-  try {
-    const { id } = req.params;
-
-    const deleted = await User.deleteUser(id);
-    if (!deleted)
-      return res.status(404).json({ error: "User not found" });
-
-
-    res.json({ message: "User deleted", id });
-  } catch (err) {
-    res.status(500).json({ error: "Failed to delete user" });
-  }
-};
-
-
-
-
-exports.checkIfUserExists = async (req, res) => {
-  const { username } = req.query;
-  const users = await User.checkIfUserExists(username);
-  res.json(users);
-};

backend/models/list.model.js

@@ -8,37 +8,23 @@ exports.getUnboughtItems = async () => {
   return result.rows;
 };
 
-exports.getItemByName = async (itemName) => {
+
+exports.addOrUpdateItem = async (item_name, quantity) => {
   const result = await pool.query(
-    "SELECT * FROM grocery_list WHERE item_name ILIKE $1",
+    "SELECT id, bought FROM grocery_list WHERE item_name = $1",
-    [itemName]
+    [item_name]
-  );
-
-  return result.rows[0] || null;
-};
-
-
-exports.addOrUpdateItem = async (itemName, quantity) => {
-  const result = await pool.query(
-    "SELECT id, bought FROM grocery_list WHERE item_name ILIKE $1",
-    [itemName]
   );
 
   if (result.rowCount > 0) {
     await pool.query(
-      `UPDATE grocery_list 
+      "UPDATE grocery_list SET quantity = $1, bought = FALSE WHERE id = $2",
-      SET quantity = $1, 
-        bought = FALSE 
-      WHERE id = $2`,
       [quantity, result.rows[0].id]
     );
     return result.rows[0].id;
   } else {
     const insert = await pool.query(
-      `INSERT INTO grocery_list 
+      "INSERT INTO grocery_list (item_name, quantity) VALUES ($1, $2) RETURNING id",
-      (item_name, quantity) 
+      [item_name, quantity]
-      VALUES ($1, $2) RETURNING id`,
-      [itemName, quantity]
     );
     return insert.rows[0].id;
   }
@@ -58,16 +44,3 @@ exports.addHistoryRecord = async (itemId, quantity) => {
   );
 };
 
-
-exports.getSuggestions = async (query) => {
-  const result = await pool.query(
-    `SELECT DISTINCT item_name 
-       FROM grocery_list 
-       WHERE item_name ILIKE $1
-       LIMIT 10`,
-    [`%${query}%`]
-  );
-  res = result.rows;
-  return result.rows;
-};
-

backend/models/user.model.js

@@ -1,23 +1,16 @@
 const pool = require("../db/pool");
 
-exports.ROLES = {
-  VIEWER: "viewer",
-  EDITOR: "editor",
-  ADMIN: "admin",
-}
-
 exports.findByUsername = async (username) => {
-  query = `SELECT * FROM users WHERE username = ${username}`;
   const result = await pool.query("SELECT * FROM users WHERE username = $1", [username]);
-  console.log(query);
   return result.rows[0];
 };
 
-exports.createUser = async (username, hashedPassword, name) => {
+exports.createUser = async (username, hashedPassword, name, role = "viewer") => {
   const result = await pool.query(
     `INSERT INTO users (username, password, name, role)
-     VALUES ($1, $2, $3, $4)`,
+     VALUES ($1, $2, $3, $4)
-    [username, hashedPassword, name, this.ROLES.VIEWER]
+     RETURNING id, username, role`,
+    [username, hashedPassword, name, role]
   );
   return result.rows[0];
 };
@@ -27,35 +20,3 @@ exports.getAllUsers = async () => {
   const result = await pool.query("SELECT id, username, name, role FROM users ORDER BY id ASC");
   return result.rows;
 };
-
-
-exports.updateUserRole = async (id, role) => {
-  const result = await pool.query(
-    `UPDATE users 
-     SET role = $1 
-     WHERE id = $2 
-     RETURNING id, username, name, role`,
-    [role, id]
-  );
-  return result.rows[0];
-};
-
-
-exports.deleteUser = async (id) => {
-  const result = await pool.query(
-    `DELETE FROM users WHERE id = $1 RETURNING id`,
-    [id]
-  );
-  return result.rowCount;
-};
-
-
-exports.checkIfUserExists = async (username) => {
-  const result = await pool.query(
-    "SELECT COUNT(*) FROM users WHERE username = $1",
-    [username]
-  );
-  return result.rows[0].count > 0;
-}
-
-

backend/routes/admin.routes.js

@@ -2,10 +2,8 @@ const router = require("express").Router();
 const auth = require("../middleware/auth");
 const requireRole = require("../middleware/rbac");
 const usersController = require("../controllers/users.controller");
-const { ROLES } = require("../models/user.model");
 
-router.get("/users", auth, requireRole(ROLES.ADMIN), usersController.getAllUsers);
+// Admin-only route
-router.put("/users", auth, requireRole(ROLES.ADMIN), usersController.updateUserRole);
+router.get("/users", auth, requireRole("admin"), usersController.getAllUsers);
-router.delete("/users", auth, requireRole(ROLES.ADMIN), usersController.deleteUser);
 
 module.exports = router;

backend/routes/auth.routes.js

@@ -3,11 +3,5 @@ const controller = require("../controllers/auth.controller");
 
 router.post("/register", controller.register);
 router.post("/login", controller.login);
-router.post("/", async (req, res) => {
-  resText = `Grocery List API is running.\n` +
-    `Roles available: ${Object.values(User.ROLES).join(', ')}`
-
-  res.status(200).type("text/plain").send(resText);
-});
 
 module.exports = router;

backend/routes/list.routes.js

@@ -2,18 +2,13 @@ const router = require("express").Router();
 const controller = require("../controllers/lists.controller");
 const auth = require("../middleware/auth");
 const requireRole = require("../middleware/rbac");
-const { ROLES } = require("../models/user.model");
-const User = require("../models/user.model");
 
 
-
+router.get("/", auth, requireRole("viewer", "editor", "admin"), controller.getList);
-router.get("/", auth, requireRole(...Object.values(ROLES)), controller.getList);
-router.get("/item-by-name", auth, requireRole(...Object.values(ROLES)), controller.getItemByName);
-router.get("/suggest", auth, requireRole(...Object.values(ROLES)), controller.getSuggestions);
 
 
-router.post("/add", auth, requireRole(ROLES.EDITOR, ROLES.ADMIN), controller.addItem);
+router.post("/add", auth, requireRole("editor", "admin"), controller.addItem);
-router.post("/mark-bought", auth, requireRole(ROLES.EDITOR, ROLES.ADMIN), controller.markBought);
+router.post("/mark-bought", auth, requireRole("editor", "admin"), controller.markBought);
 
 
 module.exports = router;

backend/routes/users.routes.js

@@ -2,9 +2,7 @@ const router = require("express").Router();
 const auth = require("../middleware/auth");
 const requireRole = require("../middleware/rbac");
 const usersController = require("../controllers/users.controller");
-const { ROLES } = require("../models/user.model");
 
-router.get("/exists", usersController.checkIfUserExists);
+router.get("/", auth, requireRole("admin"), usersController.getAllUsers);
-router.get("/test", usersController.test);
 
 module.exports = router;

frontend/src/App.jsx

@@ -1,53 +0,0 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { ROLES } from "./constants/roles";
-import { AuthProvider } from "./context/AuthContext.jsx";
-
-import AdminPanel from "./pages/AdminPanel.jsx";
-import GroceryList from "./pages/GroceryList.jsx";
-import Login from "./pages/Login.jsx";
-import Register from "./pages/Register.jsx";
-
-import AppLayout from "./components/AppLayout.jsx";
-import PrivateRoute from "./utils/PrivateRoute.jsx";
-
-import RoleGuard from "./utils/RoleGuard.jsx";
-
-console.log("VITE_ALLOWED_HOSTS:", import.meta.env.VITE_ALLOWED_HOSTS);
-
-function App() {
-  return (
-    <AuthProvider>
-      <BrowserRouter>
-        <Routes>
-
-          {/* Public route */}
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-
-          {/* Private routes with layout */}
-          <Route
-            element={
-              <PrivateRoute>
-                <AppLayout />
-              </PrivateRoute>
-            }
-          >
-            <Route path="/" element={<GroceryList />} />
-
-            <Route
-              path="/admin"
-              element={
-                <RoleGuard allowed={[ROLES.ADMIN]}>
-                  <AdminPanel />
-                </RoleGuard>
-              }
-            />
-          </Route>
-
-        </Routes>
-      </BrowserRouter>
-    </AuthProvider>
-  );
-}
-
-export default App; 

frontend/src/App.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import GroceryItem from "./components/GroceryItem";
+import SuggestionList from "./components/SuggestionList";
+import type { GroceryItemType } from "./types";
+
+
+const API_BASE_URL = import.meta.env.VITE_API_URL;
+
+
+export default function App() {
+  const [items, setItems] = useState<GroceryItemType[]>([]);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [itemInput, setItemInput] = useState<string>("");
+  const [quantity, setQuantity] = useState<number>(1);
+
+
+  // Load grocery list
+  const loadList = async () => {
+    const res = await fetch(`${API_BASE_URL}/list`);
+    const data: GroceryItemType[] = await res.json();
+    setItems(data);
+  };
+
+
+  useEffect(() => {
+    loadList();
+  }, []);
+
+
+  // Suggestion logic
+  const handleSuggest = async (query: string) => {
+    setItemInput(query);
+
+    if (!query.trim()) return setSuggestions([]);
+
+    const res = await fetch(`${API_BASE_URL}/suggest?query=${encodeURIComponent(query)}`);
+    const data: string[] = await res.json();
+    setSuggestions(data);
+  };
+
+
+  // Add Item
+  const addItem = async () => {
+    if (!itemInput.trim() || !quantity) return;
+
+    const existing = items.find((i) => i.item_name.toLowerCase() === itemInput.toLowerCase());
+
+    if (existing) {
+      if (!confirm("Item already exists. Add more?")) return;
+
+      await fetch(`${API_BASE_URL}/add`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          item_name: itemInput,
+          quantity: existing.quantity + quantity,
+        }),
+      });
+    } else {
+      await fetch(`${API_BASE_URL}/add`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ item_name: itemInput, quantity }),
+      });
+    }
+
+    setItemInput("");
+    setQuantity(1);
+    setSuggestions([]);
+    loadList();
+  };
+
+
+  // Mark bought
+  const markBought = async (id: number) => {
+    if (!confirm("Mark this item as bought?")) return;
+
+    await fetch(`${API_BASE_URL}/mark-bought`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id }),
+    });
+
+    loadList();
+  };
+
+
+
+  return (
+    <div
+      className="container"
+      style={{
+        maxWidth: "480px",
+        margin: "auto",
+        background: "white",
+        padding: "1em",
+        borderRadius: "8px",
+        boxShadow: "0 0 10px rgba(0,0,0,0.1)",
+      }}
+    >
+      <h1 style={{ textAlign: "center", fontSize: "1.5em" }}>
+        Costco Grocery List
+      </h1>
+
+      <input
+        type="text"
+        value={itemInput}
+        placeholder="Item name"
+        onChange={(e) => handleSuggest(e.target.value)}
+        style={inputStyle}
+        autoComplete="off"
+      />
+
+      <SuggestionList
+        suggestions={suggestions}
+        onSelect={(val: string) => {
+          setItemInput(val);
+          setSuggestions([]);
+        }}
+      />
+
+      <input
+        type="number"
+        value={quantity}
+        min={1}
+        onChange={(e) => setQuantity(Number(e.target.value))}
+        placeholder="Quantity"
+        style={inputStyle}
+      />
+
+      <button onClick={addItem} style={buttonStyle}>
+        Add Item
+      </button>
+
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {items.map((item) => (
+          <GroceryItem key={item.id} item={item} onClick={markBought} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const inputStyle: React.CSSProperties = {
+  fontSize: "1em",
+  margin: "0.3em 0",
+  padding: "0.5em",
+  width: "100%",
+  boxSizing: "border-box",
+};
+
+const buttonStyle = {
+  ...inputStyle,
+  cursor: "pointer",
+};

frontend/src/api/auth.js

@@ -1,11 +0,0 @@
-import api from "./axios";
-
-export const loginRequest = async (username, password) => {
-  const res = await api.post("/auth/login", { username, password });
-  return res.data;
-};
-
-export const registerRequest = async (username, password, name) => {
-  const res = await api.post("/auth/register", { username, password, name });
-  return res.data;
-};

frontend/src/api/axios.js

@@ -1,32 +0,0 @@
-import axios from "axios";
-import { API_BASE_URL } from "../config";
-
-const api = axios.create({
-  baseURL: API_BASE_URL,
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
-
-api.interceptors.request.use((config => {
-  const token = localStorage.getItem("token");
-  if (token) {
-    config.headers["Authorization"] = `Bearer ${token}`;
-  }
-  return config;
-}));
-
-api.interceptors.response.use(
-  response => response,
-  error => {
-    if (error.response?.status === 401 &&
-      error.response?.data?.message === "Invalid or expired token") {
-      localStorage.removeItem("token");
-      window.location.href = "/login";
-      alert("Your session has expired. Please log in again.");
-    }
-    return Promise.reject(error);
-  }
-);
-
-export default api;

frontend/src/api/list.js

@@ -1,7 +0,0 @@
-import api from "./axios";
-
-export const getList = () => api.get("/list");
-export const getItemByName = (itemName) => api.get("/list/item-by-name", { params: { itemName: itemName } });
-export const addItem = (itemName, quantity) => api.post("/list/add", { itemName, quantity });
-export const markBought = (id) => api.post("/list/mark-bought", { id });
-export const getSuggestions = (query) => api.get("/list/suggest", { params: { query: query } });

frontend/src/api/users.js

@@ -1,6 +0,0 @@
-import api from "./axios";
-
-export const getAllUsers = () => api.get("/admin/users");
-export const updateRole = (id, role) => api.put(`/admin/users`, { id, role });
-export const deleteUser = (id) => api.delete(`/admin/users/${id}`);
-export const checkIfUserExists = (username) => api.get(`/users/exists`, { params: { username: username } });

frontend/src/components/AppLayout.jsx

@@ -1,11 +0,0 @@
-import { Outlet } from "react-router-dom";
-import Navbar from "./Navbar";
-
-export default function AppLayout() {
-  return (
-    <div>
-      <Navbar />
-      <Outlet />
-    </div>
-  );
-}

frontend/src/components/Navbar.jsx

@@ -1,30 +0,0 @@
-import "../styles/Navbar.css";
-
-import { useContext } from "react";
-import { Link } from "react-router-dom";
-import { AuthContext } from "../context/AuthContext";
-
-export default function Navbar() {
-  const { role, logout, username } = useContext(AuthContext);
-
-  return (
-    <nav className="navbar">
-      <div className="navbar-links">
-        <Link to="/">Home</Link>
-
-        {role === "admin" && <Link to="/admin">Admin</Link>}
-      </div>
-
-      <div className="navbar-idcard">
-        <div className="navbar-idinfo">
-          <span className="navbar-username">{username}</span>
-          <span className="navbar-role">{role}</span>
-        </div>
-      </div>
-
-      <button className="navbar-logout" onClick={logout}>
-        Logout
-      </button>
-    </nav>
-  );
-}

frontend/src/config.ts

@@ -1 +1 @@
-export const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:5000";
+export const API_BASE_URL = import.meta.env.VITE_API_URL || "/api";

frontend/src/constants/roles.js

@@ -1,6 +0,0 @@
-export const ROLES = {
-  VIEWER: "viewer",
-  EDITOR: "editor",
-  ADMIN: "admin",
-  UP_TO_ADMIN: ["viewer", "editor", "admin"],
-};

frontend/src/context/AuthContext.jsx

@@ -1,46 +0,0 @@
-import { createContext, useState } from 'react';
-
-export const AuthContext = createContext({
-  token: null,
-  role: null,
-  username: null,
-  login: () => { },
-  logout: () => { },
-});
-
-export const AuthProvider = ({ children }) => {
-  const [token, setToken] = useState(localStorage.getItem('token') || null);
-  const [role, setRole] = useState(localStorage.getItem('role') || null);
-  const [username, setUsername] = useState(localStorage.getItem('username') || null);
-
-  const login = (data) => {
-    localStorage.setItem('token', data.token);
-    localStorage.setItem('role', data.role);
-    localStorage.setItem('username', data.username);
-    setToken(data.token);
-    setRole(data.role);
-    setUsername(data.username);
-  };
-
-  const logout = () => {
-    localStorage.clear();
-
-    setToken(null);
-    setRole(null);
-    setUsername(null);
-  };
-
-  const value = {
-    token,
-    role,
-    username,
-    login,
-    logout
-  };
-
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
-};

frontend/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
 import './index.css'
+import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

frontend/src/pages/AdminPanel.jsx

@@ -1,40 +0,0 @@
-import { useEffect, useState } from "react";
-import { getAllUsers, updateRole } from "../api/users";
-import { ROLES } from "../constants/roles";
-
-export default function AdminPanel() {
-  const [users, setUsers] = useState([]);
-
-  async function loadUsers() {
-    const allUsers = await getAllUsers();
-    console.log(allUsers);
-    setUsers(allUsers.data);
-  }
-
-  useEffect(() => {
-    loadUsers();
-  }, []);
-
-  const changeRole = async (id, role) => {
-    const updated = await updateRole(id, role);
-    if (updated.status !== 200) return;
-    loadUsers();
-  }
-
-  return (
-    <div>
-      <h1>Admin Panel</h1>
-      {users.map((user) => (
-        <div key={user.id}>
-          <strong>{user.username}</strong> - {user.role}
-          <select onChange={(e) => changeRole(user.id, e.target.value)} value={user.role}>
-            <option value={ROLES.VIEWER}>Viewer</option>
-            <option value={ROLES.EDITOR}>Editor</option>
-            <option value={ROLES.ADMIN}>Admin</option>
-          </select>
-        </div>
-      ))
-      }
-    </div >
-  )
-}

frontend/src/pages/GroceryList.jsx

@@ -1,193 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { addItem, getItemByName, getList, getSuggestions, markBought } from "../api/list";
-import { ROLES } from "../constants/roles";
-import { AuthContext } from "../context/AuthContext";
-import "../styles/GroceryList.css";
-
-export default function GroceryList() {
-  const { role, username } = useContext(AuthContext);
-
-  const [items, setItems] = useState([]);
-  const [sortedItems, setSortedItems] = useState([]);
-
-  const [sortMode, setSortMode] = useState("az");
-
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [itemName, setItemName] = useState("");
-  const [quantity, setQuantity] = useState(1);
-  const [suggestions, setSuggestions] = useState([]);
-
-  const [showAddForm, setShowAddForm] = useState(true);
-  const [loading, setLoading] = useState(true);
-
-  const loadItems = async () => {
-    setLoading(true);
-    const res = await getList();
-    setItems(res.data);
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    loadItems();
-  }, []);
-
-  useEffect(() => {
-    let sorted = [...items];
-
-    if (sortMode === "az")
-      sorted.sort((a, b) => a.item_name.localeCompare(b.item_name));
-
-    if (sortMode === "za")
-      sorted.sort((a, b) => b.item_name.localeCompare(a.item_name));
-
-    if (sortMode === "qty-high")
-      sorted.sort((a, b) => b.quantity - a.quantity);
-
-    if (sortMode === "qty-low")
-      sorted.sort((a, b) => a.quantity - b.quantity);
-
-    setSortedItems(sorted);
-  }, [items, sortMode]);
-
-  const handleSuggest = async (text) => {
-    setItemName(text);
-
-    if (!text.trim()) {
-      setSuggestions([]);
-      return;
-    }
-
-    try {
-      let suggestions = await getSuggestions(text);
-      suggestions = suggestions.data.map(s => s.item_name);
-      setSuggestions(suggestions);
-    } catch {
-      setSuggestions([]);
-    }
-  };
-
-  const handleAdd = async (e) => {
-    e.preventDefault();
-    if (!itemName.trim()) return;
-    let newQuantity = quantity;
-
-    const item = await getItemByName(itemName);
-    if (item.data && item.data.bought === false) {
-      console.log("Item exists:", item.data);
-      let currentQuantity = item.data.quantity;
-      const yes = window.confirm(
-        `Item "${itemName}" already exists in the list. Do you want to update its quantity from ${currentQuantity} to ${currentQuantity + newQuantity}?`
-      );
-      if (!yes) return;
-
-      newQuantity += currentQuantity;
-    }
-
-    await addItem(itemName, newQuantity);
-
-    setItemName("");
-    setQuantity(1);
-    setSuggestions([]);
-
-    loadItems();
-  };
-
-  const handleBought = async (id) => {
-    const yes = window.confirm("Mark this item as bought?");
-    if (!yes) return;
-
-    await markBought(id);
-    loadItems();
-  };
-
-  if (loading) return <p>Loading...</p>;
-
-  return (
-    <div className="glist-body">
-      <div className="glist-container">
-        <h1 className="glist-title">Costco Grocery List</h1>
-
-        {/* Sorting dropdown */}
-        <select
-          value={sortMode}
-          onChange={(e) => setSortMode(e.target.value)}
-          className="glist-sort"
-        >
-          <option value="az">A → Z</option>
-          <option value="za">Z → A</option>
-          <option value="qty-high">Quantity: High → Low</option>
-          <option value="qty-low">Quantity: Low → High</option>
-        </select>
-
-        {/* Add Item form (editor/admin only) */}
-        {[ROLES.ADMIN, ROLES.EDITOR].includes(role) && showAddForm && (
-          <>
-            <input
-              type="text"
-              className="glist-input"
-              placeholder="Item name"
-              value={itemName}
-              onChange={(e) => handleSuggest(e.target.value)}
-              onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
-              onClick={() => setShowSuggestions(true)}
-            />
-
-            {showSuggestions && suggestions.length > 0 && (
-              <ul className="glist-suggest-box">
-                {suggestions.map((s, i) => (
-                  <li
-                    key={i}
-                    className="glist-suggest-item"
-                    onClick={() => {
-                      setItemName(s);
-                      setSuggestions([]);
-                    }}
-                  >
-                    {s}
-                  </li>
-                ))}
-              </ul>
-            )}
-
-            <input
-              type="number"
-              min="1"
-              className="glist-input"
-              value={quantity}
-              onChange={(e) => setQuantity(Number(e.target.value))}
-            />
-
-            <button className="glist-btn" onClick={handleAdd}>
-              Add Item
-            </button>
-          </>
-        )}
-
-        {/* Grocery list */}
-        <ul className="glist-ul">
-          {sortedItems.map((item) => (
-            <li
-              key={item.id}
-              className="glist-li"
-              onClick={() =>
-                [ROLES.ADMIN, ROLES.EDITOR].includes(role) && handleBought(item.id)
-              }
-            >
-              {item.item_name} ({item.quantity})
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Floating Button (editor/admin only) */}
-      {[ROLES.ADMIN, ROLES.EDITOR].includes(role) && (
-        <button
-          className="glist-fab"
-          onClick={() => setShowAddForm(!showAddForm)}
-        >
-          {showAddForm ? "−" : "+"}
-        </button>
-      )}
-    </div>
-  );
-}

frontend/src/pages/Login.jsx

@@ -1,57 +0,0 @@
-import { useContext, useState } from "react";
-import { Link } from "react-router-dom";
-import { loginRequest } from "../api/auth";
-import { AuthContext } from "../context/AuthContext";
-import "../styles/Login.css";
-
-export default function Login() {
-  const { login } = useContext(AuthContext);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-
-  const submit = async (e) => {
-    e.preventDefault();
-    setError("");
-
-    try {
-      const data = await loginRequest(username, password);
-      login(data);
-      window.location.href = "/";
-    } catch (err) {
-      setError(err.response?.data?.message || "Login failed");
-    }
-  };
-
-  return (
-    <div className="login-wrapper">
-      <div className="login-box">
-        <h1 className="login-title">Login</h1>
-
-        {error && <p className="login-error">{error}</p>}
-
-        <form onSubmit={submit}>
-          <input
-            type="text"
-            className="login-input"
-            placeholder="Username"
-            onChange={(e) => setUsername(e.target.value)}
-          />
-
-          <input
-            type="password"
-            className="login-input"
-            placeholder="Password"
-            onChange={(e) => setPassword(e.target.value)}
-          />
-
-          <button type="submit" className="login-button">Login</button>
-        </form>
-
-        <p className="login-register">
-          Need an account? <Link to="/register">Register here</Link>
-        </p>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/Register.jsx

@@ -1,110 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { loginRequest, registerRequest } from "../api/auth";
-import { checkIfUserExists } from "../api/users";
-import { AuthContext } from "../context/AuthContext";
-
-import "../styles/Register.css";
-
-export default function Register() {
-  const navigate = useNavigate();
-  const { login } = useContext(AuthContext);
-
-  const [name, setName] = useState("");
-  const [username, setUsername] = useState("");
-  const [userExists, setUserExists] = useState(false);
-  const [password, setPassword] = useState("");
-  const [passwordMatches, setPasswordMatches] = useState(true);
-  const [confirm, setConfirm] = useState("");
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
-
-
-  useEffect(() => { checkIfUserExistsHandler(); }, [username]);
-  async function checkIfUserExistsHandler() {
-    setUserExists((await checkIfUserExists(username)).data);
-  }
-
-  useEffect(() => { setError(userExists ? `Username '${username}' already taken` : ""); }, [userExists]);
-
-  useEffect(() => {
-    setPasswordMatches(
-      !password ||
-      !confirm ||
-      password === confirm
-    );
-  }, [password, confirm]);
-
-  useEffect(() => { setError(passwordMatches ? "" : "Passwords are not matching"); }, [passwordMatches]);
-
-
-
-  const submit = async (e) => {
-    e.preventDefault();
-    setError("");
-    setSuccess("");
-
-    try {
-      await registerRequest(username, password, name);
-      console.log("Registered user:", username);
-      const data = await loginRequest(username, password);
-      console.log(data);
-      login(data);
-      setSuccess("Account created! Redirecting the grocery list...");
-      setTimeout(() => navigate("/"), 2000);
-    } catch (err) {
-      setError(err.response?.data?.message || "Registration failed");
-      setTimeout(() => {
-        setError("");
-      }, 1000);
-    }
-  };
-
-
-  return (
-    <div className="register-container">
-      <h1>Register</h1>
-
-      {<p className="error-message">{error}</p>}
-      {success && <p className="success-message">{success}</p>}
-
-      <form className="register-form" onSubmit={submit}>
-        <input
-          type="text"
-          placeholder="Name"
-          onChange={(e) => setName(e.target.value)}
-          required
-        />
-
-        <input
-          type="text"
-          placeholder="Username"
-          onKeyUp={(e) => setUsername(e.target.value)}
-          required
-        />
-
-        <input
-          type="password"
-          placeholder="Password"
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-
-        <input
-          type="password"
-          placeholder="Confirm Password"
-          onChange={(e) => setConfirm(e.target.value)}
-          required
-        />
-
-        <button disabled={error !== ""} type="submit">
-          Create Account
-        </button>
-      </form>
-
-      <p className="register-link">
-        Already have an account? <Link to="/login">Login here</Link>
-      </p>
-    </div>
-  );
-}

frontend/src/styles/GroceryList.css

@@ -1,138 +0,0 @@
-/* Container */
-.glist-body {
-  font-family: Arial, sans-serif;
-  padding: 1em;
-  background: #f8f9fa;
-}
-
-.glist-container {
-  max-width: 480px;
-  margin: auto;
-  background: white;
-  padding: 1em;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.08);
-}
-
-/* Title */
-.glist-title {
-  text-align: center;
-  font-size: 1.5em;
-  margin-bottom: 0.4em;
-}
-
-/* Inputs */
-.glist-input {
-  font-size: 1em;
-  padding: 0.5em;
-  margin: 0.3em 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Buttons */
-.glist-btn {
-  font-size: 1em;
-  padding: 0.55em;
-  width: 100%;
-  margin-top: 0.4em;
-  cursor: pointer;
-  border: none;
-  background: #007bff;
-  color: white;
-  border-radius: 4px;
-}
-
-.glist-btn:hover {
-  background: #0067d8;
-}
-
-/* Suggestion dropdown */
-.glist-suggest-box {
-  background: #fff;
-  border: 1px solid #ccc;
-  max-height: 150px;
-  overflow-y: auto;
-  position: absolute;
-  z-index: 999;  
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.08);
-  padding: 1em;
-  width: calc(100% - 8em);  
-  max-width: 440px;  
-  margin: 0 auto;    
-}
-
-.glist-suggest-item {
-  padding: 0.5em;
-  padding-inline: 2em;
-  cursor: pointer;
-}
-
-.glist-suggest-item:hover {
-  background: #eee;
-}
-
-/* Grocery list items */
-.glist-ul {
-  list-style: none;
-  padding: 0;
-  margin-top: 1em;
-}
-
-.glist-li {
-  padding: 0.7em;
-  background: #e9ecef;
-  border-radius: 5px;
-  margin-bottom: 0.6em;
-  cursor: pointer;
-}
-
-.glist-li:hover {
-  background: #dee2e6;
-}
-
-/* Sorting dropdown */
-.glist-sort {
-  width: 100%;
-  margin: 0.3em 0;
-  padding: 0.5em;
-  font-size: 1em;
-  border-radius: 4px;
-}
-
-/* Floating Action Button (FAB) */
-.glist-fab {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background: #28a745;
-  color: white;
-  border: none;
-  border-radius: 50%;
-  width: 62px;
-  height: 62px;
-  font-size: 2em;
-  line-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-  cursor: pointer;
-}
-
-.glist-fab:hover {
-  background: #218838;
-}
-
-/* Mobile tweaks */
-@media (max-width: 480px) {
-  .glist-container {
-    padding: 1em 0.8em;
-  }
-  
-  .glist-fab {
-    bottom: 16px;
-    right: 16px;
-  }
-}

frontend/src/styles/Login.css

@@ -1,70 +0,0 @@
-.login-wrapper {
-  font-family: Arial, sans-serif;
-  padding: 1em;
-  background: #f8f9fa;
-  min-height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.login-box {
-  width: 100%;
-  max-width: 360px;
-  background: white;
-  padding: 1.5em;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.12);
-}
-
-.login-title {
-  text-align: center;
-  font-size: 1.6em;
-  margin-bottom: 1em;
-}
-
-.login-input {
-  width: 100%;
-  padding: 0.6em;
-  margin: 0.4em 0;
-  font-size: 1em;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-}
-
-.login-button {
-  width: 100%;
-  padding: 0.7em;
-  margin-top: 0.6em;
-  background: #007bff;
-  border: none;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.login-button:hover {
-  background: #0068d1;
-}
-
-.login-error {
-  color: red;
-  text-align: center;
-  margin-bottom: 0.6em;
-}
-
-.login-register {
-  text-align: center;
-  margin-top: 1em;
-}
-
-.login-register a {
-  color: #007bff;
-  text-decoration: none;
-}
-
-.login-register a:hover {
-  text-decoration: underline;
-}

frontend/src/styles/Navbar.css

@@ -1,58 +0,0 @@
-.navbar {
-  background: #343a40;
-  color: white;
-  padding: 0.6em 1em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 4px;
-  margin-bottom: 1em;
-}
-
-.navbar-links a {
-  color: white;
-  margin-right: 1em;
-  text-decoration: none;
-  font-size: 1.1em;
-}
-
-.navbar-links a:hover {
-  text-decoration: underline;
-}
-
-.navbar-logout {
-  background: #dc3545;
-  color: white;
-  border: none;
-  padding: 0.4em 0.8em;
-  border-radius: 4px;
-  cursor: pointer;
-  width: 100px;
-}
-
-.navbar-idcard {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  margin-right: 1em;
-  padding: 0.3em 0.6em;
-  background: #495057;
-  border-radius: 4px;
-  color: white;
-}
-
-.navbar-idinfo {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.1;
-}
-
-.navbar-username {
-  font-size: 0.95em;
-  font-weight: bold;
-}
-
-.navbar-role {
-  font-size: 0.75em;
-  opacity: 0.8;
-}

frontend/src/styles/Register.css

@@ -1,84 +0,0 @@
-.register-container {
-  max-width: 400px;
-  margin: 50px auto;
-  padding: 2rem;
-  border-radius: 12px;
-  background: #ffffff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  font-family: Arial, sans-serif;
-}
-
-.register-container h1 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  font-size: 1.8rem;
-  font-weight: bold;
-}
-
-.register-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.register-form input {
-  padding: 12px 14px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  font-size: 1rem;
-  outline: none;
-  transition: border-color 0.2s ease;
-}
-
-.register-form input:focus {
-  border-color: #0077ff;
-}
-
-.register-form button {
-  padding: 12px;
-  border: none;
-  background: #0077ff;
-  color: white;
-  font-size: 1rem;
-  border-radius: 8px;
-  cursor: pointer;
-  margin-top: 10px;
-  transition: background 0.2s ease;
-}
-
-.register-form button:hover:not(:disabled) {
-  background: #005fcc;
-}
-
-.register-form button:disabled {
-  background: #a8a8a8;
-  cursor: not-allowed;
-}
-
-.error-message {
-  height: 15px;
-  color: red;
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-.success-message {
-  color: green;
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-.register-link {
-  text-align: center;
-  margin-top: 1rem;
-}
-
-.register-link a {
-  color: #0077ff;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.register-link a:hover {
-  text-decoration: underline;
-}

frontend/src/utils/PrivateRoute.jsx

@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { Navigate } from "react-router-dom";
-import { AuthContext } from "../context/AuthContext";
-
-export default function PrivateRoute({ children }) {
-  const { token } = useContext(AuthContext);
-  return token ? children : <Navigate to="/login" />;
-}

frontend/src/utils/RoleGuard.jsx

@@ -1,24 +0,0 @@
-import { useContext } from "react";
-import { Navigate } from "react-router-dom";
-import { AuthContext } from "../context/AuthContext";
-
-export default function RoleGuard({ allowed, children }) {
-  const { role } = useContext(AuthContext);
-
-  if (!role) return <Navigate to="/login" />;
-  if (!allowed.includes(role)) return <Navigate to="/" />;
-
-  return children;
-}
-
-
-function usageExample() {
-  <Route
-    path="/admin"
-    element={
-      <RoleGuard allowed={[ROLES.ADMIN]}>
-        <AdminPanel />
-      </RoleGuard>
-    }
-  />
-}

frontend/vite.config.ts

@@ -1,15 +1,10 @@
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
-import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react'
-
-const env = loadEnv('', process.cwd());
-const allowedHosts = env.VITE_ALLOWED_HOSTS
-  ? env.VITE_ALLOWED_HOSTS.split(',').map((host) => host.trim())
-  : [];
 
 export default defineConfig({
   plugins: [react()],
   server: {
-    allowedHosts: allowedHosts,
+    allowedHosts: ["costco.nicosaya.com", "www.costco.nicosaya.com"],
     watch: {
       usePolling: true,
     },