diff --git a/client/gatsby-node.js b/client/gatsby-node.js
index b68ccccd970..3967e5ac227 100644
--- a/client/gatsby-node.js
+++ b/client/gatsby-node.js
@@ -305,6 +305,7 @@ exports.createSchemaCustomization = ({ actions }) => {
msTrophyId: String
fillInTheBlank: FillInTheBlank
scene: Scene
+ transcript: String
quizzes: [Quiz]
}
type FileContents {
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index dfd72ee1447..9064a988a44 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -428,6 +428,7 @@
"questions": "Questions",
"answered-mcq": "You have unanswered questions and/or incorrect answers.",
"explanation": "Explanation",
+ "transcript": "Read a transcript of this video",
"solution-link": "Solution Link",
"source-code-link": "Source Code Link",
"ms-link": "Microsoft Link",
diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts
index f77f09f2701..2201117d07c 100644
--- a/client/src/redux/prop-types.ts
+++ b/client/src/redux/prop-types.ts
@@ -221,6 +221,7 @@ export type ChallengeNode = {
template: string;
tests: Test[];
title: string;
+ transcript: string;
translationPending: boolean;
url: string;
usesMultifileEditor: boolean;
diff --git a/client/src/templates/Challenges/components/challenge-transcript.css b/client/src/templates/Challenges/components/challenge-transcript.css
new file mode 100644
index 00000000000..4a15e1069cc
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-transcript.css
@@ -0,0 +1,3 @@
+.challenge-transcript {
+ cursor: pointer;
+}
diff --git a/client/src/templates/Challenges/components/challenge-transcript.tsx b/client/src/templates/Challenges/components/challenge-transcript.tsx
new file mode 100644
index 00000000000..ce21b734386
--- /dev/null
+++ b/client/src/templates/Challenges/components/challenge-transcript.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
+import PrismFormatted from './prism-formatted';
+
+import './challenge-transcript.css';
+
+interface ChallengeTranscriptProps {
+ transcript: string;
+}
+
+function ChallengeTranscript({
+ transcript
+}: ChallengeTranscriptProps): JSX.Element {
+ const { t } = useTranslation();
+
+ return (
+ <>
+ {t('learn.transcript')}
+