From e9874b13eabc12ac93cc42c8f5496bcdd5de1d63 Mon Sep 17 00:00:00 2001
From: Nitin Kumar Yadav <nitinyadav8675@gmail.com>
Date: Sun, 11 Jan 2026 19:49:30 +0530
Subject: [PATCH 1/3] feat: add interactive Try It panel to API docs

---
 frontend/src/components/TryItPanel.jsx | 65 ++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 frontend/src/components/TryItPanel.jsx

diff --git a/frontend/src/components/TryItPanel.jsx b/frontend/src/components/TryItPanel.jsx
new file mode 100644
index 000000000..4fc704c6d
--- /dev/null
+++ b/frontend/src/components/TryItPanel.jsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+
+export default function TryItPanel({ endpoint, method = "POST" }) {
+  const [apiKey, setApiKey] = useState("");
+  const [jsonBody, setJsonBody] = useState(`{}`);
+  const [response, setResponse] = useState("");
+  const [status, setStatus] = useState("");
+
+  async function sendRequest() {
+    try {
+      const res = await fetch(`https://api.urbackend.bitbros.in${endpoint}`, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": apiKey,
+        },
+        body: method !== "GET" ? jsonBody : null,
+      });
+
+      const data = await res.text();
+      setStatus(res.status);
+      setResponse(data);
+    } catch (err) {
+      setResponse(err.message);
+    }
+  }
+
+  return (
+    <div className="bg-zinc-900 p-4 rounded-lg mt-4 border border-zinc-700">
+      <div className="mb-2">
+        <label className="text-sm text-zinc-400">x-api-key</label>
+        <input
+          className="w-full p-2 mt-1 bg-black border border-zinc-700 rounded"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder="sk_live_xxxxx"
+        />
+      </div>
+
+      <div className="mb-2">
+        <label className="text-sm text-zinc-400">Request Body</label>
+        <textarea
+          className="w-full p-2 mt-1 bg-black border border-zinc-700 rounded font-mono"
+          rows={6}
+          value={jsonBody}
+          onChange={(e) => setJsonBody(e.target.value)}
+        />
+      </div>
+
+      <button
+        onClick={sendRequest}
+        className="bg-green-500 text-black px-4 py-2 rounded"
+      >
+        Send Request
+      </button>
+
+      <div className="mt-4">
+        <p className="text-sm text-zinc-400">Status: {status}</p>
+        <pre className="bg-black p-2 mt-1 rounded text-green-400 text-sm overflow-x-auto">
+          {response}
+        </pre>
+      </div>
+    </div>
+  );
+}

From ce8de8becbf3f19fc2284423f729ede07d078a36 Mon Sep 17 00:00:00 2001
From: Nitin Kumar Yadav <nitinyadav8675@gmail.com>
Date: Sun, 11 Jan 2026 20:15:54 +0530
Subject: [PATCH 2/3] chore: remove unrelated changes

---
 frontend/src/pages/Docs.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/pages/Docs.jsx b/frontend/src/pages/Docs.jsx
index a729c7296..2db4c145a 100644
--- a/frontend/src/pages/Docs.jsx
+++ b/frontend/src/pages/Docs.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Copy, Terminal, Database, Shield, HardDrive, Check, Server, Menu, X, ChevronDown, AlertCircle, Zap } from 'lucide-react';
 import { API_URL } from '../config';
+import TryItPanel from "../components/TryItPanel.jsx";
 
 import Footer from '../components/Layout/Footer';
 
@@ -253,6 +254,8 @@ console.log(data);
                             body={{ name: "MacBook Pro", price: 1299, inStock: true }}
                             comment="Add a new item"
                         />
+                        <TryItPanel endpoint="/api/data/products" method="POST" />
+
 
                         <h3 style={{ fontSize: '1.1rem', marginTop: '2rem' }}>3. Get / Update / Delete by ID</h3>
                         <p style={{ fontSize: '0.9rem', color: 'var(--color-text-muted)' }}>

From 5c17d64aca069d3205813aca54713c40713695d8 Mon Sep 17 00:00:00 2001
From: Nitin Kumar Yadav <nitinyadav8675@gmail.com>
Date: Mon, 12 Jan 2026 20:16:27 +0530
Subject: [PATCH 3/3] feat: improve Try It Out panel and docs

---
 frontend/src/components/TryItPanel.jsx | 126 ++++++++++++++++++++-----
 frontend/src/pages/Docs.jsx            |   2 +-
 2 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/TryItPanel.jsx b/frontend/src/components/TryItPanel.jsx
