linear-b · vlussenburg · Nov 17, 2025 · Nov 17, 2025
diff --git a/README.md b/README.md
@@ -44,3 +44,16 @@ graph TD
 docker-compose up --build
 ```
 Open a browser to http://localhost:3000/
+
+## Additional Notes
+
+- Clarified environment setup steps.
+- Added missing detail about service dependencies.
+- Updated formatting in code examples.
+- Fixed minor typos in section headers.
+- Expanded explanation of configuration variables.
+- Linked to related documentation for clarity.
+- Added troubleshooting tips for local development.
+- Improved readability of deployment instructions.
+- Included note about version compatibility.
+- Documented commonly used CLI flags.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "dependencies": {
     "express": "^4.18.2",
-    "node-fetch": "^2.6.7"
+    "node-fetch": "^2.6.7",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express":"^5.0.1"
   }
 }
diff --git a/frontend/public/app.js b/frontend/public/app.js
@@ -10,9 +10,11 @@ async function login() {
     body: JSON.stringify({ username, password }),
   });
 
-  const data = await res.json();
-  token = data.token;
+  if (!res.ok) return document.getElementById("output").textContent = "Login failed.";
+  token = (await res.json()).token;
+  if (!token) return document.getElementById("output").textContent = "No token received.";
   document.getElementById("output").textContent = "Logged in!";
+  document.getElementById("login-section").style.display = "none";
 }
 
 async function placeOrder() {
@@ -31,3 +33,29 @@ async function placeOrder() {
   const text = await res.text();
   document.getElementById("output").textContent = text;
 }
+
+async function getOrderHistory() {
+  const res = await fetch("/api/orders/history", {
+    method: "GET",
+    headers: {
+      "Authorization": "Bearer " + token
+    }
+  });
+
+  if (!res.ok) {
+    document.getElementById("output").textContent = "Failed to fetch order history.";
+    return;
+  }
+
+  const orders = await res.json();
+  let output = `Order History for ${orders.username || document.getElementById("username").value}:\n`;
+  const orderList = orders.orders || orders;
+  if (orderList.length === 0) {
+    output += "No orders found.\n";
+  } else {
+    orderList.forEach(order => {
+      output += `Order #${order.orderId}: ${order.productId} x ${order.quantity}\n`;
+    });
+  }
+  document.getElementById("output").textContent = output;
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,18 +3,129 @@
 <head>
   <title>Demo Shop</title>
   <script defer src="app.js"></script>
+  <style>
+    body {
+      font-family: 'Segoe UI', Arial, sans-serif;
+      background: #f4f6fb;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 100vh;
+    }
+    .container {
+      background: #fff;
+      margin-top: 40px;
+      padding: 32px 40px;
+      border-radius: 12px;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+      min-width: 320px;
+    }
+    h1 {
+      margin-top: 0;
+      color: #2d3a4b;
+      font-size: 1.5rem;
+      border-bottom: 1px solid #e0e4ea;
+      padding-bottom: 8px;
+      margin-bottom: 18px;
+    }
+    label {
+      display: block;
+      margin-bottom: 6px;
+      color: #4a5568;
+      font-size: 0.97rem;
+    }
+    input {
+      width: 100%;
+      padding: 8px 10px;
+      margin-bottom: 16px;
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      font-size: 1rem;
+      background: #f8fafc;
+      transition: border 0.2s;
+    }
+    input:focus {
+      border-color: #4f8cff;
+      outline: none;
+    }
+    button {
+      background: #4f8cff;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      padding: 10px 18px;
+      font-size: 1rem;
+      cursor: pointer;
+      margin-right: 8px;
+      margin-bottom: 10px;
+      transition: background 0.2s;
+    }
+    button:hover {
+      background: #2563eb;
+    }
+    #output {
+      background: #f1f5f9;
+      border-radius: 6px;
+      padding: 12px;
+      margin-top: 18px;
+      min-height: 40px;
+      font-size: 0.97rem;
+      color: #374151;
+      border: 1px solid #e2e8f0;
+      white-space: pre-wrap;
+    }
+    .section {
+      margin-bottom: 28px;
+    }
+    select {
+      width: 100%;
+      padding: 8px 10px;
+      margin-bottom: 16px;
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      font-size: 1rem;
+      background: #f8fafc;
+      transition: border 0.2s;
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+    }
+
+    select:focus {
+      border-color: #4f8cff;
+      outline: none;
+    }
+  </style>
 </head>
 <body>
