new

frontend/app/coding/join/page.tsx

@@ -6,51 +6,50 @@ export default function JoinExam() {
   const [examCode, setExamCode] = useState('')
   const [studentName, setStudentName] = useState('')
   const [loading, setLoading] = useState(false)
-  const [result, setResult] = useState('')
+  const [error, setError] = useState('')
   const router = useRouter()
 
-  const join = async () => {
+  const handleSubmit = async (e: React.FormEvent) => {
-    if (!examCode || !studentName) {
+    e.preventDefault() // ✅ Prevent form from reloading page
-      setResult('❌ Please fill both fields')
+    
+    setError('')
+    
+    if (!examCode.trim()) {
+      setError('Please enter the exam code')
+      return
+    }
+    
+    if (!studentName.trim()) {
+      setError('Please enter your name')
       return
     }
 
     setLoading(true)
-    setResult('⏳ Joining exam...')
 
     try {
+      // ✅ CORRECT FIELD NAMES - Must match backend expectations
       const payload = {
-        exam_code: examCode.trim().toUpperCase(),
+        exam_code: examCode.trim().toUpperCase(),    // Backend expects exam_code
-        student_name: studentName.trim()
+        student_name: studentName.trim()             // Backend expects student_name
       }
       
-      console.log('🚀 Sending:', payload)
+      console.log('🚀 Sending payload:', payload)
 
       const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
-        body: JSON.stringify(payload)
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify(payload) // ✅ MUST stringify the payload
       })
 
+      console.log('📡 Response status:', response.status)
+      
       const data = await response.json()
-      console.log('📦 Response:', data)
+      console.log('📦 Response data:', data)
       
       if (data.success) {
-        // ✅ ENHANCED SUCCESS DISPLAY
-        const successMessage = `✅ Successfully joined: ${data.exam_info.title}
-
-📋 Exam Details:
-• Status: ${data.exam_info.status}
-• Duration: ${data.exam_info.duration_minutes} minutes
-• Participants: ${data.exam_info.participants_count}/${data.exam_info.max_participants}
-• Languages: ${data.exam_info.languages.join(', ')}
-• Problem: ${data.exam_info.problem_title}
-
-🎯 You're now registered for the exam!
-⏳ Wait for the host to start the exam.`
-
-        setResult(successMessage)
-        
         // Store session data
         localStorage.setItem('exam_session', JSON.stringify({
           exam_code: examCode.toUpperCase(),
@@ -59,124 +58,96 @@ export default function JoinExam() {
           joined_at: new Date().toISOString()
         }))
 
-        // Show success alert
+        alert(`✅ Successfully joined: ${data.exam_info.title}
-        alert(`🎉 Welcome to the exam!
 
-📝 Exam: ${data.exam_info.title}
 👤 Joined as: ${studentName}
 📊 You are participant #${data.exam_info.participants_count}
 
-✅ Successfully registered!`)
+Wait for the host to start the exam!`)
 
-        // Redirect to exam waiting page after 2 seconds
+        // Redirect to exam interface
-        setTimeout(() => {
         router.push('/coding/exam')
-        }, 2000)
         
       } else {
-        setResult(`❌ Error: ${data.error}`)
+        setError(data.error || 'Failed to join exam')
       }
     } catch (error) {
       console.error('❌ Error:', error)
-      setResult('❌ Network error: Could not connect to server')
+      setError('Network error: Could not connect to backend server')
     } finally {
       setLoading(false)
     }
   }
 
   return (
-    <div style={{ padding: '50px', background: '#1a1a1a', color: 'white', minHeight: '100vh', fontFamily: 'monospace' }}>
+    <div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900 flex items-center justify-center p-4">
-      <h1>🚀 Join Coding Exam</h1>
+      <div className="bg-white rounded-xl shadow-2xl p-8 w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Join Coding Exam</h1>
+          <p className="text-gray-600">Enter the exam code provided by your instructor</p>
+        </div>
 
-      <div style={{ maxWidth: '500px', marginTop: '30px' }}>
+        {/* Form with proper onSubmit handler */}
-        <div style={{ marginBottom: '20px' }}>
+        <form onSubmit={handleSubmit} className="space-y-6">
-          <label style={{ display: 'block', marginBottom: '5px', color: '#4CAF50' }}>
+          <div>
-            Exam Code:
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Exam Code
             </label>
             <input
+              type="text"
               value={examCode}
-            onChange={e => setExamCode(e.target.value)}
+              onChange={(e) => setExamCode(e.target.value.toUpperCase())}
-            placeholder="0C3LQ8"
+              placeholder="Enter 6-character code"
-            style={{ 
+              maxLength={6}
-              width: '100%', 
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg font-mono tracking-widest uppercase"
-              padding: '12px', 
+              required
-              background: '#333', 
-              color: 'white', 
-              border: '2px solid #4CAF50',
-              borderRadius: '4px',
-              fontFamily: 'monospace',
-              fontSize: '16px',
-              textTransform: 'uppercase'
-            }}
             />
           </div>
 
-        <div style={{ marginBottom: '20px' }}>
+          <div>
-          <label style={{ display: 'block', marginBottom: '5px', color: '#4CAF50' }}>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
-            Your Name:
+              Your Name
             </label>
             <input
+              type="text"
               value={studentName}
-            onChange={e => setStudentName(e.target.value)}
+              onChange={(e) => setStudentName(e.target.value)}
-            placeholder="Your name"
+              placeholder="Enter your full name"
-            style={{ 
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              width: '100%', 
+              required
-              padding: '12px', 
-              background: '#333', 
-              color: 'white', 
-              border: '2px solid #4CAF50',
-              borderRadius: '4px',
-              fontSize: '16px'
-            }}
             />
           </div>
 
           <button
-          onClick={join}
+            type="submit"
-          disabled={loading}
+            disabled={loading || !examCode.trim() || !studentName.trim()}
-          style={{ 
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-            width: '100%',
-            padding: '15px', 
-            background: loading ? '#666' : '#4CAF50', 
-            color: 'white', 
-            border: 'none',
-            borderRadius: '4px',
-            fontSize: '18px',
-            cursor: loading ? 'not-allowed' : 'pointer',
-            fontWeight: 'bold'
-          }}
           >
-          {loading ? '⏳ Joining Exam...' : '🚀 Join Exam'}
+            {loading ? (
-        </button>
+              <div className="flex items-center justify-center">
+                <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></div>
+                Joining Exam...
               </div>
+            ) : (
+              'Join Exam'
+            )}
+          </button>
+        </form>
 
-      {/* ENHANCED RESULT DISPLAY */}
+        {/* Error Display */}
-      {result && (
+        {error && (
-        <div style={{ 
+          <div className="mt-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
-          marginTop: '30px', 
+            ❌ {error}
-          padding: '20px', 
-          background: result.includes('✅') ? '#1a4a1a' : '#4a1a1a',
-          border: result.includes('✅') ? '2px solid #4CAF50' : '2px solid #f44336',
-          borderRadius: '8px',
-          whiteSpace: 'pre-line',
-          fontSize: '14px',
-          lineHeight: '1.6'
-        }}>
-          {result}
           </div>
         )}
 
-      <div style={{ 
+        {/* Debug Info */}
-        marginTop: '30px', 
+        <div className="mt-6 p-4 bg-gray-50 rounded-lg text-xs">
-        padding: '15px', 
+          <p className="text-gray-500 mb-1">Debug Info:</p>
-        background: '#333', 
+          <p className="text-gray-400">Code: "{examCode}"</p>
-        borderRadius: '4px',
+          <p className="text-gray-400">Name: "{studentName}"</p>
-        border: '2px solid #4CAF50'
+          <p className="text-green-600 font-medium">✅ Sends: exam_code + student_name</p>
-      }}>
+        </div>
-        <h3 style={{ color: '#4CAF50' }}>🔧 Debug Info:</h3>
-        <p>Exam Code: "{examCode}"</p>
-        <p>Student Name: "{studentName}"</p>
-        <p style={{ color: '#4CAF50' }}>✅ Backend working correctly</p>
       </div>
     </div>
   )

frontend/app/coding/page.tsx

@@ -118,36 +118,74 @@ export default function CodingExamPlatform() {
       })
       
       const data = await response.json()
+      console.log('📦 Create exam response:', data)
+      
       if (data.success) {
-        setExamId(data.exam_code)
+        // ✅ CORRECTED: Use exam_code, NOT exam_id
+        const participantCode = data.exam_code  // This is the 6-character code
+        const databaseId = data.exam_id         // This is the MongoDB ObjectId
+        
+        setExamId(participantCode)
         setExamInfo({ title: 'String Capitalizer Challenge', status: 'waiting' })
-        alert(`Exam created! Share this code with participants: ${data.exam_code}`)
+        
+        // ✅ FIXED: Show exam_code instead of exam_id
+        alert(`Exam created! Share this code with participants: ${participantCode}`)
+      } else {
+        alert(`Failed to create exam: ${data.error}`)
       }
     } catch (error) {
-      alert('Failed to create exam')
+      console.error('Create exam error:', error)
+      alert('Failed to create exam - network error')
     }
   }
 
+  // ✅ CORRECTED JOIN FUNCTION WITH PROPER REDIRECT
   const joinExam = async () => {
     try {
+      console.log('🚀 Joining with:', { exam_code: examId, student_name: participantName })
+      
       const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          exam_id: examId,
+          exam_code: examId,           // ✅ Correct field name
-          name: participantName
+          student_name: participantName // ✅ Changed from 'name' to 'student_name'
         })
       })
       
       const data = await response.json()
