storm-attached

byRynse

I have attached a small sample JSON file to establish the data schema. Build the complete application using this structure; I will load the full multi-megabyte datasets into the project repository later. Build a complete, modern USMLE Question Bank single-page web application using React and Tailwind CSS. The app must precisely replicate a dark-themed Prometric/UWorld-style interface and a comprehensive analytics dashboard. ### 1. Global UI & Theme - Color Palette: Deep Slate / Dark Navy background (#0F172A / #111827) with elevated card panels (#1F2937) and subtle border lines. - Accent Colors: Primary Blue (#2563EB) for actions, Vivid Green (#10B981) for active/correct states, Bright Red (#EF4444) for incorrect/reset actions, Warning Orange (#F59E0B) for suspended states. - Navigation Layout: A fixed, collapsible left sidebar navigation drawer with accordion sub-menus. The active menu item uses a green pill highlight container. - Sidebar Navigation Items: - Welcome - Courses (Lesson Modules) - Qbanks (Generate Quiz, Previous Tests, Search) - Self Assessments (Assessments, Assessment Report, Score Predictor, NBME Library) - Performance (Overall, Peer Ranking, AI Test Analysis, Score Calculator, Graphs) - Account (Settings, Reset) - Logout (Do NOT include Leaderboard, Notes and Study, Flashcards, AI Credits, or Subscribe/Renew). ### 2. Authentication & Data Persistence - Authentication: Simple local session authentication with a sleek dark Login screen. Clicking "Logout" in the sidebar clears the active session and returns to the Login view. - Structured Data: Expect question datasets to load from local JSON files containing keys: id, question, options, correct_msg, incorrect_msg, subject, system, topic, statistics, and UWorldID. - State Persistence: Use browser localStorage / IndexedDB to track user test attempts, completed blocks, suspended tests, and answer histories persistently across sessions. ### 3. Core Modules & Interface Specifications A. Welcome / Dashboard: - Header banner with "Welcome Back!" greeting, live date tag, and motivational quote box. - 4 Top Metric Cards: Enrolled Courses, Completed Courses, Total Correct %, QBank Used %. - Study Progress Gauge: Radial SVG meter showing completion percentage and days remaining. - QBank Performance Panel: Donut chart displaying QBank Usage (Total: 6,570, Used, Unused). Live score counters (Correct, Incorrect, Omitted), and dual radial gauges (Total Correct %, Total Used %). B. Courses: - "My Courses" view displaying a Step 1 course card. Clicking "View Course Outline" opens the 16-Lesson curriculum. - Lessons expand into specific sub-quizzes. Clicking any sub-quiz opens a "Test Mode" modal with Tutor Mode / Exam Mode radio toggles and an optional Timed switch before launching. C. Qbanks (Generate Quiz, Previous Tests, Search): - Generate Quiz: - Mode Selectors: Tutor Mode ("Learn as you go") vs Exam Mode ("Simulates real exam"), plus a Timed Mode toggle switch. - Quiz Types: Standard (Filter-based), Custom (Manual Question ID entry), and AI Prompt (Natural language generator modal with 0/500 char limit). - Filter Tabs: Courses, QBank (19 sources with individual question counts), Subjects (14 subjects), Systems (30+ systems). - Controls: Question Types checkboxes (Marked, Unused, Incorrect, Omitted, Correct, All), Difficulty selector pills (1-5), and Question Limit stepper (Max 50). - Previous Tests: A data table of all test attempts (Name, Score %, Date, Mode, Status, Subjects, Qs count). Actions: Resume, Results, and Test Analysis. Includes Edit Name, Copy ID, and Delete controls. - Search: Text/ID search input with course filter. Displays a search results table with a "Copy IDs" batch button and individual "View" actions that open questions directly in review mode. D. Active Exam Interface (Prometric Replica): - Header Bar: Question Tracker (e.g., "Item 1 of 40", "Question Id: 152219"), Flag/Mark button with orange flag icon, Previous/Next navigation controls, Lab Values, Settings, Full Screen, and End Block. (Do NOT include Calculator, Notes, or Notebook). - Question Layout: Left/center area displays rich-text clinical vignette with highlightable text. Multiple-choice options (A through H) displayed with circular radio buttons. Support right-click strikethrough on options. - Footer Bar: Countdown block timer (HH:MM:SS), platform branding, and live mode indicator. - Review & Tutor Mode State: Submitting an answer highlights the correct choice in green and incorrect choices in red with percentage statistics. Opens an explanation panel containing: "Answered Correctly/Incorrectly" banner, time taken, overall accuracy %, tabbed explanation view (correct_msg, incorrect_msg, tables, diagrams), Educational Objective summary, and metadata footer (Subject, System, Topic). - Lab Values Drawer: Slide-in right panel with search input, SI Reference Intervals toggle, 4 tabs (Blood, Serum, Cerebrospinal, Urine and BMI), and 3-column reference tables. - Settings Modal: Appearance (Font Size, Font Weight, Theme), Highlight Features (Highlight-Only, Multicolor, Yellow, Copy Text), Exam Controls (Show Timer, Stop on Blur, Split Screen Explanations, Transparent Background, AI Assistant Location), and Night Mode scheduling. E. Self Assessments & NBME Library: - Assessments Tab: Table to launch NBME forms (25-33) and UWSAs (1-3). Supports standard 4-block layouts and NBME 28's 10-block format. - Assessment Report: Bell curve percentile chart, 4-part Answer Changes matrix, Chance of Passing risk meter, and Subject/System analysis tables. - Score Predictor: Calculates predicted 3-digit score and passing probability once 3+ assessments are completed. - NBME Library: Hierarchical directory for Step 1 and Step 2 CK guides (HY Ethics, Free 120s, HY Pharma, HY Biostats, Images). Clicking any entry opens the raw HTML/Markdown reader. F. Performance Analytics: - Overall: Dashboard with metric cards (Total Tests, Completed, Suspended), QBank usage donut chart, score breakdown cards, and Answer Changes matrix. - Peer Ranking: Bar chart comparing "Your Ranking" vs "Peer Ranking" with pagination and search across Subjects (2 pages) and Systems (4 pages). - Score Calculator: Interface calculating 3-digit scores using exact linear regression models: - NBME 25: y = -1.113x + 277.04 - NBME 26: y = -1.1275x + 276.38 - NBME 27: y = -1.1211x + 276.38 - NBME 28: y = -1.1701x + 278.36 - NBME 29: y = -1.1522x + 276.92 - NBME 30 & 31: y = -1.1435x + 276.92 - UWSA 1, 2, 3: y = 1.8458x + 107.6 (x = correct %) - AI Test Analysis: Warning state ("Insufficient Data") with subject question requirements until sufficient test data is recorded. - Graphs: Sequential line chart for "Performance by Test" and chronological trendline chart for "Performance by Date". G. Account Module: - Account Settings View: Displays user preference panels for General (Dark mode, auto-zoom), Quiz Defaults (Split screen explanations, transparent background, timer options), Reading defaults (Font size 16px, Font weight), Highlight color palette (Yellow, Green, Cyan, Pink, Orange, Purple), and Toolbar action icons. - Reset Data View: Provides a dedicated "Test Data" reset panel with UNLIMITED resets allowed. Features a "Reset Step 1" button that triggers a confirmation modal to wipe all local test history, reset all questions to Unused status, and clear performance charts. Includes a persistent Reset History log table tracking timestamps and actions.