-  <h1>Login</h1>
-  <input id="username" placeholder="Username" />
-  <input id="password" type="password" />
-  <button onclick="login()">Login</button>
-
-  <h1>Order</h1>
-  <input id="product" placeholder="Product ID" />
-  <input id="quantity" type="number" value="1" />
-  <button onclick="placeOrder()">Place Order</button>
-
-  <pre id="output"></pre>
+  <div class="container">
+    <div class="section" id="login-section">
+      <h1>Login</h1>
+      <label for="username">Username</label>
+      <input id="username" placeholder="Username" />
+      <label for="password">Password</label>
+      <input id="password" type="password" placeholder="Password" />
+      <button onclick="login()">Login</button>
+    </div>
+    <div class="section">
+      <h1>Order</h1>
+      <label for="product">Product ID</label>
+      <select id="product" style="width: 100%; padding: 8px 10px; margin-bottom: 16px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; background: #f8fafc; transition: border 0.2s;">
+        <option value="" disabled selected>Select a product</option>
+        <option value="101">Wireless Headphones (101)</option>
+        <option value="102">Smart Fitness Watch (102)</option>
+        <option value="103">Bluetooth Speaker (103)</option>
+      </select>
+      <label for="quantity">Quantity</label>
+      <input id="quantity" type="number" value="1" min="1" />
+      <button onclick="placeOrder()">Place Order</button>
+    </div>
+    <div class="section">
+      <button onclick="getOrderHistory()">Order History</button>
+      <pre id="output"></pre>
+    </div>
+  </div>
 </body>
 </html>
diff --git a/frontend/server.js b/frontend/server.js
@@ -1,13 +1,55 @@
 const express = require("express");
 const fetch = require("node-fetch");
 const app = express();
+const swaggerUi = require("swagger-ui-express");
+const swaggerJSDoc = require("swagger-jsdoc");
+
+const swaggerDefinition = {
+  openapi: "3.0.0",
+  info: {
+    title: "Frontend Gateway API",
+    version: "1.0.0",
+    description: "API Gateway for login and order forwarding",
+  },
+  servers: [{ url: "http://localhost:3000" }],
+};
+
+const swaggerSpec = swaggerJSDoc({
+  swaggerDefinition,
+  apis: ["./server.js"], // this file (can add others too)
+});
 
 const AUTH_URL   = process.env.AUTH_URL   || "http://auth-python:8000";
 const ORDERS_URL = process.env.ORDERS_URL || "http://orders-java:8080";
 
 app.use(express.static("public"));
+app.get("/swagger.json", (req, res) => {
+  res.setHeader("Content-Type", "application/json");
+  res.send(swaggerSpec);
+});
+app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));
 app.use(express.json());
 
+/**
+ * @swagger
+ * /api/login:
+ *   post:
+ *     summary: Login using auth backend
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               username:
+ *                 type: string
+ *               password:
+ *                 type: string
+ *     responses:
+ *       200:
+ *         description: Login successful
+ */
 app.post("/api/login", async (req, res) => {
   const response = await fetch(`${AUTH_URL}/auth/login`, {
     method: "POST",
@@ -19,6 +61,30 @@
   res.json(data);
 });
 
+/**
+ * @swagger
+ * /api/orders:
+ *   post:
+ *     summary: Submit an order to the orders backend
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             example:
+ *               itemId: "abc123"
+ *               quantity: 2
+ *     responses:
+ *       200:
+ *         description: Order submitted successfully
+ *       401:
+ *         description: Unauthorized - invalid or missing token
+ *       500:
+ *         description: Server error from orders service
+ */
 app.post("/api/orders", async (req, res) => {
   const token = req.headers["authorization"];
   const response = await fetch(`${ORDERS_URL}/orders`, {
@@ -34,4 +100,38 @@
   res.status(response.status).send(text);
 });
 
+/**
+ * @swagger
+ * /api/orders/history:
+ *   get:
+ *     summary: Get order history for the authenticated user
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: Order history retrieved successfully
+ *       401:
+ *         description: Unauthorized - invalid or missing token
+ *       500:
+ *         description: Server error from orders service
+ */
+app.get("/api/orders/history", async (req, res) => {
+  const token = req.headers["authorization"];
+
+  try {
+    const response = await fetch(`${ORDERS_URL}/orders/history`, {
+      method: "GET",
+      headers: {
+        "Authorization": token,
+        "Content-Type": "application/json",
+      },
+    });
+
+    const text = await response.text();
+    res.status(response.status).send(text);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to fetch order history" });
+  }
+});
+
 app.listen(3000, () => console.log("Frontend on :3000"));
diff --git a/services/auth-python/app/auth.py b/services/auth-python/app/auth.py
@@ -6,8 +6,7 @@
 
 USER_DB = {
     "alice": "password123",
-    "bob": "hunter2",
-    "admin": "admin"
+    "bob": "hunter2"
 }
 
 SESSIONS = {}