+      console.log('📦 Join response:', data)
+      
       if (data.success) {
         setExamInfo(data.exam_info)
-        alert('Successfully joined the exam!')
+        
+        // Store exam session data for the exam interface
+        localStorage.setItem('exam_session', JSON.stringify({
+          exam_code: examId,
+          student_name: participantName,
+          exam_info: data.exam_info,
+          joined_at: new Date().toISOString()
+        }))
+        
+        alert(`✅ Successfully joined: ${data.exam_info.title}!
+
+👤 Joined as: ${participantName}
+📊 Participants: ${data.exam_info.participants_count}/${data.exam_info.max_participants}
+⏱️ Duration: ${data.exam_info.duration_minutes} minutes
+
+Redirecting to exam interface...`)
+
+        // ✅ REDIRECT TO EXAM INTERFACE
+        setTimeout(() => {
+          router.push('/coding/exam')
+        }, 1500)
+        
       } else {
-        alert(data.error)
+        alert(`❌ Error: ${data.error}`)
       }
     } catch (error) {
-      alert('Failed to join exam')
+      console.error('Join error:', error)
+      alert('❌ Failed to join exam - network error')
     }
   }
 
@@ -156,7 +194,7 @@ export default function CodingExamPlatform() {
       const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ exam_id: examId })
