How the freeCodeCamp Curriculum Package Structures Learning Content: A JSON-Driven Hierarchy
The freeCodeCamp curriculum package structures learning content as a four-tier JSON hierarchy of certifications, superblocks, blocks, and challenges, enabling programmatic course assembly and lazy loading of challenge data.
The freeCodeCamp/freeCodeCamp repository organizes its entire learning platform through a modular curriculum package structure that separates course metadata from challenge content. This architecture allows the platform to generate certification paths, render lesson lists, and load individual challenges on demand without fetching unnecessary data. By examining the JSON manifests in the curriculum/structure/ directory, developers can understand how freeCodeCamp programmatically assembles its educational content.
The Four-Tier Hierarchy of the Curriculum Package Structure
The curriculum package structure implements a cascading hierarchy where each level references the next through ordered JSON arrays. This design ensures that the platform can traverse from a high-level certification down to individual coding exercises while maintaining strict ordering of lessons.
Certifications and Superblocks
At the apex of the curriculum package structure sits the curriculum.json manifest located at curriculum/structure/curriculum.json. This file defines two critical arrays:
superblocks– An ordered list of every major learning track available on the platformcertifications– The subset of superblocks that award verifiable credentials upon completion
According to the freeCodeCamp source code, superblocks represent broad educational domains such as "Responsive Web Design" or "JavaScript Algorithms and Data Structures." The separation between superblocks and certifications allows the platform to include elective learning paths that do not necessarily culminate in a credential.
Blocks as Lesson Collections
Each superblock references an array of blocks defined in individual JSON files within curriculum/structure/superblocks/. For example, the Responsive Web Design superblock configuration resides at curriculum/structure/superblocks/responsive-web-design.json and contains:
{
"blocks": [
"basic-html-and-html5",
"basic-css",
"applied-visual-design",
"applied-accessibility",
"responsive-web-design-principles",
"css-flexbox",
"css-grid"
]
}
The blocks array strictly orders the learning modules within the superblock, ensuring that students progress through prerequisite concepts before advancing to complex topics.
Challenges as Atomic Learning Units
Blocks themselves are defined in curriculum/structure/blocks/ and contain metadata plus an ordered list of challenge references. The Basic HTML and HTML5 block, stored at curriculum/structure/blocks/basic-html-and-html5.json, illustrates this structure:
{
"name": "Basic HTML and HTML5",
"dashedName": "basic-html-and-html5",
"helpCategory": "HTML-CSS",
"challengeOrder": [
{ "id": "bd7123c8c441eddfaeb5bdef", "title": "Say Hello to HTML Elements" },
{ "id": "bad87fee1348bd9aedf0887a", "title": "Headline with the h2 Element" }
],
"blockLayout": "legacy-challenge-list"
}
The challengeOrder array maps unique challenge IDs to human-readable titles, establishing the sequence of exercises students must complete. The actual challenge content—including instructions, test cases, and seed code—resides outside the curriculum package structure in src/challenges/ or similar directories, enabling lazy loading where the platform fetches challenge data only when a student selects a specific lesson.
Programmatically Accessing the Curriculum Package Structure
Developers can traverse the curriculum package structure programmatically to build custom course viewers or analytics tools. The following Node.js example demonstrates how to resolve the complete learning path for the Responsive Web Design certification:
import path from 'node:path';
import { readFileSync } from 'node:fs';
// 1. Load the top-level manifest
const manifest = JSON.parse(
readFileSync(
path.resolve('curriculum/structure/curriculum.json'),
'utf8'
)
);
// 2. Resolve a certification (e.g., "responsive-web-design")
const rwdSuperblock = manifest.superblocks.find(
name => name === 'responsive-web-design'
);
// 3. Load the superblock definition
const superblock = JSON.parse(
readFileSync(
path.resolve(`curriculum/structure/superblocks/${rwdSuperblock}.json`),
'utf8'
)
);
// 4. Iterate over its blocks and pull the ordered challenges
const course = superblock.blocks.map(blockName => {
const block = JSON.parse(
readFileSync(
path.resolve(`curriculum/structure/blocks/${blockName}.json`),
'utf8'
)
);
return {
block: block.name,
challenges: block.challengeOrder.map(ch => ({
id: ch.id,
title: ch.title
}))
};
});
console.log(JSON.stringify(course, null, 2));
This script reads curriculum.json, selects the target superblock, loads its block list, then pulls each block’s ordered challenges. The resulting course array mirrors the data structure the freeCodeCamp web UI uses to render the learning path.
Summary
The freeCodeCamp curriculum package structure implements a JSON-driven, four-tier hierarchy that cleanly separates course organization from content delivery:
curriculum.jsonserves as the master manifest, listing all superblocks and certifications- Superblock JSON files in
curriculum/structure/superblocks/group related blocks into major learning tracks - Block JSON files in
curriculum/structure/blocks/define lesson metadata and ordered challenge sequences viachallengeOrder - Challenge content remains external to the curriculum package, enabling lazy loading and modular content management
This architecture allows freeCodeCamp to programmatically assemble certification paths, maintain strict prerequisite ordering, and render course outlines without loading full challenge data until needed.
Frequently Asked Questions
How does the curriculum package structure handle challenge ordering?
The curriculum package structure enforces challenge sequencing through the challengeOrder array defined in each block’s JSON file. Located in curriculum/structure/blocks/*.json, this array contains objects with id and title properties that map to specific challenge files stored outside the curriculum package. The platform renders lessons in the exact order specified by this array, ensuring students complete prerequisite exercises before advancing.
What is the difference between a superblock and a certification in the curriculum package structure?
In the freeCodeCamp curriculum package structure, superblocks represent broad learning tracks defined in curriculum/structure/curriculum.json, while certifications are a subset of superblocks that award verifiable credentials. The certifications array in the master manifest identifies which superblocks culminate in a certificate upon completion of all constituent blocks. This distinction allows freeCodeCamp to offer elective superblocks that provide learning opportunities without formal certification requirements.
Where are the actual challenge files stored if not in the curriculum package structure?
While the curriculum package structure in curriculum/structure/ contains only metadata and challenge ordering via the challengeOrder arrays, the actual challenge content—including instructions, test cases, seed code, and solutions—resides in separate directories such as src/challenges/ or within the curriculum/challenges/ directory depending on the specific implementation version. This separation enables lazy loading, where the platform fetches full challenge data only when a student selects a specific lesson, significantly reducing initial page load times and memory usage.
How can developers programmatically access the curriculum package structure?
Developers can traverse the curriculum package structure by reading the JSON manifests directly from the file system. The process involves loading curriculum/structure/curriculum.json to retrieve the superblock list, then iterating through curriculum/structure/superblocks/*.json to resolve block names, and finally parsing curriculum/structure/blocks/*.json to extract the ordered challengeOrder arrays. As demonstrated in the Node.js example above, this approach allows custom tools to reconstruct complete certification paths, generate analytics, or build alternative course viewers while maintaining the exact sequencing defined by freeCodeCamp’s curriculum architects.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →