From f55431def46a484f55b7ead213cb6d13b966942d Mon Sep 17 00:00:00 2001
From: Nasser AlKawari <60303522@udst.edu.qa>
Date: Sat, 11 Apr 2026 17:16:42 +0300
Subject: [PATCH 1/4] feat: add input validation to login form

---
 src/pages/LoginPage.jsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index a8b63b8..6c5d512 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -8,15 +8,47 @@ function LoginPage() {
     password: "",
   });
 
+  const [errors, setErrors] = useState({});
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required.";
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Please enter a valid email address.";
+    }
+
+    if (!formData.password.trim()) {
+      newErrors.password = "Password is required.";
+    } else if (formData.password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters.";
+    }
+
+    return newErrors;
+  };
+
   const handleChange = (e) => {
     setFormData((prev) => ({
       ...prev,
       [e.target.name]: e.target.value,
     }));
+
+    setErrors((prev) => ({
+      ...prev,
+      [e.target.name]: "",
+    }));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
+
+    const validationErrors = validateForm();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
     navigate("/landing");
   };
 
@@ -38,6 +70,7 @@ function LoginPage() {
             value={formData.email}
             onChange={handleChange}
           />
+          {errors.email && <p className="field-error">{errors.email}</p>}
 
           <label>Password</label>
           <input
@@ -47,6 +80,7 @@ function LoginPage() {
             value={formData.password}
             onChange={handleChange}
           />
+          {errors.password && <p className="field-error">{errors.password}</p>}
 
           <button type="submit" className="primary-btn full-width">
             Login

From 67208113f4193428911d669b1ddb49b6aa15f545 Mon Sep 17 00:00:00 2001
From: Nasser AlKawari <60303522@udst.edu.qa>
Date: Sat, 11 Apr 2026 17:18:46 +0300
Subject: [PATCH 2/4] feat: add input validation to register form

---
 src/pages/RegisterPage.jsx | 48 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
index 16f6267..832f97b 100644
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -10,18 +10,56 @@ function RegisterPage() {
     confirmPassword: "",
   });
 
+  const [errors, setErrors] = useState({});
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.fullName.trim()) {
+      newErrors.fullName = "Full name is required.";
+    } else if (formData.fullName.trim().length < 3) {
+      newErrors.fullName = "Full name must be at least 3 characters.";
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required.";
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Please enter a valid email address.";
+    }
+
+    if (!formData.password.trim()) {
+      newErrors.password = "Password is required.";
+    } else if (formData.password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters.";
+    }
+
+    if (!formData.confirmPassword.trim()) {
+      newErrors.confirmPassword = "Please confirm your password.";
+    } else if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "Passwords do not match.";
+    }
+
+    return newErrors;
+  };
+
   const handleChange = (e) => {
     setFormData((prev) => ({
       ...prev,
       [e.target.name]: e.target.value,
     }));
+
+    setErrors((prev) => ({
+      ...prev,
+      [e.target.name]: "",
+    }));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    if (formData.password !== formData.confirmPassword) {
-      alert("Passwords do not match.");
+    const validationErrors = validateForm();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
       return;
     }
 
@@ -46,6 +84,7 @@ function RegisterPage() {
             value={formData.fullName}
             onChange={handleChange}
           />
+          {errors.fullName && <p className="field-error">{errors.fullName}</p>}
 
           <label>Email</label>
           <input
@@ -55,6 +94,7 @@ function RegisterPage() {
             value={formData.email}
             onChange={handleChange}
           />
+          {errors.email && <p className="field-error">{errors.email}</p>}
 
           <label>Password</label>
           <input
@@ -64,6 +104,7 @@ function RegisterPage() {
             value={formData.password}
             onChange={handleChange}
           />
+          {errors.password && <p className="field-error">{errors.password}</p>}
 
           <label>Confirm Password</label>
           <input
@@ -73,6 +114,9 @@ function RegisterPage() {
             value={formData.confirmPassword}
             onChange={handleChange}
           />
+          {errors.confirmPassword && (
+            <p className="field-error">{errors.confirmPassword}</p>
+          )}
 
           <button type="submit" className="primary-btn full-width">
             Register

From 2bea084735a8fee759fbf6df35b6353dc4dea1d1 Mon Sep 17 00:00:00 2001
From: Nasser AlKawari <60303522@udst.edu.qa>
Date: Sat, 11 Apr 2026 18:26:04 +0300
Subject: [PATCH 3/4] feat: add frontend input validation for auth and quiz
 generation

---
 package-lock.json              |  36 +---
 src/App.css                    |   8 +
 src/pages/GenerateQuizPage.jsx | 358 +++++++++------------------------
 3 files changed, 110 insertions(+), 292 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 569a3fd..2b8497a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -264,31 +265,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
-      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
-      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -296,7 +272,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -882,6 +857,7 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -928,6 +904,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1036,6 +1013,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1238,6 +1216,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2185,6 +2164,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2246,6 +2226,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2255,6 +2236,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2517,6 +2499,7 @@
       "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -2641,6 +2624,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/App.css b/src/App.css
index f937ae0..fcbd40f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1307,4 +1307,12 @@ a {
   .progress-side-panel {
     order: 2;
   }
+
+  .field-error {
+    color: #e04561;
+    font-size: 13px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    font-weight: 600;
+  } 
 }
\ No newline at end of file
diff --git a/src/pages/GenerateQuizPage.jsx b/src/pages/GenerateQuizPage.jsx
index 35b79a6..0256129 100644
--- a/src/pages/GenerateQuizPage.jsx
+++ b/src/pages/GenerateQuizPage.jsx
@@ -1,86 +1,87 @@
-//DUMMY version to test frontend design and screens
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 function GenerateQuizPage() {
   const navigate = useNavigate();
+
   const [topic, setTopic] = useState("");
-  const [uploadedFile, setUploadedFile] = useState(null);
-  const [uploadedContent, setUploadedContent] = useState("");
   const [numQuestions, setNumQuestions] = useState(10);
   const [difficulty, setDifficulty] = useState("medium");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [errors, setErrors] = useState({});
 
-  const handleFileUpload = async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
+  const API_URL = "http://localhost:5000/generate";
 
-    setUploadedFile(file);
-    setError("");
+  const validateForm = () => {
+    const newErrors = {};
 
-    try {
-      const fileContent = await file.text();
-      setUploadedContent(fileContent);
-    } catch (err) {
-      setError("Failed to read file. Please try another document.");
-      setUploadedFile(null);
-      setUploadedContent("");
+    if (!topic.trim()) {
+      newErrors.topic = "Topic or study material is required.";
+    } else if (topic.trim().length < 3) {
+      newErrors.topic = "Please enter at least 3 characters.";
+    } else if (topic.trim().length > 200) {
+      newErrors.topic = "Please keep the topic under 200 characters.";
+    }
+
+    if (!numQuestions || numQuestions < 1 || numQuestions > 20) {
+      newErrors.numQuestions = "Number of questions must be between 1 and 20.";
     }
-  };
 
-  const handleRemoveFile = () => {
-    setUploadedFile(null);
-    setUploadedContent("");
+    if (!difficulty) {
+      newErrors.difficulty = "Please select a difficulty level.";
+    }
+
+    return newErrors;
   };
 
   const handleGenerate = async (e) => {
     e.preventDefault();
 
-    if (!topic.trim() && !uploadedContent.trim()) {
-      setError("Please enter a topic or upload a document.");
+    const validationErrors = validateForm();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
       return;
     }
 
     try {
       setLoading(true);
       setError("");
+      setErrors({});
 
-      // Use uploaded content if available, otherwise use topic
-      const inputData = uploadedContent.trim() ? { text: uploadedContent } : { topic };
-
-      // Call backend API to generate quiz
-      const response = await fetch("http://localhost:5000/api/quiz/generate", {
+      const response = await fetch(API_URL, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(inputData),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          topic: topic.trim(),
+        }),
       });
 
+      const data = await response.json();
+
       if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.details || "Failed to generate quiz");
+        throw new Error(data.error || "Failed to generate quiz.");
       }
 
-      const data = await response.json();
-      const questions = data.questions;
-
-      // Format questions for the quiz page (convert options array to object with A, B, C, D)
-      const formattedQuestions = questions.map((q) => ({
-        question: q.question,
-        options: [q.options.A, q.options.B, q.options.C, q.options.D],
-        correctAnswer: q.answer,
-      }));
-
-      setTimeout(() => {
-        navigate("/quiz", {
-          state: {
-            topic: uploadedFile ? uploadedFile.name : topic,
-            questions: formattedQuestions,
-          },
-        });
-      }, 600);
+      const questions = data.questions || [];
+
+      if (!Array.isArray(questions) || questions.length === 0) {
+        throw new Error("No quiz questions were returned from the server.");
+      }
+
+      navigate("/quiz", {
+        state: {
+          topic,
+          quizId: data.quizId,
+          questions,
+          numQuestions,
+          difficulty,
+        },
+      });
     } catch (err) {
-      setError(err.message || "Failed to generate quiz. Please try again.");
+      setError(err.message || "Failed to generate quiz.");
     } finally {
       setLoading(false);
     }
@@ -131,48 +132,34 @@ function GenerateQuizPage() {
               type="text"
               placeholder="e.g., Data Structures"
               value={topic}
-              onChange={(e) => setTopic(e.target.value)}
+              onChange={(e) => {
+                setTopic(e.target.value);
+                setErrors((prev) => ({ ...prev, topic: "" }));
+              }}
             />
+            {errors.topic && <p className="field-error">{errors.topic}</p>}
 
             <label>Upload your documents</label>
-            <div className="upload-box">
-              <input
-                type="file"
-                id="file-upload"
-                onChange={handleFileUpload}
-                accept="*/*"
-                style={{ display: "none" }}
-              />
-              <label htmlFor="file-upload" className="upload-label">
-                {uploadedFile ? (
-                  <span>✓ {uploadedFile.name}</span>
-                ) : (
-                  <span>📎 Click to upload or drag & drop</span>
-                )}
-              </label>
-              {uploadedFile && (
-                <button
-                  type="button"
-                  onClick={handleRemoveFile}
-                  className="remove-file-btn"
-                  style={{ marginTop: "8px", padding: "4px 12px", fontSize: "12px" }}
-                >
-                  Remove
-                </button>
-              )}
-            </div>
+            <div className="upload-box">Upload</div>
 
             <div className="inline-row">
               <div className="field-group">
                 <label>Difficulty Level</label>
                 <select
                   value={difficulty}
-                  onChange={(e) => setDifficulty(e.target.value)}
+                  onChange={(e) => {
+                    setDifficulty(e.target.value);
+                    setErrors((prev) => ({ ...prev, difficulty: "" }));
+                  }}
                 >
+                  <option value="">Select difficulty</option>
                   <option value="easy">Easy</option>
                   <option value="medium">Medium</option>
                   <option value="hard">Hard</option>
                 </select>
+                {errors.difficulty && (
+                  <p className="field-error">{errors.difficulty}</p>
+                )}
               </div>
 
               <div className="field-group">
@@ -182,19 +169,31 @@ function GenerateQuizPage() {
                     <button
                       key={num}
                       type="button"
-                      className={numQuestions === num ? "picker active-picker" : "picker"}
-                      onClick={() => setNumQuestions(num)}
+                      className={
+                        numQuestions === num ? "picker active-picker" : "picker"
+                      }
+                      onClick={() => {
+                        setNumQuestions(num);
+                        setErrors((prev) => ({ ...prev, numQuestions: "" }));
+                      }}
                     >
                       {num}
                     </button>
                   ))}
                 </div>
+                {errors.numQuestions && (
+                  <p className="field-error">{errors.numQuestions}</p>
+                )}
               </div>
             </div>
 
             {error && <p className="error">{error}</p>}
 
-            <button type="submit" className="primary-btn full-width" disabled={loading}>
+            <button
+              type="submit"
+              className="primary-btn full-width"
+              disabled={loading}
+            >
               {loading ? "Generating Quiz..." : "Generate Quiz"}
             </button>
 
@@ -218,15 +217,24 @@ function GenerateQuizPage() {
         <div className="learning-grid">
           <div className="learning-card">
             <h3>Instant Synthesis</h3>
-            <p>Our AI engine transforms complex raw material into teachable concepts.</p>
+            <p>
+              Our AI engine transforms complex raw material into teachable
+              concepts.
+            </p>
           </div>
           <div className="learning-card">
             <h3>Adaptive Feedback</h3>
-            <p>Receive custom explanations for every answer to strengthen learning.</p>
+            <p>
+              Receive custom explanations for every answer to strengthen
+              learning.
+            </p>
           </div>
           <div className="learning-card">
             <h3>Smart Repository</h3>
-            <p>Every quiz is archived and categorized for future review and analysis.</p>
+            <p>
+              Every quiz is archived and categorized for future review and
+              analysis.
+            </p>
           </div>
         </div>
       </section>
@@ -247,186 +255,4 @@ function GenerateQuizPage() {
   );
 }
 
-export default GenerateQuizPage;
-
-// REAL VERSION AFTER AI GENERATION IS IMPLEMENTED
-// import { useState } from "react";
-// import { useNavigate } from "react-router-dom";
-// import { generateQuiz } from "../services/api";
-
-// function GenerateQuizPage() {
-//   const navigate = useNavigate();
-//   const [topic, setTopic] = useState("");
-//   const [numQuestions, setNumQuestions] = useState(10);
-//   const [difficulty, setDifficulty] = useState("medium");
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState("");
-
-//   const handleGenerate = async (e) => {
-//     e.preventDefault();
-
-//     if (!topic.trim()) {
-//       setError("Please enter a topic or paste study material.");
-//       return;
-//     }
-
-//     try {
-//       setLoading(true);
-//       setError("");
-
-//       const data = await generateQuiz({
-//         topic,
-//         numQuestions,
-//         difficulty,
-//       });
-
-//       navigate("/quiz", {
-//         state: {
-//           topic,
-//           questions: data.questions || [],
-//         },
-//       });
-//     } catch (err) {
-//       setError(err.message || "Failed to generate quiz.");
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   return (
-//     <div className="app-shell">
-//       <header className="topbar">
-//         <div className="logo">Quizey</div>
-
-//         <nav className="top-nav">
-//           <span onClick={() => navigate("/landing")}>Home</span>
-//           <span className="active-link">Generate Quiz</span>
-//           <span onClick={() => navigate("/dashboard")}>My Quizzes</span>
-//           <span>AI Chatbot</span>
-//         </nav>
-
-//         <div className="profile-chip">Profile</div>
-//       </header>
-
-//       <section className="generate-layout">
-//         <div className="generate-left">
-//           <div className="tag-pill">AI Powered Learning</div>
-//           <h1>
-//             Craft your
-//             <br />
-//             <span>intellectual</span>
-//             <br />
-//             path.
-//           </h1>
-//           <p>
-//             Input any topic and let AI architect a customized assessment designed
-//             for deep comprehension and long-term retention.
-//           </p>
-
-//           <div className="avatar-row">
-//             <div className="mini-avatar"></div>
-//             <div className="mini-avatar"></div>
-//             <div className="mini-avatar"></div>
-//             <span>2.8m+ quizzes generated today</span>
-//           </div>
-//         </div>
-
-//         <div className="generate-panel">
-//           <form onSubmit={handleGenerate} className="generate-form">
-//             <label>What do you want to master?</label>
-//             <input
-//               type="text"
-//               placeholder="e.g., Data Structures"
-//               value={topic}
-//               onChange={(e) => setTopic(e.target.value)}
-//             />
-
-//             <label>Upload your documents</label>
-//             <div className="upload-box">Upload</div>
-
-//             <div className="inline-row">
-//               <div className="field-group">
-//                 <label>Difficulty Level</label>
-//                 <select
-//                   value={difficulty}
-//                   onChange={(e) => setDifficulty(e.target.value)}
-//                 >
-//                   <option value="easy">Easy</option>
-//                   <option value="medium">Medium</option>
-//                   <option value="hard">Hard</option>
-//                 </select>
-//               </div>
-
-//               <div className="field-group">
-//                 <label>Questions</label>
-//                 <div className="question-picker">
-//                   {[5, 10, 15, 20].map((num) => (
-//                     <button
-//                       key={num}
-//                       type="button"
-//                       className={numQuestions === num ? "picker active-picker" : "picker"}
-//                       onClick={() => setNumQuestions(num)}
-//                     >
-//                       {num}
-//                     </button>
-//                   ))}
-//                 </div>
-//               </div>
-//             </div>
-
-//             {error && <p className="error">{error}</p>}
-
-//             <button type="submit" className="primary-btn full-width" disabled={loading}>
-//               {loading ? "Generating Quiz..." : "Generate Quiz"}
-//             </button>
-
-//             <div className="preview-box">
-//               <div className="preview-header">
-//                 <span>QUESTION PREVIEW</span>
-//                 <span className="live-tag">LIVE PREVIEW</span>
-//               </div>
-//               <div className="preview-line"></div>
-//               <div className="preview-line short"></div>
-//               <div className="preview-line"></div>
-//             </div>
-//           </form>
-//         </div>
-//       </section>
-
-//       <section className="learning-section">
-//         <h2>Why learn with Quizey?</h2>
-//         <div className="section-underline"></div>
-
-//         <div className="learning-grid">
-//           <div className="learning-card">
-//             <h3>Instant Synthesis</h3>
-//             <p>Our AI engine transforms complex raw material into teachable concepts.</p>
-//           </div>
-//           <div className="learning-card">
-//             <h3>Adaptive Feedback</h3>
-//             <p>Receive custom explanations for every answer to strengthen learning.</p>
-//           </div>
-//           <div className="learning-card">
-//             <h3>Smart Repository</h3>
-//             <p>Every quiz is archived and categorized for future review and analysis.</p>
-//           </div>
-//         </div>
-//       </section>
-
-//       <footer className="footer">
-//         <div>
-//           <strong>Quizey</strong>
-//           <p>Editorial intelligence for the modern learner.</p>
-//         </div>
-//         <div className="footer-links">
-//           <span>Privacy Policy</span>
-//           <span>Terms of Service</span>
-//           <span>Help Center</span>
-//           <span>Contact</span>
-//         </div>
-//       </footer>
-//     </div>
-//   );
-// }
-
-// export default GenerateQuizPage;
\ No newline at end of file
+export default GenerateQuizPage;
\ No newline at end of file

From 512347ec3628ec532e6fd624d9b499ffa6390790 Mon Sep 17 00:00:00 2001
From: Nasser AlKawari <60303522@udst.edu.qa>
Date: Sat, 11 Apr 2026 18:56:17 +0300
Subject: [PATCH 4/4] feat: integrate frontend quiz flow with backend API and
 scoring

---
 backend/package-lock.json      |   8 +-
 backend/server.js              |  23 +++---
 src/pages/FeedbackPage.jsx     |  61 +++++++++------
 src/pages/GenerateQuizPage.jsx |   2 +-
 src/pages/QuizPage.jsx         | 133 ++++++++++++++++++++++++++-------
 5 files changed, 166 insertions(+), 61 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index e30d78f..a6b9f9f 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -56,6 +56,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1512,6 +1513,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1805,6 +1807,7 @@
       "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "bare-abort-controller": "*"
       },
@@ -2034,6 +2037,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2751,6 +2755,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3392,7 +3397,6 @@
       "integrity": "sha512-UcO3kefx6dCcZkgcTGgVOTFb7b1LlQ02hY1omMjjrrBzkajRMCFgYOjs7J71WqnuG1k2b+9ppGL7FsOfhZMQKQ==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "gaxios": "^7.0.0",
         "google-logging-utils": "^1.0.0",
@@ -3408,7 +3412,6 @@
       "integrity": "sha512-bTIgTsM2bWn3XklZISBTQX7ZSddGW+IO3bMdGaemHZ3tbqExMENHLx6kKZ/KlejgrMtj8q7wBItt51yegqalrA==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "extend": "^3.0.2",
         "https-proxy-agent": "^7.0.1",
@@ -3424,7 +3427,6 @@
       "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "data-uri-to-buffer": "^4.0.0",
         "fetch-blob": "^3.1.4",
diff --git a/backend/server.js b/backend/server.js
index a181bf2..a8844cc 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -19,17 +19,18 @@ app.use(express.json({ limit: '50mb' }));
 app.use(express.urlencoded({ limit: '50mb', extended: true }));
 app.use(express.text({ limit: '50mb' }));
 
-// Routes
+// API routes
 app.use('/api/quiz', quizRoutes);
 
-// Serve frontend static files in production
-const distPath = path.resolve(__dirname, '../dist');
-app.use(express.static(distPath));
+// Only serve frontend build in production
+if (process.env.NODE_ENV === 'production') {
+  const distPath = path.resolve(__dirname, '../dist');
+  app.use(express.static(distPath));
 
-// SPA fallback — serve index.html for any non-API route
-app.get('*', (req, res) => {
-  res.sendFile(path.join(distPath, 'index.html'));
-});
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(distPath, 'index.html'));
+  });
+}
 
 // Error handler
 app.use((err, req, res, next) => {
@@ -39,7 +40,11 @@ app.use((err, req, res, next) => {
       details: 'File size exceeds the 50MB limit. Please upload a smaller document.',
     });
   }
-  res.status(500).json({ error: 'Internal Server Error', details: err.message });
+
+  res.status(500).json({
+    error: 'Internal Server Error',
+    details: err.message,
+  });
 });
 
 app.listen(PORT, () => {
diff --git a/src/pages/FeedbackPage.jsx b/src/pages/FeedbackPage.jsx
index 2b2829f..a296376 100644
--- a/src/pages/FeedbackPage.jsx
+++ b/src/pages/FeedbackPage.jsx
@@ -9,6 +9,12 @@ function FeedbackPage() {
   const selectedAnswers = location.state?.selectedAnswers || {};
   const currentIndex = location.state?.currentIndex ?? 0;
 
+  // NEW: backend result support
+  const score = location.state?.score ?? 0;
+  const total = location.state?.total ?? questions.length;
+  const correctAnswers = location.state?.correctAnswers ?? score;
+  const wrongAnswers = location.state?.wrongAnswers ?? total - score;
+
   if (!questions.length) {
     return (
       <div className="empty-state-page">
@@ -43,28 +49,34 @@ function FeedbackPage() {
       <div className="feedback-layout">
         <aside className="progress-side-panel themed-card">
           <div className="side-title">QUIZ PROGRESS</div>
+
           <div className="step-label">
-            STEP {currentIndex + 1} OF {questions.length}
+            Score: {score} / {total}
           </div>
+
           <div className="progress-track">
             <div
               className="progress-fill"
-              style={{ width: `${((currentIndex + 1) / questions.length) * 100}%` }}
+              style={{ width: `${(score / total) * 100}%` }}
             ></div>
           </div>
 
-          <ul className="progress-list">
-            <li className="done-item">Basics of Arrays</li>
-            <li className="done-item">Linear Search</li>
-            <li className="active-item-text">Binary Search Logic</li>
-            <li>Complexity Analysis</li>
-          </ul>
+          <div className="result-breakdown">
+            <p>✅ Correct: {correctAnswers}</p>
+            <p>❌ Wrong: {wrongAnswers}</p>
+          </div>
         </aside>
 
         <main className="feedback-main">
           <section className="feedback-header">
-            <h1>Keep going, Alex!</h1>
-            <p>Mistakes are the best way to master complex logic.</p>
+            <h1>
+              {isCorrect ? "Great job!" : "Keep going!"}
+            </h1>
+            <p>
+              {isCorrect
+                ? "You're on the right track."
+                : "Mistakes are the best way to master complex logic."}
+            </p>
           </section>
 
           <section className="themed-card question-feedback-card">
@@ -76,7 +88,8 @@ function FeedbackPage() {
                 let boxClass = "feedback-option-box";
 
                 if (option === correctAnswer) boxClass += " correct-box";
-                if (userAnswer === option && option !== correctAnswer) boxClass += " wrong-box";
+                if (userAnswer === option && option !== correctAnswer)
+                  boxClass += " wrong-box";
 
                 return (
                   <div key={index} className={boxClass}>
@@ -94,20 +107,27 @@ function FeedbackPage() {
           <section className="themed-card explanation-card">
             <div className="explanation-top">
               <h3>AI Explanation</h3>
-              <div className="tag-pill small-pill">LUCID MENTOR ANALYSIS</div>
+              <div className="tag-pill small-pill">
+                LUCID MENTOR ANALYSIS
+              </div>
             </div>
 
             <p>
               {isCorrect
-                ? "Great job. Your answer matches the expected reasoning. This concept works because the underlying condition is already organized in a way that supports efficient searching."
-                : "Think of this like finding a name in a sorted phone book. Because the data is ordered, you can repeatedly eliminate half of the remaining items. That is why the more efficient approach depends on sorted input."}
+                ? "Great job. Your answer matches the expected reasoning."
+                : "Think of this like searching in a sorted structure. Efficient algorithms eliminate large portions quickly, which is why ordering matters."}
             </p>
 
             <div className="explanation-actions">
-              <button className="primary-btn" onClick={() => navigate("/dashboard")}>
-                Continue to Next Question →
+              <button
+                className="primary-btn"
+                onClick={() => navigate("/dashboard")}
+              >
+                Go to Dashboard →
+              </button>
+              <button className="secondary-btn">
+                Ask AI More
               </button>
-              <button className="secondary-btn">Ask AI More</button>
             </div>
           </section>
 
@@ -115,16 +135,15 @@ function FeedbackPage() {
             <div className="tip-card themed-card">
               <strong>Pro Tip</strong>
               <p>
-                Efficient searching often depends on structure. Ordered data creates
-                stronger algorithmic shortcuts.
+                Efficient searching depends on structure. Ordered data allows
+                faster algorithms.
               </p>
             </div>
 
             <div className="tip-card themed-card">
               <strong>Confused?</strong>
               <p>
-                Our interactive visualizer can show how the algorithm narrows the
-                search space.
+                Use visual explanations to better understand how the algorithm works.
               </p>
             </div>
           </div>
diff --git a/src/pages/GenerateQuizPage.jsx b/src/pages/GenerateQuizPage.jsx
index 0256129..d74cdbf 100644
--- a/src/pages/GenerateQuizPage.jsx
+++ b/src/pages/GenerateQuizPage.jsx
@@ -11,7 +11,7 @@ function GenerateQuizPage() {
   const [error, setError] = useState("");
   const [errors, setErrors] = useState({});
 
-  const API_URL = "http://localhost:5000/generate";
+  const API_URL = "http://localhost:5000/api/quiz/generate";
 
   const validateForm = () => {
     const newErrors = {};
diff --git a/src/pages/QuizPage.jsx b/src/pages/QuizPage.jsx
index 0d369a9..3c19346 100644
--- a/src/pages/QuizPage.jsx
+++ b/src/pages/QuizPage.jsx
@@ -7,9 +7,12 @@ function QuizPage() {
 
   const questions = location.state?.questions || [];
   const topic = location.state?.topic || "Data Structures & Algorithms";
+  const quizId = location.state?.quizId || null;
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [selectedAnswers, setSelectedAnswers] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
   if (!questions.length) {
     return (
@@ -35,20 +38,61 @@ function QuizPage() {
     }));
   };
 
-  const handleSubmit = () => {
-    const score = questions.reduce((total, question, index) => {
-      return total + (selectedAnswers[index] === question.correctAnswer ? 1 : 0);
-    }, 0);
-
-    navigate("/feedback", {
-      state: {
-        topic,
-        questions,
-        selectedAnswers,
-        score,
-        currentIndex,
-      },
-    });
+  const handleNext = () => {
+    if (currentIndex < questions.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      setError("");
+
+      const answersArray = questions.map((_, index) => selectedAnswers[index] || null);
+
+      const response = await fetch("http://localhost:5000/api/quiz/submit", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          quizId,
+          questions,
+          answers: answersArray,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to submit quiz.");
+      }
+
+      navigate("/feedback", {
+        state: {
+          topic,
+          questions,
+          selectedAnswers,
+          currentIndex,
+          score: data.score,
+          total: data.total,
+          correctAnswers: data.correctAnswers,
+          wrongAnswers: data.wrongAnswers,
+          resultId: data.resultId,
+        },
+      });
+    } catch (err) {
+      setError(err.message || "Failed to submit quiz.");
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -82,7 +126,10 @@ function QuizPage() {
           </div>
 
           <div className="progress-track">
-            <div className="progress-fill" style={{ width: `${progress}%` }}></div>
+            <div
+              className="progress-fill"
+              style={{ width: `${progress}%` }}
+            ></div>
           </div>
         </section>
 
@@ -116,19 +163,51 @@ function QuizPage() {
               </button>
             ))}
 
-            <button className="primary-btn submit-btn" onClick={handleSubmit}>
-              Submit Answer →
-            </button>
+            {error && <p className="field-error">{error}</p>}
+
+            <div className="nav-buttons">
+              <button
+                type="button"
+                className="secondary-btn"
+                onClick={handlePrevious}
+                disabled={currentIndex === 0}
+              >
+                Previous
+              </button>
+
+              {currentIndex < questions.length - 1 ? (
+                <button
+                  type="button"
+                  className="primary-btn"
+                  onClick={handleNext}
+                >
+                  Next
+                </button>
+              ) : (
+                <button
+                  className="primary-btn submit-btn"
+                  onClick={handleSubmit}
+                  disabled={loading}
+                >
+                  {loading ? "Submitting..." : "Submit Quiz →"}
+                </button>
+              )}
+            </div>
 
-            <button className="text-btn" onClick={() => navigate("/feedback", {
-              state: {
-                topic,
-                questions,
-                selectedAnswers,
-                score: 0,
-                currentIndex,
-              },
-            })}>
+            <button
+              className="text-btn"
+              onClick={() =>
+                navigate("/feedback", {
+                  state: {
+                    topic,
+                    questions,
+                    selectedAnswers,
+                    score: 0,
+                    currentIndex,
+                  },
+                })
+              }
+            >
               Skip this question
             </button>
           </div>