Welcome to StudyRoom 🎓

Collaborate with classmates, upload questions, and get AI-powered feedback and scoring tailored to your curriculum level — 11+, GCSE, A-Level, IB and more.

\n \n \n

📤

Upload Questions

Upload images (JPG/PNG) or PDFs of your exam questions. Our AI reads and analyses them instantly.

🤝

Collaborate Live

Work together in real-time on a shared answer box with your study group.

🤖

AI Feedback

Get instant AI verification of your answers with detailed explanations and solutions.

🏆

Smart Scoring

Scores weighted by curriculum level — 11+, GCSE, A-Level, Further Maths, IB, US Diploma.

\n );\n}\n\n// ─── CREATE ROOM MODAL ────────────────────────────────────────────────────────\nfunction CreateRoomModal({ onClose, onCreated }: {\n onClose: () => void;\n onCreated: (roomId: string, code: string, userId: string, name: string, role: \"host\") => void;\n}) {\n const [name, setName] = useState(\"\");\n const [age, setAge] = useState(\"\");\n const [curriculum, setCurriculum] = useState(\"gcse\");\n const [subject, setSubject] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleCreate() {\n if (!name.trim() || !age || !subject.trim()) { setError(\"Please fill in all fields.\"); return; }\n setLoading(true); setError(\"\");\n try {\n const res = await fetch(\"/api/rooms/create\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: name.trim(), age: parseInt(age), curriculumLevel: curriculum, subject: subject.trim() }),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Failed to create room\");\n onCreated(data.roomId, data.code, data.userId, name.trim(), \"host\");\n } catch (e: any) { setError(e.message); }\n setLoading(false);\n }\n\n return (\n

✏️ Create a Study Room

\n \n

\n {error &&

⚠️ {error}

}\n

\n Your Name\n setName(e.target.value)} />\n

\n Your Age\n setAge(e.target.value)} />\n

\n Curriculum Level\n \n

\n Subject\n setSubject(e.target.value)} />\n

\n \n \n

\n );\n}\n\n// ─── JOIN ROOM MODAL ──────────────────────────────────────────────────────────\nfunction JoinRoomModal({ onClose, onJoined }: {\n onClose: () => void;\n onJoined: (roomId: string, code: string, userId: string, name: string, role: \"participant\") => void;\n}) {\n const [code, setCode] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [age, setAge] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleJoin() {\n if (!code.trim() || !name.trim() || !age) { setError(\"Please fill in all fields.\"); return; }\n setLoading(true); setError(\"\");\n try {\n const res = await fetch(\"/api/rooms/join\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ code: code.trim().toUpperCase(), name: name.trim(), age: parseInt(age) }),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Failed to join room\");\n onJoined(data.roomId, code.trim().toUpperCase(), data.userId, name.trim(), \"participant\");\n } catch (e: any) { setError(e.message); }\n setLoading(false);\n }\n\n return (\n

🔗 Join a Study Room

\n \n

\n {error &&

⚠️ {error}

}\n

\n Room Code\n setCode(e.target.value.toUpperCase())}\n style={{ textTransform: \"uppercase\", letterSpacing: \"0.15em\", fontWeight: 700 }} />\n

\n Your Name\n setName(e.target.value)} />\n

\n Your Age\n setAge(e.target.value)} />\n

\n \n \n

