Page: Creator Studio

Code: STUD Route: /dashboard/creator/studio Access: Creator Priority: P0 Test Script: scripts/page-tests/test-STUD.sh Components: src/components/creator/CreatorStudio.tsx

Purpose

Course creation and management interface for Creators to build, edit, publish, and manage their courses and curriculum.


Connections

Incoming (users arrive from)

Source Trigger Notes
CDSH "Creator Studio" / "Manage Courses" From dashboard
CDSH "Create New Course" Direct to new course
Nav "Studio" link (Creators) Global navigation
CDET "Edit Course" (own course) Edit specific course

Outgoing (users navigate to)

Target Trigger Notes
CDSH "Dashboard" / back Return to dashboard
CDET "Preview Course" View public course page
CPRO "View Profile" See creator profile

Data Requirements

Entity Fields Used Purpose
courses All fields Course creation/editing
course_curriculum All fields Module management
course_objectives objective, display_order Learning objectives
course_includes item, display_order Included items
course_prerequisites type, content, display_order Prerequisites
course_target_audience description, display_order Target audience
course_tags tag Course tags
categories id, name Category selection
peerloop_features All fields Feature toggles
homework_assignments All fields Homework management
session_resources All fields Course resources

Sections

Studio Header

  • "Creator Studio" title
  • "New Course" button
  • "Dashboard" link → CDSH

Course List (Main View: `/studio`)

  • Grid/list of creator's courses
  • Each shows:
  • "Create New Course" CTA

Course Editor (Edit View: `/studio/:course_id`)

Left Sidebar - Navigation

  • Course Settings
  • Basic Info
  • Curriculum
  • Homework
  • Resources
  • Objectives & Includes
  • Prerequisites
  • Pricing
  • Student-Teachers
  • Publishing

Section: Basic Info

  • **Title:** Text input
  • **Slug:** Auto-generated, editable
  • **Tagline:** Short description (150 chars)
  • **Description:** Rich text editor
  • **Thumbnail:** Image upload
  • **Category:** Dropdown
  • **Level:** Beginner/Intermediate/Advanced
  • **Tags:** Tag input (multiple)

Section: Curriculum

  • **Module List:**
  • **Per Module:**
  • "Add Module" button
  • Bulk import (future)

Section: Homework

  • **Assignment List:**
  • **Per Assignment (Edit):**
  • **Actions:**
  • **Source:** Brian Review 2025-12-26

Section: Resources

  • **Resource List:**
  • **Upload:**
  • **Resource Types:**
  • **Note:** Session recordings appear automatically after sessions
  • **Source:** Brian Review 2025-12-26

Section: Objectives & Includes

  • **Learning Objectives:**
  • **What's Included:**

Section: Prerequisites

  • **Required:**
  • **Nice to Have:**
  • **Not Required:**

Section: Target Audience

  • List of audience descriptions
  • Who is this course for?

Section: Pricing

  • **Price:** Currency input (cents → dollars display)
  • **Currency:** Dropdown (default USD)
  • **Lifetime Access:** Toggle
  • **Certificate:** Toggle + certificate name

Section: PeerLoop Features

  • **1-on-1 Teaching:** Toggle
  • **Certified Teachers:** Toggle
  • **Earn While Teaching:** Toggle
  • **Teacher Commission:** Percentage input

Section: Student-Teachers

  • List of certified STs for this course
  • Pending applications
  • Approve/revoke certification
  • Link to TDSH for each ST

Section: Publishing

  • **Status:** Draft / Published / Retired
  • **Publish** button (if draft)
  • **Unpublish** button (if published)
  • **Preview** → CDET
  • Publishing checklist:

User Stories Fulfilled

  • US-C001: Create new course
  • US-C002: Edit course details
  • US-C003: Manage course content/curriculum
  • US-C010: Set course pricing
  • US-C034: Publish/unpublish courses

States & Variations

State Description
Course List Viewing all courses
New Course Creating new course (empty form)
Editing Draft Editing unpublished course
Editing Published Editing live course (with warnings)
Publishing Publishing flow with checklist
No Courses Empty state, "Create your first course"

Mobile Considerations

  • Course list is primary on mobile
  • Editor sections become full-screen views
  • Simplified drag-and-drop for curriculum
  • Critical actions (save, publish) always visible

Error Handling

Error Display
Save fails "Unable to save. Please try again."
Publish fails "Unable to publish. Check required fields."
Image upload fails "Unable to upload image. Try again."
Slug conflict "This URL is already taken. Choose another."

Analytics Events

Event Trigger Data
`page_view` Page load view (list/edit), course_id
`course_created` New course started -
`course_updated` Changes saved course_id, fields_changed
`course_published` Published course_id
`course_unpublished` Unpublished course_id
`module_added` Module created course_id
`module_reordered` Modules reordered course_id

Planned API Calls

Endpoint When Purpose
GET /api/courses/:id Edit view Course details
POST /api/courses Create new Create course
PUT /api/courses/:id Save changes Update course
DELETE /api/courses/:id Delete Remove course
GET /api/courses/:id/curriculum Edit view Module list
POST /api/courses/:id/curriculum Add module Create module
PUT /api/courses/:id/curriculum/:module_id Edit module Update module
PUT /api/courses/:id/curriculum/reorder Drag-drop Reorder modules
DELETE /api/courses/:id/curriculum/:module_id Delete module Remove module
PUT /api/courses/:id/publish Publish Set status published
PUT /api/courses/:id/unpublish Unpublish Set status draft
POST /api/courses/:id/thumbnail Upload Upload thumbnail
GET /api/categories Edit view Category dropdown
GET /api/courses/:id/homework Homework section List assignments
POST /api/courses/:id/homework Add assignment Create homework
PUT /api/homework/:id Edit assignment Update homework
DELETE /api/homework/:id Delete assignment Remove homework
GET /api/courses/:id/resources Resources section List resources
POST /api/courses/:id/resources Upload resource Upload file to R2
DELETE /api/resources/:id Delete resource Remove resource

Notes

  • CD-019: Content is external (YouTube/Vimeo, Google Docs)
  • Consider auto-save for forms
  • Version history for course changes (future)
  • Duplicate course feature (future)
  • Analytics dashboard integration




Test Coverage

Component ✓ Page ○ SSR ○ API 1/3
Script: scripts/page-tests/test-STUD.sh
Page Test: tests/pages/dashboard/creator/studio.test.tsx
Component Test: tests/components/creator/CreatorStudio.test.tsx

API Tests

Endpoint Test File Status
(covered by index.test.ts) tests/api/me/courses/index.test.ts ✓ tested
GET /api/me/courses (list creator's courses) ○ pending
POST /api/me/courses (create new course) ○ pending