feat: improve Try It Out panel and docs

Author: Nitin-kumar-yadav1307

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>
+);
+
 }

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>