I want to build a CBT (Computer-Based Test) application using Laravel (backend/API) and Vue.js (frontend, Composition API + Vite). It will run on a local LAN — the server machine will have Laravel + MySQL running, and student/admin devices will connect via the server's local IP (e.g. http://192.168.1.10:8000). It must run smoothly on modest hardware (8GB RAM server) with 30–100+ concurrent students. Build it in this stack: - Backend: Laravel 11, MySQL, Laravel Sanctum for auth (token-based, not cookie-based, to avoid LAN domain/cookie issues) - Frontend: Vue 3 (Composition API), Vite, Pinia for state management, Vue Router, Axios, Tailwind CSS - Vue built as SPA and served from Laravel's public folder (single app, single port, no CORS headaches) - Queue/cache: use database driver (not Redis) to keep server dependencies minimal === USER ROLES === 1. Admin — manages everything 2. Student — takes exams === ADMIN FEATURES === - Auth: secure login for admin (seeded admin account) - Question bank management: - CRUD questions, grouped by subject/course - Support multiple-choice (4–5 options), true/false, and (optionally) short-answer types - Each question has: text, options, correct answer, marks/points, subject, difficulty (optional), optional image - Bulk import questions via Excel/CSV upload - Exam management: - Create exam: title, subject, description, list of questions (or auto-pull N random questions from a subject's question bank) - Set exam duration (start time, end time, and/or duration in minutes per student from when they start) - Toggle: "scramble/shuffle questions" per student - Toggle: "scramble/shuffle answer options" per question - Set number of questions to display, pass mark, retake policy (allow/deny retakes) - Assign exam to specific students, a class/group, or make it open to all registered students - Publish/unpublish exam - Student management: add/import students (bulk via Excel/CSV), assign to classes/groups, reset passwords - Results & statistics dashboard: - View results per exam: score, percentage, pass/fail, time taken, per-question breakdown - Aggregate stats: average score, highest/lowest, score distribution (chart), per-question difficulty analysis (% who got it right), completion rate - Publish results (toggle visibility to students) — results hidden from students until admin publishes - Export results as Excel (.xlsx) and PDF (styled report, per-student and per-exam summary) === STUDENT FEATURES === - Auth: login with credentials provided by admin - Dashboard: list of assigned/available exams with status (upcoming, active, completed, expired) and countdown to start/deadline - Exam-taking interface (this is the core UX — make it clean and modern): - Timer clearly visible (counting down), auto-submits when time expires - Main question panel: question text, options as clickable/tappable cards (not plain radio buttons — nice hover/selected states), Previous/Next navigation - Side/bottom question navigator panel: numbered buttons for every question in the exam - Unanswered = red/neutral - Answered = green - Currently viewing = highlighted/active state (e.g. blue ring) - Optional: "flagged for review" = yellow/amber state, with a "flag this question" button - Clicking any number in the navigator jumps directly to that question - Auto-save: every answer selection is saved to the backend immediately (via API call on change, debounced), NOT just on final submit — this is critical for the resume feature - Resume capability: if the student closes the tab, loses connection, or the browser/PC crashes/restarts, when they log back in during the exam window they resume exactly where they left off — same time remaining (calculated from server-recorded start time, not client clock), same answers, same flags - Submit exam: confirmation modal showing count of answered/unanswered questions before final submit - After submission: thank-you screen; show score only if admin has enabled "show results immediately," otherwise "results will be published by your instructor" - Result view (once published): score, pass/fail, correct/incorrect breakdown (if admin allows), time taken === QUESTION SCRAMBLING LOGIC === - When "scramble questions" is on: each student gets a different question order, but the order must be deterministic per student per exam attempt (seed by student_id + exam_id) so a resumed session shows the same order, not a re-shuffled one - Same deterministic-seeding logic for scrambled answer options === DATA MODEL (suggest and generate migrations for) === - users (role: admin/student) - subjects - questions (subject_id, type, text, options JSON, correct_answer, marks, image_path) - exams (title, subject_id, duration_minutes, start_at, end_at, shuffle_questions bool, shuffle_options bool, questions_count, pass_mark, show_result_immediately bool, is_published bool) - exam_questions (pivot: exam_id, question_id, order/weight if not random) - exam_attempts (student_id, exam_id, started_at, submitted_at, status: in_progress/submitted/auto_submitted, score, time_remaining_seconds snapshot logic) - attempt_answers (attempt_id, question_id, selected_answer, is_flagged, answered_at) - student_groups / exam_assignments (which students can access which exam) === NON-FUNCTIONAL REQUIREMENTS === - Fast load on LAN: minimize bundle size, lazy-load routes, paginate/lazy-load question bank in admin views, optimize images, use API resource pagination - Server-authoritative timer: never trust client-side time for exam expiry — always validate/calculate remaining time server-side on each request and on auto-submit - Handle concurrent submissions safely (avoid double-submission race conditions, use DB transactions) - Responsive UI — should work on desktop and tablet browsers on the LAN - Clean, modern, minimal aesthetic (Tailwind) — soft shadows, rounded cards, clear typography, a calm color palette that doesn't feel stressful during exams === EXCEL/PDF EXPORT === - Use maatwebsite/excel for Excel export (per-exam results sheet: student name, score, percentage, pass/fail, time taken) - Use barryvdh/laravel-dompdf (or similar) for PDF export (formatted result report, optionally per-student result slip and a summary/statistics report) === BUILD ORDER === Start by scaffolding: 1. Laravel project + Sanctum auth + migrations/models above 2. Admin question bank CRUD (API + Vue views) 3. Exam builder (API + Vue views) 4. Student exam-taking flow with autosave, resume logic, and the navigator panel (this is the most complex part — build and test this carefully) 5. Submission + scoring logic 6. Results dashboard + statistics + Excel/PDF export 7. Polish UI/UX, add LAN deployment notes (README with `php artisan serve --host=0.0.0.0` instructions, or Nginx config) Ask me clarifying questions before generating code if anything above is ambiguous, then scaffold the project structure first before writing full feature code.