ACVE/frontend_plan.md

ACVE Frontend Product Plan (MVP-first, Fully Mapped UX)

Purpose

Give a complete, navigable frontend experience (even if powered by mock data) that illustrates the full platform: learner flow, teacher flow, auth, course creation, uploads, and admin surfaces. This is intended to be the living blueprint for backend integration.

Principles

• Every button leads somewhere (even if placeholder).
• Every flow is complete end-to-end, including empty states.
• Mock data must map to real schema terms to reduce backend mismatch.
• Logged-out and logged-in states are always distinct and testable.
• Teacher-only actions are visible only where appropriate, but teacher onboarding should be clear.

Target Roles

• Visitor (logged out)
• Learner (logged in)
• Teacher (logged in, teacher role)
• Org Admin (future, placeholder-only)
• Super Admin (future, placeholder-only)

Core Navigation Map

Top nav:

• Home
• Courses
• Case Studies
• Practice
• AI Assistant
• Auth (Login/Sign up or Account menu)

Global flows:

• Auth gating for: course player, practice modules, teacher dashboard.
• Visitor can browse marketing and course detail pages.

User Journey: Visitor -> Learner

1. Home
   • CTA: “Start Learning” -> /courses
   • CTA: “Explore Courses” -> /courses
2. Courses list
   • Filter by level
   • Course cards show title, summary, instructor, rating, lessons, weeks
   • CTA on card: “View Course” -> /courses/[slug]
3. Course detail
   • Shows course description and “Start Course” button
   • If logged out: CTA “Login to start” -> /auth/login?redirectTo=/courses/[slug]/learn
4. Login / Signup
   • Email/password login
   • “Are you a teacher? Login here” (teacher hint CTA)
5. After login
   • Redirect back to requested page or /courses
6. Course player
   • Lesson list with lock state for non-preview lessons if logged out
   • Progress tracking
   • “Mark complete” updates local progress

User Journey: Teacher

1. Teacher login entry points
   • Login page: “Are you a teacher? Login here” -> /auth/login?role=teacher (frontend-only)
   • Navbar: “Teacher Dashboard” visible when role=teacher (or local mock toggle)
2. Teacher dashboard
   • List teacher-created courses (mock/localStorage)
   • CTA: “Create Course” -> /teacher/courses/new
3. Create course
   • Title, level, summary, instructor, weeks
   • Creates a local course stub with one intro lesson
   • Redirect to edit course page
4. Edit course
   • Update details
   • List lessons
   • CTA: “Add lesson” -> /teacher/courses/[slug]/lessons/new
5. Add lesson
   • Title, type (video/reading/interactive), duration
   • Video: field for placeholder URL or “Upload video” (mock)
   • Save -> returns to edit page
6. Course publish flow (mock)
   • Add “Status” selector (Draft/Published)
   • Published courses appear in public catalog

Planned Screens (Additions/Upgrades)

Auth

• Login page
  • Add teacher CTA
  • Add “Forgot password” placeholder
• Signup page
  • Add “I am a teacher” checkbox (frontend only)
  • Show note: “Teacher accounts are approved by admin” (placeholder)

Teacher Surfaces

• /teacher
  • Add stats cards (mock)
  • Add “Upload library” link (placeholder)
• /teacher/courses/[slug]/edit
  • Add modules section (placeholder UI)
  • Add reorder UI (drag handles, non-functional)
• /teacher/uploads
  • Upload manager placeholder with file list

Learner Surfaces

• /courses/[slug]/learn
  • Add sidebar module grouping (placeholder)
  • Add resource downloads section (placeholder)
• /practice/[slug]
  • Add attempt history (mock)

Org Admin (future placeholder)

• /org
  • Team seats, usage, course assignments (placeholder only)

Data Strategy (Frontend)

• Current:
  • Course catalog: mockCourses + local teacher courses
  • Practice: mock modules
  • Case studies: mock
  • Progress: localStorage (per userId or guest)
• Future API mapping (for backend):
  • Courses -> Prisma Course, Module, Lesson
  • Teachers -> Profile role=TEACHER
  • Uploads -> Resource or Lesson video URL
  • Progress -> UserProgress

Page-by-Page Spec

/ (Home)

• Hero, highlights, CTA
• Quick links to courses/case studies/practice

