From eb362903c56768b58a4ead773b5a3cca4f5a03c6 Mon Sep 17 00:00:00 2001
From: jainiksha <jainiksha.patel2007@gmail.com>
Date: Thu, 13 Aug 2026 15:22:57 +0530
Subject: [PATCH 1/2] feat: add AI technical signal analyzer

---
 ...InterviewAnswerTechnicalSignalAnalyzer.jsx | 245 ++++++++++++++++++
 1 file changed, 245 insertions(+)
 create mode 100644 frontend/src/pages/AIInterviewAnswerTechnicalSignalAnalyzer.jsx

diff --git a/frontend/src/pages/AIInterviewAnswerTechnicalSignalAnalyzer.jsx b/frontend/src/pages/AIInterviewAnswerTechnicalSignalAnalyzer.jsx
new file mode 100644
index 00000000..4bbf8c02
--- /dev/null
+++ b/frontend/src/pages/AIInterviewAnswerTechnicalSignalAnalyzer.jsx
@@ -0,0 +1,245 @@
+import React, { useState } from "react";
+import {
+  Brain,
+  Target,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+} from "lucide-react";
+
+const signals = [
+  {
+    title: "Technical Decision",
+    description: "Explains why caching was selected.",
+    score: 92,
+    status: "Strong",
+  },
+  {
+    title: "Performance Awareness",
+    description: "Connects caching with reduced database load.",
+    score: 86,
+    status: "Strong",
+  },
+  {
+    title: "Scalability Evidence",
+    description: "Does not clearly explain how the solution scales.",
+    score: 54,
+    status: "Weak",
+  },
+  {
+    title: "Trade-off Explanation",
+    description: "Mentions consistency concerns but lacks depth.",
+    score: 61,
+    status: "Needs Improvement",
+  },
+];
+
+export default function AIInterviewAnswerTechnicalSignalAnalyzer() {
+  const [answer, setAnswer] = useState("");
+  const [analyzed, setAnalyzed] = useState(false);
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+
+        <div className="p-3 rounded-xl bg-indigo-100 text-indigo-600">
+          <Brain size={28} />
+        </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            AI Technical Signal Analyzer
+          </h1>
+
+          <p className="text-gray-500">
+            Identify the technical signals your answer communicates to an
+            interviewer.
+          </p>
+        </div>
+
+      </div>
+
+      {/* Question */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <p className="text-sm text-gray-500">
+          Interview Question
+        </p>
+
+        <h2 className="text-xl font-bold mt-2">
+          How would you improve the performance of a high-traffic API?
+        </h2>
+
+      </div>
+
+      {/* Answer */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <h2 className="font-bold text-lg">
+          Your Answer
+        </h2>
+
+        <textarea
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          rows={8}
+          placeholder="Paste your interview response..."
+          className="w-full border rounded-xl p-4 mt-4 outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+
+        <button
+          disabled={!answer.trim()}
+          onClick={() => setAnalyzed(true)}
+          className="mt-4 px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold disabled:opacity-50"
+        >
+          Analyze Technical Signals
+        </button>
+
+      </div>
+
+      {analyzed && (
+        <>
+          {/* Overall Score */}
+          <div className="bg-indigo-50 rounded-2xl p-6 text-center">
+
+            <Target
+              className="mx-auto text-indigo-600"
+              size={32}
+            />
+
+            <p className="text-gray-500 mt-3">
+              Technical Signal Score
+            </p>
+
+            <p className="text-6xl font-black text-indigo-600">
+              78%
+            </p>
+
+            <p className="text-gray-600 mt-2">
+              Good technical evidence with opportunities to strengthen
+              scalability and trade-off explanations.
+            </p>
+
+          </div>
+
+          {/* Signals */}
+          <div className="bg-white rounded-2xl shadow p-5">
+
+            <h2 className="font-bold text-lg">
+              Detected Technical Signals
+            </h2>
+
+            <div className="space-y-4 mt-5">
+
+              {signals.map((signal) => (
+                <div
+                  key={signal.title}
+                  className="border rounded-xl p-4"
+                >
+
+                  <div className="flex justify-between items-start">
+
+                    <div>
+                      <h3 className="font-bold">
+                        {signal.title}
+                      </h3>
+
+                      <p className="text-gray-600 text-sm mt-1">
+                        {signal.description}
+                      </p>
+                    </div>
+
+                    <span
+                      className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                        signal.status === "Strong"
+                          ? "bg-green-100 text-green-700"
+                          : "bg-orange-100 text-orange-700"
+                      }`}
+                    >
+                      {signal.status}
+                    </span>
+
+                  </div>
+
+                  <div className="mt-4">
+
+                    <div className="flex justify-between text-sm">
+                      <span>Signal Strength</span>
+                      <span className="font-bold">
+                        {signal.score}%
+                      </span>
+                    </div>
+
+                    <div className="h-2 bg-gray-200 rounded-full mt-2">
+                      <div
+                        className="h-full bg-indigo-600 rounded-full"
+                        style={{
+                          width: `${signal.score}%`,
+                        }}
+                      />
+                    </div>
+
+                  </div>
+
+                </div>
+              ))}
+
+            </div>
+
+          </div>
+
+          {/* Weak Signal */}
+          <div className="bg-orange-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <AlertTriangle className="text-orange-600" />
+
+              <div>
+                <h2 className="font-bold text-orange-700">
+                  Missing Technical Signal
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Your answer does not provide enough evidence about
+                  scalability. Explain how the solution behaves as traffic
+                  increases and mention relevant bottlenecks or trade-offs.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+          {/* Recommendation */}
+          <div className="bg-green-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <TrendingUp className="text-green-600" />
+
+              <div>
+                <h2 className="font-bold text-green-700">
+                  AI Strengthening Recommendation
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Keep your strong performance and caching explanation, then
+                  add one concrete scalability decision and explain its
+                  trade-off. This will make your technical expertise more
+                  visible to the interviewer.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+        </>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file

From b4e82663c5c9897c08ca56fde71413d3948553e9 Mon Sep 17 00:00:00 2001
From: jainiksha <jainiksha.patel2007@gmail.com>
Date: Thu, 13 Aug 2026 15:24:02 +0530
Subject: [PATCH 2/2] feat: add AI multi-solution interview practice

---
 ...InterviewQuestionMultiSolutionPractice.jsx | 264 ++++++++++++++++++
 1 file changed, 264 insertions(+)
 create mode 100644 frontend/src/pages/AIInterviewQuestionMultiSolutionPractice.jsx

diff --git a/frontend/src/pages/AIInterviewQuestionMultiSolutionPractice.jsx b/frontend/src/pages/AIInterviewQuestionMultiSolutionPractice.jsx
new file mode 100644
index 00000000..d60cbf41
--- /dev/null
+++ b/frontend/src/pages/AIInterviewQuestionMultiSolutionPractice.jsx
@@ -0,0 +1,264 @@
+import React, { useState } from "react";
+import {
+  Brain,
+  GitCompare,
+  CheckCircle2,
+  Target,
+  TrendingUp,
+} from "lucide-react";
+
+export default function AIInterviewQuestionMultiSolutionPractice() {
+  const [solution1, setSolution1] = useState("");
+  const [solution2, setSolution2] = useState("");
+  const [compared, setCompared] = useState(false);
+
+  return (
+    <div className="max-w-5xl mx-auto p-6 space-y-6">
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+
+        <div className="p-3 rounded-xl bg-indigo-100 text-indigo-600">
+          <Brain size={28} />
+        </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            AI Multi-Solution Practice
+          </h1>
+
+          <p className="text-gray-500">
+            Explore multiple approaches to the same interview problem.
+          </p>
+        </div>
+
+      </div>
+
+      {/* Problem */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <p className="text-sm text-gray-500">
+          Interview Problem
+        </p>
+
+        <h2 className="text-xl font-bold mt-2">
+          Find whether an array contains duplicate values.
+        </h2>
+
+        <p className="text-gray-600 mt-3">
+          First solve the problem using your preferred approach. Then try to
+          solve it again using a fundamentally different approach.
+        </p>
+
+      </div>
+
+      {/* Solutions */}
+      <div className="grid md:grid-cols-2 gap-5">
+
+        <div className="bg-white rounded-2xl shadow p-5">
+
+          <h2 className="font-bold text-lg">
+            Approach 1
+          </h2>
+
+          <p className="text-sm text-gray-500 mt-1">
+            Your initial solution
+          </p>
+
+          <textarea
+            value={solution1}
+            onChange={(e) => setSolution1(e.target.value)}
+            rows={8}
+            placeholder="Describe your first approach..."
+            className="w-full border rounded-xl p-4 mt-4 outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+
+        </div>
+
+        <div className="bg-indigo-50 rounded-2xl p-5">
+
+          <h2 className="font-bold text-lg text-indigo-700">
+            Approach 2
+          </h2>
+
+          <p className="text-sm text-gray-500 mt-1">
+            Try a different strategy
+          </p>
+
+          <textarea
+            value={solution2}
+            onChange={(e) => setSolution2(e.target.value)}
+            rows={8}
+            placeholder="Describe a different approach..."
+            className="w-full border rounded-xl p-4 mt-4 bg-white outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+
+        </div>
+
+      </div>
+
+      <button
+        disabled={!solution1.trim() || !solution2.trim()}
+        onClick={() => setCompared(true)}
+        className="px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold disabled:opacity-50"
+      >
+        Compare Approaches
+      </button>
+
+      {compared && (
+        <>
+          {/* Comparison */}
+          <div className="bg-white rounded-2xl shadow p-5">
+
+            <div className="flex items-center gap-2">
+              <GitCompare className="text-indigo-600" />
+
+              <h2 className="font-bold text-lg">
+                AI Approach Comparison
+              </h2>
+            </div>
+
+            <div className="overflow-x-auto mt-5">
+
+              <table className="w-full min-w-[650px] border-collapse">
+
+                <thead>
+                  <tr className="bg-gray-50">
+
+                    <th className="text-left p-4 border">
+                      Metric
+                    </th>
+
+                    <th className="p-4 border">
+                      Approach 1
+                    </th>
+
+                    <th className="p-4 border">
+                      Approach 2
+                    </th>
+
+                  </tr>
+                </thead>
+
+                <tbody>
+
+                  <tr>
+                    <td className="p-4 border font-semibold">
+                      Time Complexity
+                    </td>
+                    <td className="p-4 border text-center">
+                      O(n)
+                    </td>
+                    <td className="p-4 border text-center">
+                      O(n²)
+                    </td>
+                  </tr>
+
+                  <tr>
+                    <td className="p-4 border font-semibold">
+                      Space Complexity
+                    </td>
+                    <td className="p-4 border text-center">
+                      O(n)
+                    </td>
+                    <td className="p-4 border text-center">
+                      O(1)
+                    </td>
+                  </tr>
+
+                  <tr>
+                    <td className="p-4 border font-semibold">
+                      Scalability
+                    </td>
+                    <td className="p-4 border text-center">
+                      Strong
+                    </td>
+                    <td className="p-4 border text-center">
+                      Limited
+                    </td>
+                  </tr>
+
+                </tbody>
+
+              </table>
+
+            </div>
+
+          </div>
+
+          {/* Trade-offs */}
+          <div className="bg-orange-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <Target className="text-orange-600" />
+
+              <div>
+                <h2 className="font-bold text-orange-700">
+                  Trade-Off Analysis
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Approach 1 uses additional memory but provides better
+                  performance for large inputs. Approach 2 minimizes memory
+                  usage but requires nested comparisons and becomes slower as
+                  the input grows.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+          {/* Recommendation */}
+          <div className="bg-green-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <CheckCircle2 className="text-green-600" />
+
+              <div>
+                <h2 className="font-bold text-green-700">
+                  AI Recommendation
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Prefer Approach 1 when performance and large input sizes are
+                  important. Approach 2 can be useful when memory constraints
+                  are strict and input sizes are small.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+          {/* Skill Insight */}
+          <div className="bg-indigo-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <TrendingUp className="text-indigo-600" />
+
+              <div>
+                <h2 className="font-bold text-indigo-700">
+                  Problem-Solving Insight
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Comparing multiple valid solutions helps you recognize when
+                  constraints should influence algorithm selection instead of
+                  stopping at the first working solution.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+        </>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file