index 4fc704c6d..a0a80c6b9 100644
--- a/frontend/src/components/TryItPanel.jsx
+++ b/frontend/src/components/TryItPanel.jsx
@@ -5,10 +5,33 @@ export default function TryItPanel({ endpoint, method = "POST" }) {
   const [jsonBody, setJsonBody] = useState(`{}`);
   const [response, setResponse] = useState("");
   const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
+  const [params, setParams] = useState({});
+
+  function buildEndpoint() {
+  let url = endpoint;
+  Object.keys(params).forEach(key => {
+    url = url.replace(`:${key}`, params[key]);
+  });
+  return url;
+}
+
 
   async function sendRequest() {
+    //  Stop if API key is missing
+    if (!apiKey || apiKey.trim() === "") {
+      setError("You need an API key. Go to Dashboard → Create Project → Copy API key.");
+      return;
+    }
+
+    // Clear previous error
+    setError("");
+
     try {
-      const res = await fetch(`https://api.urbackend.bitbros.in${endpoint}`, {
+      const res = await fetch(`https://api.urbackend.bitbros.in${buildEndpoint()}`, {
+
+
+
         method,
         headers: {
           "Content-Type": "application/json",
@@ -26,40 +49,91 @@ export default function TryItPanel({ endpoint, method = "POST" }) {
   }
 
   return (
-    <div className="bg-zinc-900 p-4 rounded-lg mt-4 border border-zinc-700">
-      <div className="mb-2">
-        <label className="text-sm text-zinc-400">x-api-key</label>
-        <input
-          className="w-full p-2 mt-1 bg-black border border-zinc-700 rounded"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          placeholder="sk_live_xxxxx"
-        />
-      </div>
+  <div className="card" style={{ marginTop: "1.5rem" }}>
+    <h4 style={{ fontSize: "0.9rem", marginBottom: "1rem", color: "var(--color-text-muted)" }}>
+      Try It Out
+    </h4>
+
+    <div style={{ marginBottom: "1rem" }}>
+      <label className="form-label">x-api-key</label>
+      <input
+        className="input-field"
+        value={apiKey}
+        onChange={(e) => setApiKey(e.target.value)}
+        placeholder="YOUR API KEY"
+      />
+    </div>
+{endpoint.includes(":") && (
+  <div style={{ marginBottom: "1rem" }}>
+    <label className="form-label">Path Parameters</label>
+
+    {endpoint
+      .match(/:([a-zA-Z0-9_]+)/g)
+      ?.map(p => {
+        const key = p.replace(":", "");
+        return (
+          <input
+            key={key}
+            className="input-field"
+            placeholder={key}
+            value={params[key] || ""}
+            onChange={e => setParams({ ...params, [key]: e.target.value })}
+            style={{ marginBottom: "0.5rem" }}
+          />
+        );
+      })}
+  </div>
+)}
 
-      <div className="mb-2">
-        <label className="text-sm text-zinc-400">Request Body</label>
+    {method !== "GET" && (
+      <div style={{ marginBottom: "1rem" }}>
+        <label className="form-label">Request Body</label>
         <textarea
-          className="w-full p-2 mt-1 bg-black border border-zinc-700 rounded font-mono"
-          rows={6}
+          className="input-field"
+          style={{ minHeight: "120px", fontFamily: "monospace" }}
           value={jsonBody}
           onChange={(e) => setJsonBody(e.target.value)}
         />
       </div>
+    )}
 
-      <button
-        onClick={sendRequest}
-        className="bg-green-500 text-black px-4 py-2 rounded"
-      >
-        Send Request
-      </button>
+    {error && (
+      <div style={{
+        background: "rgba(239,68,68,0.1)",
+        border: "1px solid rgba(239,68,68,0.4)",
+        padding: "0.75rem",
+        borderRadius: "6px",
+        color: "#f87171",
+        marginBottom: "1rem",
+        fontSize: "0.85rem"
+      }}>
+        {error}
+      </div>
+    )}
+
+    <button onClick={sendRequest} className="btn btn-primary">
+      Send Request
+    </button>
 
-      <div className="mt-4">
-        <p className="text-sm text-zinc-400">Status: {status}</p>
-        <pre className="bg-black p-2 mt-1 rounded text-green-400 text-sm overflow-x-auto">
+    {response && (
+      <div style={{ marginTop: "1rem" }}>
+        <div style={{ fontSize: "0.8rem", color: "var(--color-text-muted)", marginBottom: "0.25rem" }}>
+          Status: {status}
+        </div>
+        <pre style={{
+          background: "#0b0b0b",
+          border: "1px solid #222",
+          borderRadius: "6px",
+          padding: "1rem",
+          color: "var(--color-primary)",
+          fontSize: "0.8rem",
+          overflowX: "auto"
+        }}>
           {response}
         </pre>
       </div>
-    </div>
-  );
+    )}
+  </div>
+);
+
 }
diff --git a/frontend/src/pages/Docs.jsx b/frontend/src/pages/Docs.jsx
index 2db4c145a..7a9d2b5e7 100644
--- a/frontend/src/pages/Docs.jsx
+++ b/frontend/src/pages/Docs.jsx
@@ -254,7 +254,7 @@ console.log(data);
                             body={{ name: "MacBook Pro", price: 1299, inStock: true }}
                             comment="Add a new item"
                         />
-                        <TryItPanel endpoint="/api/data/products" method="POST" />
+                       <TryItPanel endpoint="/api/data/:collectionName" method="POST" />
 
 
                         <h3 style={{ fontSize: '1.1rem', marginTop: '2rem' }}>3. Get / Update / Delete by ID</h3>