+        body: JSON.stringify({ exam_code: examId })
       })
       
       const data = await response.json()
@@ -273,6 +311,12 @@ export default function CodingExamPlatform() {
               Create Exam
             </button>
           </div>
+          
+          {/* Debug Info */}
+          <div className="mt-4 p-3 bg-gray-50 rounded text-xs text-gray-600">
+            <p>Will create with host_name: "{participantName}"</p>
+            <p>✅ Will display exam_code (6 chars), not exam_id</p>
+          </div>
         </div>
       </div>
     )
@@ -288,10 +332,11 @@ export default function CodingExamPlatform() {
           <div className="space-y-4">
             <input
               type="text"
-              placeholder="Enter exam code"
+              placeholder="Enter exam code (e.g., 3BPIBZ)"
               value={examId}
               onChange={(e) => setExamId(e.target.value.toUpperCase())}
-              className="w-full p-3 border border-gray-300 rounded-lg"
+              className="w-full p-3 border border-gray-300 rounded-lg text-center font-mono text-lg tracking-widest uppercase"
+              maxLength={6}
             />
             
             <input
@@ -309,6 +354,12 @@ export default function CodingExamPlatform() {
             >
               Join Exam
             </button>
+            
+            {/* Debug Info */}
+            <div className="text-xs text-gray-500 p-3 bg-gray-50 rounded">
+              <p>Will send: exam_code="{examId}" student_name="{participantName}"</p>
+              <p>✅ After join → redirect to /coding/exam</p>
+            </div>
           </div>
         </div>
       </div>