\n );\n}\n\n// ─── ROOM PAGE ────────────────────────────────────────────────────────────────\nfunction RoomPage({ roomId, roomCode, userId, userName, role }: {\n roomId: string; roomCode: string; userId: string; userName: string; role: \"host\" | \"participant\";\n}) {\n const [room, setRoom] = useState(null);\n const [stateData, setStateData] = useState(null);\n const [participants, setParticipants] = useState([]);\n const [questionImg, setQuestionImg] = useState<{ data: string; type: string; name: string } | null>(null);\n const [localAnswer, setLocalAnswer] = useState(\"\");\n const [uploading, setUploading] = useState(false);\n const [submitting, setSubmitting] = useState(false);\n const [loadingSolution, setLoadingSolution] = useState(false);\n const [inviteEmail, setInviteEmail] = useState(\"\");\n const [invitedEmails, setInvitedEmails] = useState([]);\n const [sendingInvite, setSendingInvite] = useState(false);\n const [inviteMsg, setInviteMsg] = useState(\"\");\n const [tab, setTab] = useState<\"question\" | \"answer\" | \"result\">(\"question\");\n const [copied, setCopied] = useState(false);\n const fileInputRef = useRef(null);\n const replaceFileRef = useRef(null);\n const answerSaveRef = useRef(null);\n const isTyping = useRef(false);\n const lastSavedAnswer = useRef(\"\");\n const prevHasQuestion = useRef(false);\n\n // Fetch question image separately (too large for poll)\n async function fetchQuestion() {\n try {\n const res = await fetch(`/api/rooms/${roomId}/question`);\n if (!res.ok) return;\n const data = await res.json();\n setQuestionImg({ data: data.questionData, type: data.questionFileType, name: data.questionFileName });\n } catch {}\n }\n\n // Poll room state every 2s\n const poll = useCallback(async () => {\n try {\n const res = await fetch(`/api/rooms/${roomId}/state`);\n if (!res.ok) return;\n const data = await res.json();\n setRoom(data.room);\n setParticipants(data.participants || []);\n setStateData(data.state);\n\n // Update answer from server only if user isn't currently typing\n if (!isTyping.current) {\n const serverAnswer = data.state?.answer || \"\";\n if (serverAnswer !== lastSavedAnswer.current) {\n lastSavedAnswer.current = serverAnswer;\n setLocalAnswer(serverAnswer);\n }\n }\n\n // Auto-switch to result tab when answer is submitted\n if (data.state?.submission_result) {\n setTab(t => t === \"answer\" ? \"result\" : t);\n }\n\n // Fetch question image when question first appears\n const hasQ = !!data.room?.question_file_name;\n if (hasQ && !prevHasQuestion.current) {\n fetchQuestion();\n }\n prevHasQuestion.current = hasQ;\n } catch {}\n }, [roomId]);\n\n useEffect(() => {\n poll();\n const interval = setInterval(poll, 2000);\n return () => clearInterval(interval);\n }, [poll]);\n\n // Debounced answer save — push local changes to server\n useEffect(() => {\n if (localAnswer === lastSavedAnswer.current) return;\n isTyping.current = true;\n if (answerSaveRef.current) clearTimeout(answerSaveRef.current);\n answerSaveRef.current = setTimeout(async () => {\n await fetch(`/api/rooms/${roomId}/answer`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ answer: localAnswer }),\n });\n lastSavedAnswer.current = localAnswer;\n isTyping.current = false;\n }, 800);\n }, [localAnswer, roomId]);\n\n async function handleUpload(e: React.ChangeEvent) {\n const file = e.target.files?.[0];\n if (!file) return;\n setUploading(true);\n const reader = new FileReader();\n reader.onload = async () => {\n const base64 = (reader.result as string).split(\",\")[1];\n await fetch(`/api/rooms/${roomId}/upload`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ fileName: file.name, fileType: file.type, fileData: base64 }),\n });\n setUploading(false);\n prevHasQuestion.current = false; // force re-fetch\n poll();\n fetchQuestion();\n };\n reader.readAsDataURL(file);\n }\n\n async function handleSubmit() {\n setSubmitting(true);\n const res = await fetch(`/api/rooms/${roomId}/submit`, { method: \"POST\" });\n setSubmitting(false);\n if (res.ok) { setTab(\"result\"); poll(); }\n }\n\n async function handleShowSolution() {\n setLoadingSolution(true);\n await fetch(`/api/rooms/${roomId}/solution`, { method: \"POST\" });\n setLoadingSolution(false);\n poll();\n }\n\n async function handleInvite() {\n if (!inviteEmail.trim()) return;\n setSendingInvite(true); setInviteMsg(\"\");\n try {\n const res = await fetch(`/api/rooms/${roomId}/invite`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email: inviteEmail.trim(), roomCode }),\n });\n const data = await res.json();\n if (res.ok) {\n setInvitedEmails(prev => [...prev, inviteEmail.trim()]);\n setInviteEmail(\"\");\n setInviteMsg(\"✅ Invitation sent!\");\n } else { setInviteMsg(\"❌ \" + (data.error || \"Failed to send\")); }\n } catch { setInviteMsg(\"❌ Failed to send invite\"); }\n setSendingInvite(false);\n }\n\n function copyCode() {\n navigator.clipboard.writeText(roomCode).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n });\n }\n\n const submissionResult = stateData?.submission_result ? JSON.parse(stateData.submission_result) : null;\n const solution = stateData?.solution;\n const hasQuestion = !!room?.question_file_name;\n const isPDF = room?.question_file_type === \"application/pdf\";\n const isImage = room?.question_file_type?.startsWith(\"image/\");\n\n if (!room) return

Loading room…

