build-app

/build-app — Rebuild Learning App Data

Usage

/learning-dna:build-app — rebuild all topics /learning-dna:build-app <topic> — rebuild a specific topic

Flow

Step 1: Scan Knowledge Directory

• Scan knowledge/ for topics with content (directories containing sources/ with markdown files)
• If a specific topic is provided, only process that topic
• Skip directories without source content

Step 2: Application Structure Setup

Only runs when learning-app/ does not exist. If the app already exists, skip to Step 3.

Set up the foundational project before any components are built:

1. Initialize a React 19 + TypeScript + Vite 6 + Tailwind CSS 4 project in learning-app/
2. Add Mermaid 11 for diagram rendering and React Router for routing
3. Create the full directory structure:

   learning-app/
     src/
       components/    # Reusable components (TTSReader, Layout, Sidebar, Navbar, Footer)
       contexts/      # React Context providers
       hooks/         # Custom hooks (useTTS, useIndexedDB, useProgress)
       pages/         # Page components (Welcome, TopicHome, TopicDetail, Quiz, QuizStatus)
       data/          # Generated JSON data files
       types/         # TypeScript type definitions
       lib/           # Utility functions (IndexedDB loader)
     scripts/         # Parse scripts for knowledge → JSON
   

4. Create src/types/index.ts with all TypeScript interfaces upfront (see Step 3 for the full type definitions)
5. Set up React Router with placeholder routes:
   • / — Welcome page
   • /quiz-status — Quiz status page
   • /:topic — Topic home page
   • /:topic/:subtopic — Topic detail page
   • /:topic/quiz — Quiz page
6. Install all dependencies, configure Vite and Tailwind

Step 3: Data Model — React Context

Create a LearningContext in src/contexts/LearningContext.tsx that replaces all localStorage-based state management.

TypeScript Interfaces (in src/types/index.ts)

interface AppState {
  topics: Topic[];
  topicProgress: Record<string, TopicProgress>;
}

interface Topic {
  slug: string;
  name: string;
  subtopics: string[];
}

interface TopicProgress {
  learningStatus: boolean;
  quizStatus: boolean;
  lastScore: QuizScore | null;
  subtopicStatus: Record<string, 'completed' | 'in-progress' | 'not-started'>;
  lastVisited: string | null;
}

interface QuizScore {
  total: number;
  correct: number;
  breakdown: {
    easy: [number, number];
    medium: [number, number];
    hard: [number, number];
  };
}