Architecture

TutorKit is structured as a monorepo managed by Turborepo and pnpm workspaces. This architecture allows us to cleanly separate the core interactive components from the visual builders and documentation.

Monorepo Structure

Here is a high-level overview of the workspaces in the repository:

Applications (apps/)

• apps/studio: A React application built with Vite that provides a visual interface for creating courses (Curriculum Builder) and customizing the UI (Theme Builder). It exports the curriculum as JSON.
• apps/docs: The documentation site you are currently reading, built using Next.js and Fumadocs.

Packages (packages/)

• packages/playground (tutorkit): The heart of TutorKit. This package exports the Playground React component, which handles rendering the file tree, Sandpack editor, instructions panel, and running client-side validations for challenges.
• packages/theme (tutorkit-theme): Contains shared types and default configurations for the visual themes used across the playground and studio.

Examples (examples/)

• examples/basic: A minimalistic Vite application demonstrating how to import and use the tutorkit package with a sample curriculum JSON.

Core Technologies

• React & TypeScript: The entire ecosystem is heavily typed with TypeScript and built using React.
• Sandpack: We utilize @codesandbox/sandpack-react to provide a robust, browser-based bundler and code editor environment.
• Vite: Used for the Studio and Examples for lightning-fast HMR and building.
• Turborepo: Optimizes the build and lint processes across all packages.