looks very basic, allpages too large boxes of domain name, too heavy all graphs. Home have very normal content boxes but filling entire screen. Make it more classy . Domain choosing still confusing a lot like ex category, techstack for each domain missing. and alos looks simple very simple should be more smooth but animated it shouldbe. dahsboard is also simple. foxus on implement little animation 3ds wherever required also add some exampel in mac style codes onhome. create one content page as well where nterview for each stacks 🏠 HOME / LANDING PAGE — ABSOLUTE FINAL SPEC Route: / Scroll Direction: Top → Bottom Audience: First-time users + returning users Design Intent: Premium, calm, trustworthy, structured 🔝 0. BROWSER & PAGE BOOTSTRAP (BEFORE UI) 0.1 Page Metadata (MANDATORY) <title> InterviewExplainer – Structured Interview Preparation <meta description> Prepare for interviews with real questions, guided paths, and mastery tracking. Canonical URL: / OG tags (same text) 0.2 Initial Load Behavior White / neutral background No blocking spinner Header renders immediately Content progressively loads Skeletons used where data exists 🧭 1. STICKY HEADER (PERSISTENT) Visible at all times, never scrolls away. 1.1 Header Height & Position Height: 64px Position: sticky Z-index: above all content Background: solid (no transparency) Bottom border: subtle neutral line 1.2 Header Layout Grid | Logo |      Search (flex-grow)      | Theme | Account | 1.3 Logo Block (Left) Content Text: InterviewExplainer Optional logo icon Rules Click → / No hover animation Font-weight: 600 Alt text: “InterviewExplainer Home” 1.4 GLOBAL SEARCH BAR (MOST CRITICAL UI) Visual Rounded input Full width between logo and controls Search icon inside input (left) Placeholder (EXACT) Search interview topics, roles, or questions… Input Rules Min characters: 3 Max characters: 100 Debounce: 300ms Case insensitive Dropdown Behavior Appears below input Max height: 400px Scrollable Closes on: Esc click outside route change Search Result Types (ALL REQUIRED) Each result row includes: Title (bold) Type badge (Domain / Tech / Question) Context path (small text) Click route Example Explain ReentrantLock vs synchronized Question · Java → Concurrency → Locks Backend API GET /api/v1/search?q= Must search across: domains roles tech stacks categories subtopics questions Search States State UI <3 chars Nothing shown Loading 3 skeleton rows Results Grouped list No results “No results found” Error “Search unavailable. Retry” 1.5 Right Controls Theme Toggle Light / Dark Icon only Tooltip on hover Account Area Logged Out Button: Login Route: /login Logged In Circular avatar Dropdown items: Dashboard Profile Settings Logout 🎯 2. HERO SECTION (ABOVE THE FOLD) This is where users decide to stay or leave. 2.1 Section Layout Full width Vertically centered Max content width: 1200px Plenty of whitespace 2.2 HERO COPY (LOCKED) H1 (Primary Message) Prepare smarter. Perform better in interviews. Font size: ~48px desktop Max 2 lines High contrast Subheadline Structured interview prep with real questions, mastery tracking, and guided practice. Font size: ~18px Max 2 lines Neutral tone 2.3 PRIMARY CTA (ONLY ONE STRONG ACTION) Button Text: Start Guided Prep Size: Large Color: Primary Shape: Rounded Action Opens guided wizard modal Does NOT navigate page Analytics home_cta_guided_clicked 2.4 SECONDARY CTA (OPTIONAL, WEAKER) Button Text: Browse Questions Style: Ghost / outline Action Scrolls to Domain Discovery section OR Route: /domains 2.5 Hero Edge States Scenario Behavior Logged in CTA remains same Mobile CTAs stacked Small screen Text wraps cleanly 🧩 3. DOMAIN DISCOVERY SECTION Exploration without pressure. 3.1 Section Header Title Explore interview domains Subtitle Choose what you want to prepare for 3.2 Domain Card GRID Grid: 3 columns desktop, 1–2 mobile Max cards visible: 6–8 3.3 DOMAIN CARD CONTENT (STRICT) Each card MUST show: Domain Name Short description (≤ 140 chars) Question count Primary role label (optional) CTA text: Explore Example Card Java Backend 450 questions Concurrency · JVM · Spring · SQL [ Explore → ] Backend API GET /api/v1/domains/summary Returns: domainId name description questionCount roleHint 3.4 Card Interaction Rules Entire card clickable Hover: slight lift border highlight Keyboard focusable Click → /domain/java/backend 3.5 Domain Section States State UI Loading Skeleton cards Error Retry message Empty “Content coming soon” 💡 4. WHY INTERVIEWEXPLAINER SECTION Trust building. No marketing fluff. 4.1 Section Header Why InterviewExplainer? 4.2 Bullet Points (EXACTLY 4) Role-based learning paths Real interview-grade questions Clear mastery tracking Focused mock interviews Rules: One sentence each No icons overload Neutral tone 🧭 5. HOW IT WORKS SECTION Anxiety reduction. 5.1 Step Structure (FIXED) Exactly 4 steps. Each step includes: Number Title One-line explanation Example 1. Choose your role    Select your domain and experience level   2. Practice targeted questions    Focus on what actually gets asked   3. Track mastery    See exactly where you stand   4. Nail the interview    Walk in confident and prepared 5.2 Interaction Subtle fade-in on scroll No clicks No links 🤝 6. TRUST / PROOF SECTION (OPTIONAL SLOT) Purpose Social validation (future) Current State Placeholder text allowed Does NOT block release Example: “Built for engineers preparing for real interviews.” 🚀 7. BOTTOM CTA SECTION Last conversion point. 7.1 Content Headline Ready to start preparing? CTA Button Start Guided Interview Prep Same behavior as Hero CTA No secondary CTA 7.2 Design Slight background contrast Center aligned Visually calm 📎 8. FOOTER (CLOSURE) 8.1 Content Left: © InterviewExplainer Right: About Privacy Terms Support 8.2 Rules Small typography No animations Always visible at page bottom 📊 9. ANALYTICS EVENTS (MANDATORY) Event Name Trigger home_viewed Page load home_search_used Search interaction home_domain_clicked Domain card home_cta_guided_clicked CTA ♿ 10. ACCESSIBILITY REQUIREMENTS Full keyboard navigation ARIA labels on search & CTAs Contrast AA compliant Screen reader friendly headings ⚡ 11. PERFORMANCE REQUIREMENTS First meaningful paint < 1.5s Search response < 200ms Domain cards lazy loaded No layout shifts ✅ 12. HOME PAGE DONE CHECKLIST ✔ Zero ambiguity ✔ Backend contracts defined ✔ Copy finalized ✔ All states handled ✔ Analytics ready ✔ Accessible & responsive                 📄 PAGE 2 / 25 — DOMAIN SELECTION PAGE Route: /domains Internal Page Code: UI-PAGE-DOMAIN-SELECT Design Tier: Primary Navigation Page Reuse Pattern: Card-based selection surface Design Reference Level: Stripe Docs + Linear Settings + Notion Gallery 1️⃣ WHY THIS PAGE EXISTS (NON-NEGOTIABLE) This page exists because: Not all users want the wizard Some users want to see the landscape first Domain is the top-level mental model of the platform If this page is weak: users feel lost wizard feels forced content feels scattered 2️⃣ PAGE ENTRY SOURCES (EXACT) Entry Source Intent Home → “Browse Questions” Exploration Header → Domains Switching Wizard Exit → “Browse all domains” Recovery Deep link /domains Direct No auth required. 3️⃣ VISUAL LAYOUT SYSTEM (PIXEL-LOGIC) 3.1 Container Rules Max width: 1200px Horizontal padding: 24px Vertical spacing between sections: 64px Background: Neutral-50 (light) / Neutral-950 (dark) 3.2 Grid System Desktop: 3 columns Tablet: 2 columns Mobile: 1 column Card min height: 260px Card internal padding: 24px 4️⃣ PAGE HEADER SECTION (TOP CONTENT) 4.1 Title Block H1 Text (EXACT COPY) Choose your interview domain Font: Inter Size: 36px Weight: 600 Color: Neutral-900 4.2 Subtitle Text (EXACT COPY) Each domain is structured by role, technology, and experience level. Font size: 18px Weight: 400 Max width: 720px Color: Neutral-600 4.3 Helper Text (Small) You can switch domains anytime. Font size: 14px Color: Neutral-500 Purpose: reduce anxiety 5️⃣ DOMAIN FILTER STRIP (STATIC NOW, FUNCTIONAL LATER) This section must be present in UI even if logic is disabled initially 5.1 Filter Container Design Horizontal pill buttons Border: Neutral-300 Radius: 999px Hover: background Neutral-100 5.2 Filter Groups (EXACT LABELS) Experience Band Filter 0–1 years 1–3 years 3–5 years 5+ years Role Filter Backend Frontend Fullstack DevOps Data Analyst Sort Filter Most Popular Most Questions Recently Added 5.3 MVP Behavior Filters visible Clicking does NOT break layout If backend not ready → filters no-op safely 6️⃣ DOMAIN GRID (PRIMARY CONTENT ZONE) 6.1 DOMAIN CARD — COMPLETE CONTENT CONTRACT Each Domain Card is a self-contained summary of learning scope. Card Design Style Background: White Border radius: 12px Shadow: Level-1 Hover shadow: Level-2 Hover translateY: -4px Cursor: pointer 6.2 DOMAIN CARD — REQUIRED FIELDS (NO EXCEPTIONS) 1. Domain Name (H3) Examples: Java Python DevOps Data Analyst Frontend Engineering Font: Size: 22px Weight: 600 2. Domain Specialization Label (Badge) Examples: Backend & Fullstack Frontend Only Infrastructure & Cloud Analytics & SQL Badge style: Background: Neutral-100 Text: Neutral-700 Radius: 6px 3. Domain Description (STATIC COPY FROM DB) Examples: Java Backend-focused interview preparation covering Core Java, JVM internals, concurrency, Spring, SQL, and system interactions. Python Python interview preparation for backend, scripting, data processing, and automation roles. Rules: Max 160 characters Truncate with ellipsis if longer 4. Supported Roles (Explicit List) Examples: Backend Fullstack Render as: Small inline labels Neutral-600 text 5. Experience Coverage (BADGES) Always show all supported bands: 0–1 1–3 3–5 5+ Inactive bands appear faded. 6. Question Count (Exact Number) Format: 450 questions Font weight: 500 Color: Neutral-800 7. Primary CTA Button Label (EXACT): Explore Domain → Button style: Ghost button Primary text color Arrow icon animates on hover 6.3 CANONICAL DOMAIN CARD EXAMPLES (REAL) Java Domain Card Java Backend & Fullstack   Backend-focused interview preparation covering Core Java, JVM internals, concurrency, Spring, and SQL.   Roles: Backend · Fullstack Experience: 0–1 · 1–3 · 3–5 · 5+ 450 questions   [ Explore Domain → ] DevOps Domain Card DevOps Infrastructure & Cloud   Interview preparation for DevOps roles covering Linux, Docker, Kubernetes, CI/CD, cloud platforms, and monitoring.   Roles: DevOps Experience: 1–3 · 3–5 · 5+ 320 questions   [ Explore Domain → ] 7️⃣ DOMAIN CARD INTERACTION RULES Action Result Hover Lift + border Click Navigate Keyboard Enter Navigate Focus Outline visible Navigation Target /domain/{domain-slug} Examples: /domain/java /domain/devops 8️⃣ BACKEND DATA CONTRACT (FINAL) API GET /api/v1/domains Response (EXACT STRUCTURE) {   "domains": [     {       "domainId": 1,       "slug": "java",       "name": "Java",       "specialization": "Backend & Fullstack",       "description": "Backend-focused interview preparation covering Core Java, JVM internals, concurrency, Spring, and SQL.",       "supportedRoles": ["BACKEND", "FULLSTACK"],       "experienceBands": ["0-1", "1-3", "3-5", "5+"],       "questionCount": 450,       "popularityScore": 0.92,       "isActive": true     }   ] } 9️⃣ GUIDANCE / DECISION ASSIST SECTION Purpose Support users who hesitate. Content Block Title Not sure where to start? Buttons: Start Guided Prep → Wizard modal Explore Most Popular Domain → Auto-select highest popularityScore 10️⃣ EMPTY / ERROR / EDGE STATES Loading Skeleton cards (same layout) Error “Unable to load domains. Please retry.” Button: Retry No Domains “Interview domains are being prepared.” 11️⃣ ANALYTICS EVENTS (EXACT NAMES) Event Trigger domains_page_viewed Page load domain_card_clicked Card click domain_filter_clicked Filter click domain_help_guided Guided CTA 12️⃣ ACCESSIBILITY & UX RULES Cards tabbable ARIA label: “Java interview domain, 450 questions” Contrast AA Touch target ≥ 44px 13️⃣ PERFORMANCE REQUIREMENTS API latency < 300ms Skeleton appears < 150ms No layout shift Images lazy-loaded 14️⃣ PAGE COMPLETION DEFINITION This page is DONE when: ✔ All domains visible ✔ Clear role & experience info ✔ No decision anxiety ✔ Clean routing forward ✔ Backend schema locked         📄 PAGE 3 / 25 — DOMAIN → ROLE & EXPERIENCE SELECTION HUB Route: /domain/:domain-slug Example Routes: /domain/java /domain/python /domain/devops Internal Page Code: UI-PAGE-DOMAIN-HUB Design Tier: Primary Navigation Page User Intent Level: “I’ve chosen a domain, now guide me correctly” 1️⃣ WHY THIS PAGE EXISTS (CRITICAL LOGIC) This page exists to prevent incorrect preparation paths. Without this page: Junior candidates jump into senior topics Frontend users see backend-heavy content Users feel overwhelmed too early This page narrows scope before learning starts. 2️⃣ ENTRY CONDITIONS (EXACT) Entry Sources Source Route Domain Selection Page /domains Home (deep link) /domain/:domain Wizard (resume) /domain/:domain Direct URL /domain/:domain Authentication Login NOT required Progress info shown only if logged in 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Domain Overview Header ] [ Role Selection Section ] [ Experience Band Selection ] [ Preview of Learning Scope ] [ Primary CTA Section ] [ Footer ] 4️⃣ DOMAIN OVERVIEW HEADER 4.1 Purpose Confirm user choice Set expectations Anchor context 4.2 Domain Identity Block Domain Name (H1) Example: Java Interviews Font size: 36px Weight: 600 Color: Neutral-900 Domain Description (STATIC, FROM DB) Java Backend-focused interview preparation covering Core Java, JVM internals, concurrency, Spring, SQL, and system interactions. Rules: Max width: 800px Max 2 lines No truncation unless extreme 4.3 Domain Metadata Strip Rendered as inline pills: Total questions: 450 Supported roles: Backend, Fullstack Experience coverage: 0–1 · 1–3 · 3–5 · 5+ Design: Neutral background Small rounded pills 5️⃣ ROLE SELECTION SECTION (MANDATORY) 5.1 Purpose Scope content by job role Eliminate irrelevant topics 5.2 Section Header Title Select your role Helper Text Choose the role you’re preparing for. Content will adapt accordingly. 5.3 ROLE CARD DESIGN (STRICT) Each role is a selectable card (radio behavior). 5.4 ROLE CARD CONTENT (REQUIRED) Each role card MUST show: Role Name Role Description Primary Tech Focus Question Count (role-specific) 5.5 CANONICAL ROLE CARDS (JAVA DOMAIN) Backend Engineer Backend Engineer   Focuses on Java, JVM, concurrency, Spring, databases, and backend system design.   Primary Tech: Java, Spring, SQL 320 questions Fullstack Engineer Fullstack Engineer   Covers Java backend fundamentals plus frontend integration and APIs.   Primary Tech: Java, Spring, REST 280 questions 5.6 Role Card Interaction Rules Click → select (radio) Selected state: Border: Primary-600 Background: Primary-50 Only ONE role selectable 5.7 Backend API GET /api/v1/domains/{domainId}/roles Response: [   {     "roleId": 1,     "roleName": "Backend Engineer",     "description": "Focuses on Java, JVM, concurrency, Spring, databases, and backend system design.",     "primaryTech": ["Java", "Spring", "SQL"],     "questionCount": 320   } ] 6️⃣ EXPERIENCE BAND SELECTION SECTION 6.1 Purpose Control difficulty curve Prevent over/under-preparation 6.2 Section Header Title Select your experience level Helper Text Questions will be filtered to match your experience. 6.3 EXPERIENCE BAND OPTIONS (LOCKED) Each band is a selectable pill/card. Bands (EXACT) 0–1 years — Entry-level / Freshers 1–3 years — Early professional 3–5 years — Mid-level 5+ years — Senior / Lead 6.4 Experience Card Content Each band includes: Label Description Approx. question count 6.5 Example (Java Backend) 1–3 years   Focus on core Java, collections, OOP, basic concurrency, Spring fundamentals.   180 questions 6.6 Interaction Rules Only ONE experience band selectable Selected state highlighted Selection required to proceed 7️⃣ LEARNING SCOPE PREVIEW (DYNAMIC) 7.1 Purpose Show “what you’ll study” Reduce fear of unknown 7.2 Content (Auto-updates based on role + experience) Preview List Core Java Collections Framework Multithreading Basics Spring Boot Fundamentals SQL & Indexing Rendered as: Simple bullet list Max 6 items Backend Logic GET /api/v1/preview?domain=java&role=backend&exp=1-3 8️⃣ PRIMARY CTA SECTION (GATEKEEPER) 8.1 Purpose Confirm user intent Move into structured learning 8.2 CTA BUTTON Label Continue to Learning Path 8.3 CTA Behavior Disabled until: Role selected Experience selected On click: Saves selections (localStorage + backend if logged in) Routes to: /domain/java/backend/1-3 Analytics Event domain_role_exp_confirmed Payload: domain role experience 9️⃣ EDGE & ERROR STATES No Roles Available “Roles for this domain are being prepared.” CTA: Back to domains API Failure “Unable to load role details.” Button: Retry 10️⃣ ACCESSIBILITY RULES Role cards tabbable Experience pills tabbable ARIA: “Backend Engineer role selected” Keyboard-only flow possible 11️⃣ PERFORMANCE REQUIREMENTS Role data < 200ms Experience data local Preview updates < 100ms No layout shift 12️⃣ BACKEND DATA SUMMARY Required APIs: /domains/{id}/roles /domains/{id}/experience-bands /preview Required storage: user_selected_domain user_selected_role user_selected_experience 13️⃣ PAGE COMPLETION CRITERIA ✔ Role selection enforced ✔ Experience gating enforced ✔ Learning scope visible ✔ Clean routing forward ✔ No accidental deep jumps   📄 PAGE 4 / 25 — ROLE-SPECIFIC TECH STACK OVERVIEW Route: /domain/:domain/:role/:experience Example Routes /domain/java/backend/1-3 /domain/java/fullstack/3-5 /domain/python/backend/0-1 /domain/devops/devops/3-5 Internal Page Code: UI-PAGE-TECHSTACK-OVERVIEW Design Tier: Core Learning Navigation User Intent Level: “Show me exactly what I need to prepare, broken down properly.” 1️⃣ WHY THIS PAGE EXISTS (CRITICAL) This page is the contract between the platform and the user. It answers: What topics will I study? In what structure? How deep will this go? Is this aligned with my experience? Without this page: Learning feels random Users jump blindly into questions Drop-offs increase sharply 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Page 3 CTA /domain/:domain/:role/:experience Dashboard resume same Direct deep link same Authentication Optional Progress visible only if logged in 3️⃣ PAGE LAYOUT (TOP → BOTTOM) [ Sticky Header ] [ Context Header (Domain + Role + Exp) ] [ Tech Stack Summary Strip ] [ Category Grid (Primary Content) ] [ Learning Guidance Section ] [ Footer ] 4️⃣ CONTEXT HEADER (VERY IMPORTANT) 4.1 Purpose Reaffirm user path Prevent misalignment Anchor context 4.2 Context Breadcrumb (Top) Java → Backend Engineer → 1–3 years Clickable domain breadcrumb Non-clickable role & experience 4.3 Main Header (H1) Example: Java Backend Interview Preparation (1–3 Years) Font size: 32–36px Weight: 600 Neutral-900 4.4 Context Description (STATIC, FROM DB) Example: This learning path focuses on Java backend interviews for engineers with 1–3 years of experience, covering core Java concepts, Spring fundamentals, databases, and basic system interactions. Rules: Max 3 lines Calm tone No hype words 5️⃣ TECH STACK SUMMARY STRIP 5.1 Purpose Give high-level visibility without overwhelming. 5.2 Content (INLINE PILLS) Pills shown: Total questions: 180 Categories: 8 Estimated time: 25–30 hours Difficulty mix: Easy · Medium 5.3 Data Source Derived from: categories subtopics questions experience filters 6️⃣ CATEGORY GRID (PRIMARY CONTENT) This is the heart of structured learning. 6.1 Grid Layout Rules Desktop: 2 columns Tablet: 1 column Card height: auto Vertical spacing: 32px 6.2 CATEGORY CARD — FULL CONTENT CONTRACT Each category card represents one major interview pillar. 6.3 REQUIRED CATEGORY FIELDS Each card MUST include: Category Name Category Description Subtopic Count Question Count Difficulty Distribution Progress Indicator (if logged in) Primary CTA 6.4 CANONICAL CATEGORY CARDS (JAVA BACKEND 1–3) Category: Core Java Core Java   Fundamental Java concepts frequently tested in backend interviews.   Subtopics: 8 Questions: 60 Difficulty: Easy · Medium   Progress: 40% completed   [ View Topics → ] Category: Collections & Generics Collections & Generics   In-depth understanding of Java collections, generics, and performance considerations.   Subtopics: 6 Questions: 45 Difficulty: Medium   Progress: Not started   [ View Topics → ] Category: Multithreading Basics Multithreading Basics   Thread lifecycle, synchronization, and concurrency concepts expected at this level.   Subtopics: 5 Questions: 35 Difficulty: Medium   Progress: 10% completed   [ View Topics → ] Category: Spring Fundamentals Spring Fundamentals   Core Spring and Spring Boot concepts used in backend development.   Subtopics: 7 Questions: 40 Difficulty: Medium   Progress: Not started   [ View Topics → ] 6.5 Category Card Interaction Rules Entire card clickable CTA text always: View Topics → Hover: subtle elevation Click navigates to: /tech/java/backend/1-3/core-java 6.6 Backend API (MANDATORY) GET /api/v1/learning-path Query Params domain=java role=backend experience=1-3 Response (EXACT SHAPE) {   "summary": {     "totalQuestions": 180,     "categories": 8,     "estimatedHours": "25-30",     "difficultyMix": ["Easy", "Medium"]   },   "categories": [     {       "categoryId": 101,       "name": "Core Java",       "description": "Fundamental Java concepts frequently tested in backend interviews.",       "subtopicCount": 8,       "questionCount": 60,       "difficulty": ["Easy", "Medium"],       "progressPercent": 40     }   ] } 7️⃣ LEARNING GUIDANCE SECTION 7.1 Purpose Prevent wrong learning order. 7.2 Content (STATIC COPY) Title How to use this learning path Steps Start with Core Java and Collections Move to concurrency and Spring fundamentals Practice weak areas repeatedly Track mastery in the dashboard 8️⃣ EMPTY / EDGE STATES No Categories “Learning content for this path is being prepared.” CTA: Back to domains API Failure “Unable to load learning path.” Button: Retry 9️⃣ ANALYTICS EVENTS Event Trigger learning_path_viewed Page load category_clicked Category card breadcrumb_clicked Domain breadcrumb 🔟 ACCESSIBILITY Category cards tabbable Clear focus outline Screen reader announces: category name question count progress 1️⃣1️⃣ PERFORMANCE REQUIREMENTS API < 250ms Skeleton cards visible < 150ms No layout shift Progress fetched lazily 1️⃣2️⃣ PAGE COMPLETION DEFINITION ✔ User sees full learning scope ✔ Categories clearly separated ✔ Difficulty appropriate to experience ✔ Clean forward navigation ✔ Backend contract locked 📄 PAGE 5 / 25 — CATEGORY → SUBTOPIC LISTING PAGE Route: /tech/:domain/:role/:experience/:category Example Routes /tech/java/backend/1-3/core-java /tech/java/backend/1-3/collections /tech/devops/devops/3-5/kubernetes /tech/python/backend/0-1/python-basics Internal Page Code: UI-PAGE-SUBTOPIC-LIST Design Tier: Core Learning Navigation User Intent Level: “Break this category into precise, learnable units.” 1️⃣ WHY THIS PAGE EXISTS (VERY IMPORTANT) This page exists to atomize learning. Categories are still too broad. Subtopics are the smallest unit of mastery. Without this page: Users jump randomly into questions Progress tracking becomes meaningless Weak-area detection fails This page defines what “knowing a category” actually means. 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Page 4 Category Card /tech/:domain/:role/:experience/:category Dashboard (resume) same Deep link same Authentication Optional Progress visible only if logged in 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Context Header + Breadcrumb ] [ Category Overview Strip ] [ Subtopic List (Primary Content) ] [ Practice Guidance Section ] [ Footer ] 4️⃣ CONTEXT HEADER (ANCHOR) 4.1 Breadcrumb Navigation Java → Backend → 1–3 years → Core Java Rules: Java → clickable (domain hub) Backend / 1–3 → clickable (learning path) Core Java → active (current) 4.2 Category Title (H1) Example: Core Java — Interview Preparation Font size: 32px Weight: 600 Color: Neutral-900 4.3 Category Description (STATIC FROM DB) Example: This category covers fundamental Java concepts that are frequently tested in backend interviews, focusing on correctness, behavior, and edge cases. Rules: Max 3 lines Calm tone No buzzwords 5️⃣ CATEGORY OVERVIEW STRIP 5.1 Purpose Give immediate scope clarity. 5.2 Overview Metrics (INLINE PILLS) Subtopics: 8 Questions: 60 Difficulty: Easy · Medium Estimated time: 8–10 hours Design: Neutral background pills Small icons allowed (optional) 6️⃣ SUBTOPIC LIST (PRIMARY CONTENT) This is the most important section of the page. 6.1 Subtopic List Layout Vertical list (not grid) Each subtopic = expandable card Vertical spacing: 24px 6.2 SUBTOPIC CARD — FULL CONTENT CONTRACT Each subtopic card MUST include: Subtopic Name One-line Description Question Count Difficulty Level Experience Coverage Progress Indicator (if logged in) Primary CTA 6.3 CANONICAL SUBTOPIC CARDS (JAVA / CORE JAVA / 1–3) Subtopic: JVM Basics JVM Basics   Covers JVM architecture, memory areas, class loading, and execution flow.   Questions: 10 Difficulty: Easy Experience: 0–1 · 1–3   Progress: Completed   [ View Questions → ] Subtopic: Object-Oriented Principles Object-Oriented Principles   Deep dive into encapsulation, inheritance, polymorphism, and abstraction with examples.   Questions: 12 Difficulty: Easy · Medium Experience: 0–1 · 1–3 · 3–5   Progress: 60% completed   [ View Questions → ] Subtopic: Java Memory Model Java Memory Model   Understanding heap vs stack, object lifecycle, and visibility guarantees.   Questions: 8 Difficulty: Medium Experience: 1–3 · 3–5   Progress: Not started   [ View Questions → ] Subtopic: Exception Handling Exception Handling   Checked vs unchecked exceptions, best practices, and common interview pitfalls.   Questions: 6 Difficulty: Easy · Medium Experience: 0–1 · 1–3   Progress: Not started   [ View Questions → ] 6.4 Subtopic Card Interaction Rules Entire card clickable CTA text always: View Questions → Hover: Slight background highlight Click navigates to: /subtopic/:subtopic-id 6.5 Backend API (MANDATORY) GET /api/v1/categories/{categoryId}/subtopics Response (EXACT STRUCTURE) {   "category": {     "categoryId": 101,     "name": "Core Java",     "description": "Fundamental Java concepts frequently tested in backend interviews."   },   "summary": {     "subtopicCount": 8,     "questionCount": 60,     "estimatedHours": "8-10"   },   "subtopics": [     {       "subtopicId": 1001,       "name": "JVM Basics",       "description": "Covers JVM architecture, memory areas, class loading, and execution flow.",       "questionCount": 10,       "difficulty": ["Easy"],       "experienceBands": ["0-1", "1-3"],       "progressPercent": 100     }   ] } 7️⃣ PRACTICE GUIDANCE SECTION 7.1 Purpose Prevent ineffective practice. 7.2 Static Guidance Copy Title How to practice this category Steps Start with JVM and OOP fundamentals Complete easy questions first Revisit medium topics after review Track weak subtopics in the dashboard 8️⃣ EMPTY & EDGE STATES No Subtopics “Subtopics for this category are being prepared.” CTA: Back to learning path API Error “Unable to load subtopics.” Button: Retry 9️⃣ NAVIGATION RULES From this page user can go to: Subtopic → Question list Breadcrumb → Category / Path Header → Anywhere User cannot: Skip directly to unrelated categories 🔟 ANALYTICS EVENTS Event Trigger subtopic_list_viewed Page load subtopic_clicked Subtopic CTA breadcrumb_clicked Breadcrumb nav 1️⃣1️⃣ ACCESSIBILITY Subtopic cards tabbable Screen reader announces: subtopic name question count progress state Focus outline visible 1️⃣2️⃣ PERFORMANCE REQUIREMENTS API < 200ms Skeleton appears < 150ms Progress fetched async No layout shift   1️⃣3️⃣ PAGE COMPLETION DEFINITION ✔ Category fully decomposed ✔ Clear learning units ✔ Progress visible ✔ Clean routing forward ✔ Backend contract fixed     📄 PAGE 6 / 25 — SUBTOPIC → QUESTION LIST PAGE Route: /subtopic/:subtopic-id Example Routes /subtopic/1001 (JVM Basics) /subtopic/1003 (Java Memory Model) /subtopic/2051 (Kubernetes Pods) Internal Page Code: UI-PAGE-QUESTION-LIST Design Tier: Core Practice Navigation User Intent Level: “Show me all questions I must practice for this exact concept.” 1️⃣ WHY THIS PAGE EXISTS (NON-NEGOTIABLE) This page exists to: Present all questions for one atomic concept Allow controlled, selective practice Surface difficulty & experience relevance Act as a bridge between reading and doing Without this page: Users jump blindly into questions Difficulty progression breaks Practice sessions lose structure This page defines what practicing a subtopic actually means. 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Page 5 Subtopic Card /subtopic/:id Dashboard (weak areas) same Resume practice same Deep link same Authentication Optional Attempt history visible only if logged in 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Context Header + Breadcrumb ] [ Subtopic Overview Strip ] [ Question Filters ] [ Question List (Primary Content) ] [ Practice Actions Panel ] [ Footer ] 4️⃣ CONTEXT HEADER (ANCHOR & ORIENTATION) 4.1 Breadcrumb Navigation Java → Backend → 1–3 years → Core Java → JVM Basics Rules: Java → clickable (domain hub) Backend / 1–3 → clickable (learning path) Core Java → clickable (category) JVM Basics → active 4.2 Subtopic Title (H1) Example: JVM Basics — Interview Questions Font size: 32px Weight: 600 Color: Neutral-900 4.3 Subtopic Description (STATIC FROM DB) Example: Covers JVM architecture, memory areas, class loading, execution flow, and common JVM-related interview questions. Rules: Max 3 lines Calm explanatory tone 5️⃣ SUBTOPIC OVERVIEW STRIP 5.1 Purpose Instant clarity before practice. 5.2 Overview Metrics (INLINE PILLS) Questions: 10 Difficulty: Easy Experience: 0–1 · 1–3 Estimated time: 45–60 min Design: Neutral background pills Icons optional but consistent 6️⃣ QUESTION FILTER BAR 6.1 Purpose Let users control practice depth. 6.2 Filters (ALL REQUIRED) Difficulty Filter Easy Medium Hard Experience Filter 0–1 1–3 3–5 5+ Status Filter (if logged in) Not attempted Attempted Correct Incorrect 6.3 Filter Behavior Multi-select allowed Default: All visible Changes update list instantly (no page reload) 7️⃣ QUESTION LIST (PRIMARY CONTENT) This is the core content surface. 7.1 Question List Layout Vertical list Each question = card row Divider between items Pagination or infinite scroll (page size = 20) 7.2 QUESTION ROW — COMPLETE CONTENT CONTRACT Each question row MUST include: Question Title Difficulty Badge Experience Badge Estimated Time Attempt Status (if logged in) Primary CTA 7.3 CANONICAL QUESTION ROW EXAMPLES Question 1 Explain JVM architecture and its components   Difficulty: Easy Experience: 0–1 · 1–3 Estimated time: 5 min Status: Not attempted   [ Start Question → ] Question 2 (Attempted) What are the different memory areas in JVM?   Difficulty: Easy Experience: 0–1 · 1–3 Estimated time: 6 min Status: Attempted · Correct   [ Review → ] Question 3 (Incorrect) How does class loading work in JVM?   Difficulty: Medium Experience: 1–3 Estimated time: 8 min Status: Attempted · Incorrect   [ Retry → ] 7.4 Question Interaction Rules Entire row clickable CTA text varies by status: Start Question Retry Review Click navigates to: /question/:question-id 7.5 Backend API (MANDATORY) GET /api/v1/subtopics/{subtopicId}/questions Query Params difficulty experience status Response (EXACT STRUCTURE) {   "subtopic": {     "subtopicId": 1001,     "name": "JVM Basics"   },   "summary": {     "totalQuestions": 10,     "estimatedMinutes": "45-60"   },   "questions": [     {       "questionId": 5001,       "title": "Explain JVM architecture and its components",       "difficulty": "EASY",       "experienceBands": ["0-1", "1-3"],       "estimatedMinutes": 5,       "attemptStatus": "NOT_ATTEMPTED"     }   ] } 8️⃣ PRACTICE ACTIONS PANEL (STICKY BOTTOM / SIDE) 8.1 Purpose Encourage structured practice. 8.2 Actions Start Practice Session Sequential questions Resume Last Attempt (if any) Skip Subtopic (optional, discouraged) Navigation /practice/:subtopic-id 9️⃣ EMPTY & EDGE STATES No Questions “Questions for this subtopic are being prepared.” CTA: Back to category Filter No Match “No questions match the selected filters.” Button: Clear filters API Error “Unable to load questions.” Button: Retry 🔟 ANALYTICS EVENTS Event Trigger question_list_viewed Page load question_clicked Question CTA filter_used Filter interaction practice_started Start practice 1️⃣1️⃣ ACCESSIBILITY RULES Question rows tabbable Screen reader announces: question title difficulty status Clear focus states 1️⃣2️⃣ PERFORMANCE REQUIREMENTS API < 200ms Skeleton visible < 150ms List virtualization for >50 items No layout shift 1️⃣3️⃣ PAGE COMPLETION DEFINITION ✔ All questions visible ✔ Filters functional ✔ Status visible ✔ Practice entry clear ✔ Backend contract fixed     📄 PAGE 7 / 25 — QUESTION DETAIL / PRACTICE PAGE Route: /question/:question-id Example Routes /question/5001 /question/6123 /question/9102 Internal Page Code: UI-PAGE-QUESTION-PRACTICE Design Tier: Core Learning Interaction User Intent Level: “Test my understanding, then learn deeply.” 1️⃣ WHY THIS PAGE EXISTS (CORE PRODUCT TRUTH) This page is the product. Everything else: navigation dashboards recommendations exists only to bring the user here correctly. If this page is weak: learning fails retention drops platform loses credibility 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Subtopic Question List /question/:id Practice Session same Dashboard Resume same Deep link same Authentication Optional to view question Required to submit & track attempts 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Context Breadcrumb ] [ Question Meta Bar ] [ Question Content ] [ Answer Input Area ] [ Submission Controls ] [ Feedback / Result Section ] [ Explanation & Deep Dive ] [ Navigation Controls ] [ Footer ] 4️⃣ CONTEXT BREADCRUMB (ORIENTATION) Breadcrumb Path Java → Backend → 1–3 years → Core Java → JVM Basics → Question Rules: All except “Question” clickable Clicking does not lose attempt state (warn user) 5️⃣ QUESTION META BAR 5.1 Purpose Set expectations before answering. 5.2 Meta Fields (INLINE) Difficulty: Easy Experience: 0–1 · 1–3 Estimated time: 5 minutes Question type: Conceptual / Code / Scenario Design: Inline pills Neutral background 6️⃣ QUESTION CONTENT (READ-ONLY) 6.1 Content Source Markdown from DB Rendered safely (no raw HTML) 6.2 Content Structure (MANDATORY) Markdown MUST support: Headings Bullet points Code blocks Tables Inline emphasis 6.3 Example Question Markdown ### Explain JVM architecture and its components   Describe the major components of the Java Virtual Machine and their responsibilities during program execution.   Include: - Class Loader - Runtime Data Areas - Execution Engine 6.4 Rendering Rules Max content width: 800px Code blocks scroll horizontally Line numbers optional No editable content here 7️⃣ ANSWER INPUT AREA (INTERACTIVE CORE) 7.1 Purpose Capture user understanding. 7.2 Input Type Depends on question type: Question Type Input Conceptual Markdown editor Code Code editor (monospace) MCQ Radio buttons Scenario Markdown editor 7.3 Default Input (Conceptual) Markdown editor Placeholder text: “Write your answer here. Explain concepts clearly.” Autosave every 10 seconds (local) Word count visible 7.4 Timer Behavior Starts on first keystroke Pauses on tab switch (optional) Display format: mm:ss 8️⃣ SUBMISSION CONTROLS 8.1 Buttons Submit Answer (Primary) Skip Question (Secondary) 8.2 Submit Rules Disabled until input present On click: Freeze input Show loading Submit attempt Backend API POST /api/v1/attempts Payload: {   "questionId": 5001,   "answerMarkdown": "...",   "timeSpentSeconds": 312 } 9️⃣ FEEDBACK / RESULT SECTION Appears after submission only. 9.1 Result States State UI Correct Green highlight Partially Correct Amber Incorrect Red 9.2 Feedback Content Result label Short system feedback Time spent Next recommended action 10️⃣ EXPLANATION & DEEP DIVE SECTION 10.1 Purpose Actual learning happens here. 10.2 Content Source answer_markdown from DB Separate from question text 10.3 Explanation Structure (REQUIRED) Markdown explanation MUST include: Direct answer Concept breakdown Example (code or scenario) Common mistakes Interview tips (optional) Example Explanation Markdown ### JVM Architecture Explained   The JVM consists of three major components:   #### 1. Class Loader Responsible for loading `.class` files into memory.   #### 2. Runtime Data Areas Includes heap, stack, method area, etc.   #### 3. Execution Engine Executes bytecode using interpreter and JIT compiler.   **Common mistake:** Confusing JVM heap with OS memory. 11️⃣ NAVIGATION CONTROLS 11.1 Purpose Control flow without confusion. 11.2 Controls Next Question → Previous Question Back to Question List Rules Next respects filters & practice session Warn before leaving unanswered question 12️⃣ EDGE & ERROR STATES Attempt Submission Failed “Submission failed. Retry.” Retry button restores input. Page Reload Restore draft from autosave Timer resets with warning Unauthorized Submit Redirect to login Resume question after login 13️⃣ BACKEND API SUMMARY API Purpose GET /questions/{id} Load question POST /attempts Submit answer GET /attempts/{id} Load result 14️⃣ ANALYTICS EVENTS Event Trigger question_viewed Page load answer_started First input answer_submitted Submit explanation_viewed Scroll 15️⃣ ACCESSIBILITY Keyboard navigation Screen reader: reads question content announces result Focus trapped in editor while typing 16️⃣ PERFORMANCE REQUIREMENTS Question load < 200ms Editor responsive < 50ms Explanation lazy-loaded No layout shift 17️⃣ PAGE COMPLETION DEFINITION ✔ Question readable ✔ Answer captured ✔ Feedback shown ✔ Explanation teaches ✔ Navigation controlled       📄 PAGE 8 / 25 — PRACTICE SESSION PAGE Route: /practice/:subtopic-id Example Routes /practice/1001 (JVM Basics) /practice/2051 (Kubernetes Pods) Internal Page Code: UI-PAGE-PRACTICE-SESSION Design Tier: Core Learning Flow User Intent Level: “Let me practice multiple questions in a focused, interview-like flow.” 1️⃣ WHY THIS PAGE EXISTS (CRITICAL) Single-question practice is insufficient for interview prep. This page exists to: Enforce sequential learning Reduce decision fatigue Simulate interview rhythm Collect better mastery signals Without this page: Users cherry-pick easy questions Mastery metrics become noisy Interview readiness is poorly estimated 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Subtopic Question List /practice/:subtopic-id Dashboard Resume same Weak Areas same Authentication Required to start a session Guest users prompted to log in 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Practice Session Header ] [ Session Progress Bar ] [ Active Question Area ] [ Answer Input Area ] [ Session Controls ] [ Footer ] 4️⃣ PRACTICE SESSION HEADER 4.1 Purpose Provide session context, not content. 4.2 Header Content Subtopic Name Example: JVM Basics Total Questions: 10 Current Position: 3 / 10 Design: Compact No distraction 5️⃣ SESSION PROGRESS BAR 5.1 Purpose Give psychological progress feedback. 5.2 Behavior Horizontal bar Filled proportionally Updates after each submission Rules: Never animated aggressively Color: Primary-600 6️⃣ ACTIVE QUESTION AREA Reuses Question Detail UI, but in session mode. Differences from Page 7 Aspect Session Mode Breadcrumb Hidden Back navigation Disabled Skip Allowed (tracked) Next Automatic Content Loaded GET /api/v1/practice/{sessionId}/question 7️⃣ ANSWER INPUT AREA Same editor behavior as Page 7 Autosave enabled Timer continues across questions 8️⃣ SESSION CONTROLS Buttons Submit & Next Skip Question End Session End Session Behavior Confirmation modal Warns about incomplete questions 9️⃣ SESSION COMPLETION SUMMARY (INLINE) Appears after last question. Summary Content Questions attempted Correct / incorrect count Time spent Weak areas identified CTA: View Detailed Summary Review Incorrect Questions 🔟 BACKEND DATA MODEL Start Session POST /api/v1/practice Payload: {   "subtopicId": 1001 } Submit Answer POST /api/v1/practice/{sessionId}/attempt End Session POST /api/v1/practice/{sessionId}/end 1️⃣1️⃣ EDGE & ERROR STATES Network Failure Save draft locally Retry submission Session Expired Resume from last question 1️⃣2️⃣ ANALYTICS EVENTS Event Trigger practice_session_started Session start practice_question_submitted Each submit practice_session_completed Session end practice_session_abandoned Exit 1️⃣3️⃣ ACCESSIBILITY Keyboard navigation Focus trapped in editor Screen reader announces progress 1️⃣4️⃣ PERFORMANCE REQUIREMENTS Question fetch < 150ms No full page reload Smooth transitions 1️⃣5️⃣ PAGE COMPLETION DEFINITION ✔ Continuous flow enforced ✔ Session data captured ✔ Completion summary shown ✔ Backend contract locked       📄 PAGE 9 / 25 — ATTEMPT SUMMARY PAGE Route: /attempt/:attempt-id/summary Example Routes /attempt/90121/summary /attempt/55432/summary Internal Page Code: UI-PAGE-ATTEMPT-SUMMARY Design Tier: Feedback & Reinforcement User Intent Level: “Tell me how I did, what I learned, and what to do next.” 1️⃣ WHY THIS PAGE EXISTS (CRITICAL) This page closes the learning loop. Without this page: Feedback feels abrupt Users don’t internalize mistakes Next actions are unclear Mastery tracking becomes invisible This page turns attempts into learning outcomes. 2️⃣ ENTRY CONDITIONS Entry Sources Source Route Practice Session Completion /attempt/:id/summary Single Question Submit same Dashboard (review attempt) same Authentication Required Attempt belongs to user 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Attempt Result Header ] [ Performance Summary Cards ] [ Question Breakdown Table ] [ Weak Areas Identified ] [ Recommended Next Actions ] [ Footer ] 4️⃣ ATTEMPT RESULT HEADER 4.1 Purpose Immediate emotional feedback. 4.2 Header Content Result Badge (VERY PROMINENT) One of: Completed Partially Completed Abandoned Color: Success / Warning / Neutral Attempt Context Text Example: Practice Session — JVM Basics Subtext: Java · Backend · 1–3 years Time Summary Time Spent: 38 minutes Questions Attempted: 7 / 10 5️⃣ PERFORMANCE SUMMARY CARDS 5.1 Purpose Quick understanding before details. 5.2 Summary Cards (4 REQUIRED) Each card includes: Metric label Metric value Small icon Card 1 — Correct Answers 4 Correct Card 2 — Incorrect Answers 3 Incorrect Card 3 — Accuracy 57% Accuracy Card 4 — Average Time 5.4 min / question 6️⃣ QUESTION BREAKDOWN TABLE 6.1 Purpose Concrete feedback, not abstract scores. 6.2 Table Columns (EXACT) Column Content Question Title Difficulty Badge Result Correct / Incorrect / Skipped Time Minutes Action Review 6.3 Example Row Explain JVM architecture and its components Easy Correct 4 min [ Review → ] Interaction Rules Clicking Review → /question/:id Opens explanation section by default 7️⃣ WEAK AREAS IDENTIFIED SECTION 7.1 Purpose Turn mistakes into direction. 7.2 Content Title Areas to improve Weak Subtopics (AUTO-GENERATED) Example: Java Memory Model — Incorrect in 2 questions Class Loading — Skipped Rendered as: Bullet list Severity label (High / Medium) Backend Logic Derived from: incorrect attempts skipped questions time overrun 8️⃣ RECOMMENDED NEXT ACTIONS 8.1 Purpose Remove decision fatigue. 8.2 CTA Buttons (PRIORITIZED) Review Incorrect Questions Direct to filtered question list Retry Subtopic Practice Starts new session Continue Learning Path Back to category page CTA Logic Only ONE primary CTA highlighted (context-aware). 9️⃣ BACKEND DATA CONTRACT API GET /api/v1/attempts/{attemptId}/summary Response (EXACT) {   "attemptId": 90121,   "subtopic": "JVM Basics",   "domain": "Java",   "role": "Backend",   "experience": "1-3",   "totalQuestions": 10,   "attempted": 7,   "correct": 4,   "incorrect": 3,   "accuracy": 57,   "averageTime": 5.4,   "weakAreas": [     {       "subtopic": "Java Memory Model",       "severity": "HIGH"     }   ],   "questions": [     {       "questionId": 5001,       "title": "Explain JVM architecture",       "difficulty": "EASY",       "result": "CORRECT",       "timeSpent": 4     }   ] } 🔟 EMPTY & EDGE STATES No Data “Attempt data unavailable.” CTA: Back to dashboard Unauthorized Access Redirect to dashboard Show message: “This attempt doesn’t belong to you.” 1️⃣1️⃣ ANALYTICS EVENTS Event Trigger attempt_summary_viewed Page load review_question_clicked Review retry_practice_clicked Retry next_action_clicked CTA 1️⃣2️⃣ ACCESSIBILITY Summary cards read aloud Table navigable via keyboard Screen reader announces result state 1️⃣3️⃣ PERFORMANCE REQUIREMENTS API < 200ms Table virtualized if large No layout shift 1️⃣4️⃣ PAGE COMPLETION DEFINITION ✔ Attempt feedback visible ✔ Weak areas identified ✔ Next steps clear ✔ Backend contract locked     📄 PAGE 10 / 25 — USER DASHBOARD (OVERVIEW) Route: /dashboard Internal Page Code: UI-PAGE-DASHBOARD-OVERVIEW Design Tier: Core User Control Center User Intent Level: “Show me where I stand, what I should do next, and how close I am to interview-ready.” 1️⃣ WHY THIS PAGE EXISTS (ABSOLUTE CLARITY) This page exists to answer 4 user questions instantly: How prepared am I overall? Where am I strong vs weak? What should I do next? Am I improving over time? If the dashboard fails: users lose motivation practice feels disconnected retention collapses 2️⃣ ACCESS & ENTRY CONDITIONS Entry Sources Source Route Header → Dashboard /dashboard Login redirect /dashboard Practice completion CTA /dashboard Authentication Required Redirect unauthenticated users → /login 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Dashboard Header (Welcome + Context) ] [ Overall Mastery Section ] [ Domain Progress Grid ] [ Recommended Next Actions ] [ Weak Areas Snapshot ] [ Activity & Consistency Chart ] [ Footer ] 4️⃣ DASHBOARD HEADER (ORIENTATION) 4.1 Purpose Personalization Emotional anchoring 4.2 Header Content Greeting Text Example: Welcome back, Ravi Dynamic based on user profile. Subtext (Context) Example: Preparing for Java Backend · 1–3 years Derived from last selected learning path. Quick Actions (Right Aligned) Resume Practice Change Domain Buttons are secondary style. 5️⃣ OVERALL MASTERY SECTION (PRIMARY KPI) 5.1 Purpose Provide a single, intuitive readiness signal. 5.2 Mastery Gauge (CORE VISUAL) Metric Overall Mastery: 62% Calculation: (correct_weighted_attempts / total_relevant_questions) × 100 Weights: Easy = 1.0 Medium = 1.3 Hard = 1.6 5.3 Supporting Metrics (INLINE) Questions practiced: 210 / 340 Accuracy: 68% Avg time/question: 5.2 min 5.4 Design Rules Circular progress ring Color scale: <40% → Neutral 40–70% → Primary 70% → Success 6️⃣ DOMAIN PROGRESS GRID 6.1 Purpose Show progress by domain, not raw numbers. 6.2 Grid Layout Desktop: 3 cards per row Tablet: 2 Mobile: 1 6.3 DOMAIN PROGRESS CARD — FULL CONTRACT Each card MUST include: Domain Name Role Domain Mastery % Category Breakdown Weak Indicator CTA 6.4 CANONICAL DOMAIN CARD (JAVA) Java — Backend   Mastery: 58%   Core Java        ███████░░░ 70% Collections     █████░░░░░ 45% Concurrency     ███░░░░░░░ 30% Spring          ██░░░░░░░░ 20%   Weak Area: Concurrency   [ View Details → ] Navigation /dashboard/domain/java 7️⃣ RECOMMENDED NEXT ACTIONS (MOST IMPORTANT CTA AREA) 7.1 Purpose Remove “what should I do now?” friction. 7.2 Recommendation Logic (SYSTEM-DRIVEN) Prioritization: Weak subtopics Incomplete categories Resume last practice Mock interview readiness 7.3 Recommendation Card Structure Each recommendation includes: Reason Suggested action Estimated effort Primary CTA Example Recommendation Strengthen Concurrency Basics   You missed multiple questions in thread synchronization and locking mechanisms.   Estimated time: 45 minutes   [ Practice Concurrency → ] 8️⃣ WEAK AREAS SNAPSHOT 8.1 Purpose Expose gaps without overwhelming. 8.2 Content Top 3 weak subtopics Severity indicator Example: Java Memory Model — High Thread Synchronization — Medium Exception Handling — Medium CTA View all weak areas Route: /dashboard/weak-areas 9️⃣ ACTIVITY & CONSISTENCY CHART 9.1 Purpose Reinforce habit formation. 9.2 Chart Content X-axis: Dates (last 30 days) Y-axis: Questions practiced Highlight streaks Supporting Metrics Current streak: 6 days Longest streak: 12 days Avg sessions/week: 4 🔟 BACKEND DATA CONTRACT (DASHBOARD AGGREGATE) API GET /api/v1/dashboard Response (EXACT SHAPE) {   "user": {     "name": "Ravi",     "activeDomain": "Java",     "role": "Backend",     "experience": "1-3"   },   "overall": {     "masteryPercent": 62,     "questionsPracticed": 210,     "totalQuestions": 340,     "accuracy": 68,     "avgTime": 5.2   },   "domains": [     {       "domain": "Java",       "mastery": 58,       "categories": [         { "name": "Core Java", "mastery": 70 },         { "name": "Concurrency", "mastery": 30 }       ],       "weakest": "Concurrency"     }   ],   "recommendations": [     {       "type": "SUBTOPIC",       "title": "Strengthen Concurrency Basics",       "reason": "Low accuracy in synchronization questions",       "estimatedMinutes": 45,       "route": "/practice/2031"     }   ],   "activity": {     "currentStreak": 6,     "weeklyAverage": 4   } } 1️⃣1️⃣ EMPTY & EDGE STATES New User (No Attempts) Friendly welcome message CTA: Start Learning No Recent Activity Encourage consistency Show past achievements 1️⃣2️⃣ ANALYTICS EVENTS Event Trigger dashboard_viewed Page load recommendation_clicked CTA domain_details_clicked Domain card resume_practice_clicked Resume 1️⃣3️⃣ ACCESSIBILITY Charts accessible via table fallback Cards tabbable Screen reader announces mastery % 1️⃣4️⃣ PERFORMANCE REQUIREMENTS API < 300ms Charts lazy-loaded No blocking renders 1️⃣5️⃣ PAGE COMPLETION DEFINITION ✔ Progress visible at a glance ✔ Next steps crystal clear ✔ Motivation reinforced ✔ Backend contract fixed     📄 PAGE 11 / 25 — DOMAIN PROGRESS DETAIL PAGE Route: /dashboard/domain/:domain Example Routes /dashboard/domain/java /dashboard/domain/python /dashboard/domain/devops Internal Page Code: UI-PAGE-DASHBOARD-DOMAIN Design Tier: Analytical / Strategy View User Intent Level: “Break my preparation for this domain down precisely and show me how to optimize it.” 1️⃣ WHY THIS PAGE EXISTS (VERY IMPORTANT) The overview dashboard shows status. This page shows strategy. It answers: Which categories are strong vs weak? Which subtopics are blocking progress? Where should effort be invested for max ROI? Without this page: Users practice randomly Weak areas persist unnoticed Mastery stalls 2️⃣ ACCESS & ENTRY CONDITIONS Entry Sources Source Route Dashboard Domain Card /dashboard/domain/:domain Recommendation CTA same Direct link same Authentication Required Domain must belong to user’s active learning paths 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Domain Header + Context ] [ Domain Mastery Summary ] [ Category Mastery Breakdown ] [ Subtopic Heatmap ] [ Trend & Improvement Chart ] [ Actionable Recommendations ] [ Footer ] 4️⃣ DOMAIN HEADER & CONTEXT 4.1 Header Content Domain Title (H1) Java — Backend Interview Progress Context Subtext Role: Backend Engineer · Experience: 1–3 years Quick Actions (Right) Resume Practice Change Experience Level 5️⃣ DOMAIN MASTERY SUMMARY (HIGH-LEVEL KPI) 5.1 Purpose Immediate readiness signal for this domain. 5.2 Metrics Displayed Domain Mastery: 58% Questions practiced: 210 / 340 Accuracy: 65% Avg time/question: 5.4 min 5.3 Visual Design Horizontal mastery bar Color gradient: Red < 40% Amber 40–70% Green > 70% 6️⃣ CATEGORY MASTERY BREAKDOWN (CORE SECTION) 6.1 Purpose Expose where depth is missing. 6.2 Category Cards (Expandable) Each category row shows: Field Description Category Name Core Java Mastery % 70% Questions 60 Accuracy 72% Avg Time 4.8 min Weak Indicator Optional CTA View Details 6.3 Example Category Row Core Java Mastery: 70%   Accuracy: 72%   Avg Time: 4.8 min   Subtopics: • JVM Basics — 100% • OOP Principles — 60% • Java Memory Model — 20% ⚠️   [ View Subtopics → ] Navigation /dashboard/domain/java/category/core-java 7️⃣ SUBTOPIC HEATMAP (HIGH-IMPACT VISUAL) 7.1 Purpose Show weak points instantly. 7.2 Heatmap Design Grid layout Each cell = subtopic Color intensity based on mastery % Color Meaning Dark Green >80% Light Green 60–80% Yellow 40–60% Red <40% Interaction Hover → tooltip (stats) Click → practice subtopic Tooltip Content Java Memory Model Mastery: 20% Accuracy: 35% Avg Time: 7.2 min Attempts: 5 8️⃣ TREND & IMPROVEMENT CHART 8.1 Purpose Show momentum, not just snapshot. 8.2 Chart Content X-axis: last 30 practice days Y-axis: mastery % Line graph per category (toggleable) Insights Displayed Improving categories Stagnant categories Declining accuracy (warning) 9️⃣ ACTIONABLE RECOMMENDATIONS (STRATEGIC) 9.1 Purpose Guide effort intelligently. 9.2 Recommendation Types Critical Weak Subtopic High-ROI Category Consistency Improvement Mock Interview Readiness Example Recommendation Critical Gap: Java Memory Model   You have low accuracy and high time spent on memory-related questions.   Recommended Action: Practice JVM Memory subtopic (30 min)   [ Start Practice → ] 🔟 BACKEND DATA CONTRACT API GET /api/v1/dashboard/domain/{domain} Response (EXACT) {   "domain": "Java",   "role": "Backend",   "experience": "1-3",   "mastery": 58,   "categories": [     {       "name": "Core Java",       "mastery": 70,       "accuracy": 72,       "avgTime": 4.8,       "subtopics": [         {           "name": "Java Memory Model",           "mastery": 20,           "accuracy": 35,           "avgTime": 7.2         }       ]     }   ],   "recommendations": [     {       "type": "SUBTOPIC",       "target": "Java Memory Model",       "priority": "HIGH",       "route": "/practice/2033"     }   ],   "trend": {     "last30Days": [       { "date": "2026-02-01", "mastery": 52 }     ]   } } 1️⃣1️⃣ EDGE & EMPTY STATES No Activity “No practice data yet for this domain.” CTA: Start learning Partial Data Gracefully degrade charts Show info banners 1️⃣2️⃣ ANALYTICS EVENTS Event Trigger domain_dashboard_viewed Page load category_clicked Category expand heatmap_cell_clicked Subtopic recommendation_clicked CTA 1️⃣3️⃣ ACCESSIBILITY Heatmap has text fallback Charts have data tables Keyboard navigation supported 1️⃣4️⃣ PERFORMANCE REQUIREMENTS API < 350ms Charts lazy-loaded Heatmap virtualized if large 1️⃣5️⃣ PAGE COMPLETION DEFINITION ✔ Domain strategy visible ✔ Weak areas obvious ✔ Actionable next steps ✔ Backend contract locked 📄 PAGE 12 / 25 — WEAK AREAS DEEP DIVE Route: /dashboard/weak-areas Example Routes /dashboard/weak-areas (Optional filtered) /dashboard/weak-areas?domain=java Internal Page Code: UI-PAGE-WEAK-AREAS Design Tier: Diagnostic / Optimization User Intent Level: “Tell me exactly what I’m bad at, why, and how to fix it fast.” 1️⃣ WHY THIS PAGE EXISTS (NON-NEGOTIABLE) Most learning platforms stop at scores. This page goes further and answers: Which exact concepts are failing me? Is it accuracy, speed, or consistency? What should I practice first for maximum ROI? Without this page: Users repeat the same mistakes Practice becomes inefficient Senior-level readiness is impossible 2️⃣ ACCESS & ENTRY CONDITIONS Entry Sources Source Route Dashboard Snapshot /dashboard/weak-areas Attempt Summary CTA same Recommendation CTA same Authentication Required Must have at least one attempt 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Weak Areas Overview Header ] [ Weakness Summary Metrics ] [ Weak Areas Ranked List ] [ Root Cause Analysis Panels ] [ Targeted Practice Actions ] [ Footer ] 4️⃣ WEAK AREAS OVERVIEW HEADER 4.1 Purpose Frame weaknesses as actionable, not discouraging. 4.2 Header Content Title (H1) Your Weak Areas Supporting Text These topics are holding back your overall interview readiness. Focused practice here will give the highest improvement. 5️⃣ WEAKNESS SUMMARY METRICS (QUICK DIAGNOSIS) 5.1 Metrics Displayed (CARDS) Weak Subtopics Count Lowest Accuracy Highest Avg Time Most Skipped Area Example Weak Subtopics: 5 Lowest Accuracy: 28% Highest Avg Time: 8.4 min Most Skipped: Java Memory Model 6️⃣ WEAK AREAS RANKED LIST (CORE SECTION) 6.1 Purpose Prioritize effort scientifically. 6.2 Ranking Algorithm (BACKEND LOGIC) Weakness Score = (1 - accuracy) × weight_accuracy + (avg_time / expected_time) × weight_time + skip_rate × weight_skip Weights: Accuracy: 0.5 Time: 0.3 Skip: 0.2 6.3 WEAK AREA CARD — FULL CONTRACT Each weak area card MUST include: Domain Category Subtopic Weakness Score Accuracy % Avg Time Attempts Count Primary Cause Recommended Action 6.4 Example Weak Area Card Java → Core Java → Java Memory Model   Weakness Score: 82 (High)   Accuracy: 28% Avg Time: 7.8 min Attempts: 6 Skipped: 2   Primary Issue: Conceptual misunderstanding of memory visibility and happens-before rules.   [ Practice This Subtopic → ] Navigation /practice/:subtopic-id 7️⃣ ROOT CAUSE ANALYSIS PANELS 7.1 Purpose Explain why the weakness exists. 7.2 Root Cause Types (AUTO-DETECTED) Conceptual Gap Slow Recall Overthinking Inconsistent Attempts Knowledge Decay 7.3 Example Root Cause Panel Root Cause: Conceptual Gap   You consistently spend more time than expected and answer incorrectly on first attempt, indicating weak foundational understanding. 8️⃣ TARGETED PRACTICE ACTIONS (CRITICAL) 8.1 Purpose Convert diagnosis → execution. 8.2 Action Types Focused Subtopic Practice Re-read Explanation Mixed Practice Set Timed Drill 8.3 Example Action Card Recommended Action: Focused Practice (30 min)   • Practice 6 JVM Memory questions • Review explanations immediately • Avoid skipping   [ Start Focused Practice → ] 9️⃣ FILTERS & CONTROLS Filters Domain Category Severity (High / Medium / Low) Cause Type Sorting Highest Weakness First (default) Lowest Accuracy Highest Time 🔟 BACKEND DATA CONTRACT API GET /api/v1/dashboard/weak-areas Response (EXACT SHAPE) {   "summary": {     "weakSubtopics": 5,     "lowestAccuracy": 28,     "highestAvgTime": 8.4,     "mostSkipped": "Java Memory Model"   },   "weakAreas": [     {       "domain": "Java",       "category": "Core Java",       "subtopic": "Java Memory Model",       "subtopicId": 2033,       "weaknessScore": 82,       "accuracy": 28,       "avgTime": 7.8,       "attempts": 6,       "skipped": 2,       "primaryCause": "CONCEPTUAL_GAP",       "recommendedAction": {         "type": "FOCUSED_PRACTICE",         "estimatedMinutes": 30,         "route": "/practice/2033"       }     }   ] } 1️⃣1️⃣ EMPTY & EDGE STATES No Weak Areas “Great job! No critical weak areas detected.” CTA: Try mock interview Insufficient Data “Practice more questions to identify weak areas.” CTA: Resume learning 1️⃣2️⃣ ANALYTICS EVENTS Event Trigger weak_areas_viewed Page load weak_area_clicked Practice CTA filter_applied Filter root_cause_expanded Panel open 1️⃣3️⃣ ACCESSIBILITY Cards keyboard navigable Severity announced by screen reader Color + text indicators (no color-only meaning) 1️⃣4️⃣ PERFORMANCE REQUIREMENTS API < 300ms Lazy-load root cause panels No blocking calculations on UI 1️⃣5️⃣ PAGE COMPLETION DEFINITION ✔ Weaknesses prioritized ✔ Root causes explained ✔ Fix path clear ✔ Backend logic locked     📄 PAGE 13 / 25 — RECOMMENDATIONS & LEARNING FEED Route: /dashboard/recommendations Internal Page Code: UI-PAGE-RECOMMENDATIONS Design Tier: Personalization / Retention User Intent Level: “Tell me exactly what I should work on next—without me thinking.” 1️⃣ WHY THIS PAGE EXISTS (VERY IMPORTANT) Even motivated users stall when they must decide what next. This page: Eliminates decision fatigue Converts analytics → actions Keeps users returning daily Adapts as the user improves Without this page: Dashboard becomes passive Users practice randomly Long-term retention drops 2️⃣ ACCESS & ENTRY CONDITIONS Entry Sources Source Route Dashboard CTA /dashboard/recommendations Bottom Action Bar same Post-attempt CTA same Authentication Required 3️⃣ PAGE LAYOUT STRUCTURE (TOP → BOTTOM) [ Sticky Header ] [ Recommendation Header ] [ Priority Recommendations ] [ Daily Focus Section ] [ Skill Reinforcement Suggestions ] [ Exploration / Stretch Goals ] [ Footer ] 4️⃣ RECOMMENDATION HEADER 4.1 Purpose Set expectation: this page is smart. 4.2 Header Content Title (H1) Recommended for You Supporting Text Based on your recent practice, accuracy, speed, and goals. 5️⃣ PRIORITY RECOMMENDATIONS (CRITICAL SECTION) 5.1 Purpose Surface highest ROI actions first. 5.2 Recommendation Priority Order (SYSTEM LOGIC) Critical weak subtopics Recently failed questions Incomplete categories Consistency gaps Mock interview readiness 5.3 PRIORITY RECOMMENDATION CARD — FULL CONTRACT Each card MUST include: Priority Label (Critical / High / Medium) Recommendation Title Reason (Data-backed) Expected Outcome Estimated Time Primary CTA 5.4 Example Priority Card CRITICAL   Fix Java Memory Model Gaps   Your accuracy is 28% with higher-than-average time spent on memory visibility questions.   Expected Impact: +8–12% overall mastery   Estimated Time: 30 minutes   [ Start Focused Practice → ] CTA Route /practice/2033 6️⃣ DAILY FOCUS SECTION (HABIT BUILDER) 6.1 Purpose Encourage small, consistent progress. 6.2 Daily Focus Logic Max 20–30 minutes Mix of: 1 weak question 1 reinforcement question 1 confidence builder 6.3 Daily Focus Card Example Today's Focus (20 minutes)   1. Retry: JVM Memory Visibility (Medium) 2. Review: JVM Architecture (Easy) 3. Practice: OOP Principles (Easy)   [ Start Daily Focus → ] CTA Behavior Starts mini practice session Tracks streak impact 7️⃣ SKILL REINFORCEMENT SUGGESTIONS 7.1 Purpose Prevent knowledge decay. 7.2 Reinforcement Criteria Previously strong topics Not practiced in last 14 days Accuracy > 75% historically 7.3 Example Reinforcement Card Reinforce: Collections Framework   You haven't practiced this topic in 16 days. Accuracy was strong (82%).   Estimated Time: 15 minutes   [ Quick Review → ] 8️⃣ EXPLORATION / STRETCH GOALS 8.1 Purpose Enable controlled growth. 8.2 When Shown Overall mastery > 60% Weak areas under control 8.3 Example Stretch Card Stretch Goal: Advanced Concurrency   Prepare for senior-level interviews by exploring advanced threading patterns.   Estimated Time: 45 minutes   [ Explore Topic → ] 9️⃣ FILTERS & CONTROLS Filters Time available (15 / 30 / 60 min) Domain Difficulty Goal (Fix weakness / Improve speed / Stretch) Sorting Highest Impact (default) Shortest Time Long-term Value 🔟 BACKEND RECOMMENDATION ENGINE (IMPORTANT) API GET /api/v1/recommendations Recommendation Scoring (SIMPLIFIED) score = (weakness_score × 0.4) + (recency_penalty × 0.2) + (consistency_gap × 0.2) + (goal_alignment × 0.2) Response (EXACT SHAPE) {   "priority": [     {       "type": "SUBTOPIC",       "priority": "CRITICAL",       "title": "Fix Java Memory Model Gaps",       "reason": "Low accuracy and high time spent",       "impact": "+10% mastery",       "estimatedMinutes": 30,       "route": "/practice/2033"     }   ],   "dailyFocus": {     "estimatedMinutes": 20,     "items": [       { "type": "RETRY", "questionId": 5009 },       { "type": "REVIEW", "questionId": 5001 },       { "type": "PRACTICE", "subtopicId": 1002 }     ]   },   "reinforcement": [     {       "subtopic": "Collections Framework",       "estimatedMinutes": 15,       "route": "/subtopic/1102"     }   ],   "stretch": [     {       "subtopic": "Advanced Concurrency",       "estimatedMinutes": 45,       "route": "/subtopic/2101"     }   ] } 1️⃣1️⃣ EMPTY & EDGE STATES No Recommendations “You're on track! Continue practicing regularly.” CTA: Resume learning New User Show onboarding guidance Link to learning path 1️⃣2️⃣ ANALYTICS EVENTS Event Trigger recommendations_viewed Page load recommendation_clicked CTA daily_focus_started Start stretch_goal_clicked Explore 1️⃣3️⃣ ACCESSIBILITY Cards keyboard navigable Priority labels read aloud Filters accessible 1️⃣4️⃣ PERFORMANCE REQUIREMENTS API < 300ms Recommendations cached No blocking UI 3d and animation and classy and premium all are missing so put all og them and try to make it ight, less densed boxes, smooth movements animated version. and mac styled screenshot on home for ex