freeCodeCamp/freeCodeCamp — freeCodeCamp Platform Architecture
Transcript
QuickFacts
Welcome! Today we're exploring the freeCodeCamp platform—a massive open-source project that's taught millions of people to code. Let's take a friendly tour through its architecture and see how all the pieces fit together.
PlainEnglish
At its heart, freeCodeCamp is a learning platform. You pick a track—say, Responsive Web Design—and work through challenges step by step. Each challenge has instructions, a code editor, and automated tests. When your code passes, you move on. Complete enough challenges, and you earn a certificate. The whole experience is free, funded by donations.
Architecture
The codebase is a monorepo with three main apps and a handful of shared packages. The API folder holds the Fastify backend that handles sign-ins and database writes. Client is the Gatsby frontend—what learners see. Curriculum is the content pipeline that turns sixteen thousand Markdown files into a single JSON artifact. Shared packages like challenge-builder let all three apps reuse code. Turbo orchestrates builds so you only rebuild what changed.
QuickFacts
Let's peek under the hood at the tech choices. The whole stack is TypeScript-first, running on Node twenty-four with pnpm and Turbo managing the workspace. The client uses Gatsby for static site generation, React for components, and Redux for state. Monaco Editor gives you that VS Code feel in the browser. The API runs on Fastify with Prisma talking to MongoDB. Auth0 handles logins, Stripe handles donations. Playwright tests the flows end to end, and Sentry keeps an eye on errors in production.
PlainEnglish
Think of the curriculum folder as a textbook warehouse. You've got sixteen thousand loose Markdown pages, each describing one challenge—instructions, starter code, test rubric. The build script is like a printing press: it reads all those pages, validates them, and compiles them into a single bound volume called curriculum dot json. When Gatsby builds the site, it treats that JSON as the source of truth and generates thousands of static pages—one per challenge. So the Markdown is the source; the JSON is the compiled artifact.
Architecture
Here's how everything connects. The browser talks to the Gatsby client—a static site serving up challenge pages. When you complete a challenge, the client sends a POST to the Fastify API. The API uses Prisma to update your progress in MongoDB. At build time, the curriculum pipeline feeds JSON into Gatsby. For logins, the API hands off to Auth0. For donations, it talks to Stripe. It's a clean separation: the client handles the learning experience; the API guards the database.
Architecture
Let's trace a single challenge completion. You type code in the Monaco editor and click Run Tests. The challenge builder transpiles your code, bundles it, and runs the test assertions in a sandboxed iframe—no server round-trip yet. Tests pass or fail right there in your browser. When you see green checkmarks and click Submit, the client POSTs your completion to the API. The API validates the challenge ID, appends it to your completed challenges array in Mongo, and responds with a success. Your progress is saved, and you move on to the next step.
Architecture
The data model is straightforward. The user document lives in MongoDB and holds your email, username, and an array of completed challenges. Each completed challenge is an embedded object with the challenge ID and timestamp. When you finish all required challenges in a track, the API generates a certificate record. Prisma keeps everything type-safe, and an auto-increment extension tracks concurrent updates so the system knows if two devices submit at the same time.
Architecture
The API integrates with a handful of external services. Auth0 is the identity provider—no passwords are stored locally, just an Auth0 user ID. MongoDB is the primary data store, accessed through Prisma. Stripe handles all donation payments. Algolia powers the search bar on the client. Sentry captures errors and performance metrics in production. And GrowthBook manages feature flags so new features can roll out gradually. Each service has its own credentials stored in environment variables.
Community
We're working from a tarball snapshot, so we don't have live git history. But we can see that this repo is actively maintained on GitHub with thousands of contributors. The package files show recent dependency versions—Fastify five point eight, Gatsby five point sixteen, Prisma six point nineteen. Modern tooling like Turbo two point ten and TypeScript five point nine. The presence of CI workflows, Renovate config, and Husky hooks tells us this is a mature, well-tended project with a strong DevOps culture.
PlainEnglish
So there you have it—freeCodeCamp in a nutshell. Sixteen thousand challenges, all living as Markdown files. A build pipeline that compiles them into JSON. A Gatsby frontend that turns that JSON into thousands of static pages. A Fastify API that guards the database and handles OAuth, donations, and certificates. And a monorepo structure that keeps everything tidy, testable, and composable. It's a beautiful example of how to scale an educational platform while staying open-source and contributor-friendly.
How this was made
Lenzon read freeCodeCamp/freeCodeCamp and generated this walkthrough automatically. The narration above is the transcript of what it says.
Explain a pull request from your own repo
Point Lenzon at a repo or a pull request and get a narrated walkthrough like this one.
Try it