@reactdevmastery/content

Static course content for ReactDevMastery — topics, concepts, quizzes, flashcards, challenges, learn components, and interactive visualizers.

Installation

npm install @reactdevmastery/content

Requires React 18+ as a peer dependency.

Usage

Data only (no React required)

import { TOPICS, CONCEPTS, QUIZZES, FLASHCARDS } from '@reactdevmastery/content/data';
import { CHALLENGES } from '@reactdevmastery/content/data';
import { INTERVIEW_CATEGORIES, ALL_QUESTIONS } from '@reactdevmastery/content/data';

React components

import { LEARN_COMPONENTS, VISUALIZERS } from '@reactdevmastery/content/components';

// Render a learn component for a concept
const LearnComponent = LEARN_COMPONENTS['event-loop'];
<LearnComponent />

// Render a visualizer
const Visualizer = VISUALIZERS['event-loop'];
<Visualizer />

Everything at once

import { TOPICS, LEARN_COMPONENTS, VISUALIZERS } from '@reactdevmastery/content';

What's included

| Export | Description | |---|---| | TOPICS | Array of all 35+ topic definitions | | LEARNABLE_IDS | Topic IDs that have learn content | | CONCEPTS | Map of topic-id → concept list | | QUIZZES | Map of concept-id → quiz questions | | FLASHCARDS | Array of flashcard Q&A pairs | | CONTENT | Map of concept-id → rich content | | CHALLENGES | Map of concept-id → coding challenges | | INTERVIEW_CATEGORIES | Categorised interview questions | | ALL_QUESTIONS | Flat array of all interview questions | | ANSWERS | Map of question-id → detailed answer | | LEARN_COMPONENTS | Map of concept-id → React learn component | | VISUALIZERS | Map of concept-id → React visualizer component |

Package structure

@reactdevmastery/content
├── /data        → pure data, no React (TOPICS, QUIZZES, etc.)
└── /components  → React components (LEARN_COMPONENTS, VISUALIZERS)

Use sub-path imports for better tree-shaking — only import /components if you actually render them.

License

MIT