;\n\n return (\n

\n {/* STATUS BAR */}\n

\n \n 🔑 {roomCode} {copied ? \"✅ Copied!\" : \"📋\"}\n \n \n \n {participants.length} participant{participants.length !== 1 ? \"s\" : \"\"} online\n \n \n 📚 {CURRICULUM_LABELS[room.curriculum_level as CurriculumLevel]} • {room.subject}\n \n {role === \"host\" && 👑 Host}\n

\n\n

\n {/* ── SIDEBAR ── */}\n

\n {/* Participants */}\n

👥 Participants

\n
{p.name.charAt(0).toUpperCase()}
\n
\n
\n {p.name}\n {p.id === userId && (you)}\n
\n
Age {p.age}
\n
\n \n {p.role === \"host\" ? \"Host\" : \"Student\"}\n \n

\n\n {/* Invite (host only) */}\n {role === \"host\" && (\n

✉️ Invite Students

\n Share code {roomCode} or send email invites below.\n

\n setInviteEmail(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && handleInvite()}\n style={{ fontSize: \"0.85rem\", padding: \"8px 10px\" }}\n />\n \n

\n {inviteMsg && (\n

\n {inviteMsg}\n

\n )}\n {invitedEmails.length > 0 && (\n

📧 {e}

\n )}\n

\n\n {/* ── MAIN CONTENT ── */}\n

\n \n \n {submissionResult && (\n \n )}\n

\n\n {/* ── QUESTION TAB ── */}\n {tab === \"question\" && (\n

📄 Question

\n {/* Host upload area */}\n {role === \"host\" && !hasQuestion && (\n <>\n

fileInputRef.current?.click()}>\n

📁

Click to upload your question

Supports JPEG, PNG, PDF

\n \n {uploading && (\n

\n Uploading…\n

\n )}\n \n )}\n\n {/* Question loaded */}\n {hasQuestion && (\n

\n ✅ {room.question_file_name} uploaded\n

\n\n {isImage && questionImg && (\n

\n \n

\n )}\n\n {isPDF && (\n

\n 📄 PDF uploaded — the AI will read and analyse it when you submit.\n

\n )}\n\n {isImage && !questionImg && (\n

\n Loading image…\n

\n )}\n\n {role === \"host\" && (\n

\n \n \n

\n )}\n

\n )}\n\n {!hasQuestion && role === \"participant\" && (\n

⏳ Waiting for the host to upload a question…

\n )}\n\n

\n \n

\n )}\n\n {/* ── ANSWER TAB ── */}\n {tab === \"answer\" && (\n

✏️ Collaborative Answer Box

\n {!submissionResult && (\n

\n 💡 Everyone in the room can type here. Changes sync automatically.\n

\n )}\n

\n Team Answer\n setLocalAnswer(e.target.value)}\n disabled={!!submissionResult}\n style={{ minHeight: \"200px\" }}\n />\n

\n\n {role === \"host\" && !submissionResult && (\n

\n \n {submitting\n ? <> Checking with AI…\n : \"🤖 Submit for AI Review\"}\n \n {!hasQuestion && (\n \n ⬅ Upload a question first\n \n )}\n

\n )}\n\n {role === \"participant\" && !submissionResult && (\n

\n ⏳ The host will submit your answer for AI review when the team is ready.\n

\n )}\n\n {submissionResult && (\n

\n ✅ Answer submitted! \n \n

\n )}\n

\n )}\n\n {/* ── RESULT TAB ── */}\n {tab === \"result\" && submissionResult && (\n

\n {submissionResult.isCorrect ? \"✅\" : \"❌\"}\n \n {submissionResult.isCorrect ? \"Correct Answer! Well done!\" : \"Not Quite Right — Keep Going!\"}\n \n

{submissionResult.score}

\n out of {submissionResult.maxScore} points\n

Weighted for your curriculum level

\n {submissionResult.feedback}\n

\n 📚 {submissionResult.curriculumMatch}\n 🎯 Difficulty: {submissionResult.difficulty}\n

\n\n {/* Show Solution — host only */}\n {role === \"host\" && !solution && (\n

\n \n

\n )}\n\n {role === \"participant\" && !solution && (\n

\n ⏳ Waiting for the host to reveal the solution…\n

\n )}\n\n {solution && (\n

\n 💡 Step-by-Step Solution\n

{solution}

\n )}\n

\n );\n}\n\n// ─── APP ROOT ─────────────────────────────────────────────────────────────────\nfunction App() {\n const [page, setPage] = useState<\"home\" | \"room\">(\"home\");\n const [modal, setModal] = useState<\"create\" | \"join\" | null>(null);\n const [roomData, setRoomData] = useState<{\n roomId: string; roomCode: string; userId: string; userName: string; role: \"host\" | \"participant\";\n } | null>(null);\n\n function handleCreated(roomId: string, code: string, userId: string, name: string, role: \"host\") {\n setRoomData({ roomId, roomCode: code, userId, userName: name, role });\n setModal(null); setPage(\"room\");\n }\n function handleJoined(roomId: string, code: string, userId: string, name: string, role: \"participant\") {\n setRoomData({ roomId, roomCode: code, userId, userName: name, role });\n setModal(null); setPage(\"room\");\n }\n\n return (\n

\n { e.preventDefault(); setPage(\"home\"); }}>\n 🎓 StudyRoom\n \n

\n {page === \"room\" && roomData && (\n 👤 {roomData.userName}\n )}\n {page === \"room\" && (\n \n )}\n {page === \"home\" && (\n <>\n \n \n \n )}\n

\n\n {page === \"home\" && setModal(\"create\")} onJoinRoom={() => setModal(\"join\")} />}\n {page === \"room\" && roomData && }\n\n {modal === \"create\" && setModal(null)} onCreated={handleCreated} />}\n {modal === \"join\" && setModal(null)} onJoined={handleJoined} />}\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n","deleted","label",[180,162],"frontend","permalink","https://www.val.town/x/MRPRRSIDENT/study-room/code/frontend/index.tsx","extension","tsx","actionData","errors"]