/courses

• Tabs for levels
• Grid of cards
• Badge for status (Draft/Published) for teacher

/courses/[slug]

• Course overview
• “Start Course” button (auth-gated)

/courses/[slug]/learn (Protected)

• Lesson list
• Lesson viewer with placeholders
• Progress bar

/practice

• Modules list

/practice/[slug] (Protected)

• Quiz flow

/case-studies

• Case list + active preview

/case-studies/[slug]

• Full case view

/assistant

• Full page assistant UI

/auth/login

• Login form
• CTA: teacher login

/auth/signup

• Signup form
• Teacher checkbox (placeholder)

/teacher (Protected)

• Dashboard
• Create course

/teacher/courses/new (Protected)

• Create course form

/teacher/courses/[slug]/edit (Protected)

• Edit course
• Lesson list

/teacher/courses/[slug]/lessons/new (Protected)

• Add lesson

/teacher/uploads (Protected)

• Placeholder upload UI

/org (Protected)

• Placeholder org admin dashboard

UX/Content Notes

• All teacher-only actions should be labeled “Teacher only” if role is not teacher.
• No real upload yet: use “Upload disabled in MVP” messaging.
• Show consistent empty states with CTA.

Implementation Notes (Frontend)

• Use localStorage for teacher-created courses and uploads.
• Use event emitters to re-render lists when localStorage updates.
• Keep schema-aligned data shapes for easy backend swap.

Milestones

1. Complete teacher login CTA + role hints
2. Teacher flows: create/edit/lessons + placeholder uploads
3. Course player: modules/resources placeholders
4. Org admin placeholder
5. UI polish & copy pass

Implementation Checklist (Living)

Status key: TODO | IN PROGRESS | DONE

Auth & Entry Points

• DONE Add teacher CTA on /auth/login and /auth/signup
• DONE Add “Forgot password” placeholder link
• DONE Add teacher invite-only note on signup
• DONE Add role hint handling (role=teacher) for copy changes

Navigation & Role Visibility

• DONE Show “Teacher Dashboard” link when teacher role is detected (allowlist-based)
• DONE Add non-teacher “Teacher only” labels where relevant

Teacher Dashboard & Course Ops

• DONE Add stats cards (mock)
• DONE Add course publish status selector (Draft/Published)
• DONE Ensure published teacher courses appear in public catalog
• DONE Add lesson reordering UI (non-functional)

Teacher Upload Library

• DONE Create /teacher/uploads placeholder page
• DONE Add upload list with mock assets
• DONE Add “Attach to lesson” picker placeholder
• DONE Add “Upload disabled in MVP” messaging

Course Player Enhancements

• DONE Add module grouping sidebar (placeholder)
• DONE Add resources/downloads section (placeholder)

Practice Enhancements

• DONE Add attempt history block (mock)

Org Admin Placeholder

• DONE Create /org placeholder dashboard (seats, usage, assignments)

UI/Copy Polish

• DONE Empty state consistency pass
• DONE Microcopy alignment with schema terminology

Progress Log

• 2026-02-10: Implementation checklist added.
• 2026-02-10: Added teacher CTA, invite-only copy, role-aware login copy, and forgot-password placeholder.
• 2026-02-10: Added Supabase config validation fallback so malformed env values do not crash frontend; app continues in placeholder mode.
• 2026-02-10: Added demo auth fallback credentials + cookie session for frontend-only development and allowlist-based teacher navbar visibility.
• 2026-02-10: Added teacher upload library placeholder flow (/teacher/uploads) with mock assets, attach picker, and dashboard link/stats.
• 2026-02-10: Added visible "Teacher only" label in navbar for logged-in non-teachers.
• 2026-02-10: Added teacher course status workflow (Draft/Published), public catalog filtering for teacher courses, and lesson reorder placeholder controls.
• 2026-02-10: Added course player module/resource placeholders, mock practice attempt history, and protected org placeholder dashboard.
• 2026-02-10: Completed UX/copy polish pass for status visibility and placeholder consistency.

Open Questions

Resolved:

• Teacher approval is invite-only.
• Teacher roles are determined by email allowlist.
• Uploads go to a central library (“cloud”) and can be assigned to lessons/courses (reusable assets).