diff --git a/src/data/roadmaps/frontend/courses.json b/src/data/roadmaps/frontend/courses.json
new file mode 100644
index 000000000..062e0cb54
--- /dev/null
+++ b/src/data/roadmaps/frontend/courses.json
@@ -0,0 +1,16 @@
+[
+  {
+    "id": "1",
+    "title": "HTML in 50 days",
+    "description": "Learn HTML in 50 days",
+    "url": "https://www.youtube.com/watch?v=xR33433-EE",
+    "topicIds": ["348318888", "234837387834"]
+  },
+  {
+    "id": "2",
+    "title": "CSS in 50 days",
+    "description": "Learn HTML in 50 days",
+    "url": "https://www.youtube.com/watch?v=xR33433-EE",
+    "topicIds": ["348318888", "234837387834"]
+  }
+]
diff --git a/src/pages/[roadmapId]/courses.json.ts b/src/pages/[roadmapId]/courses.json.ts
new file mode 100644
index 000000000..20155b72c
--- /dev/null
+++ b/src/pages/[roadmapId]/courses.json.ts
@@ -0,0 +1,33 @@
+import type { APIRoute } from 'astro';
+import { getRoadmapIds } from '../../lib/roadmap.ts';
+
+export async function getStaticPaths() {
+  const coursesJsons: Record<string, any> = import.meta.glob(
+    '/src/data/roadmaps/**/courses.json',
+    {
+      eager: true,
+    },
+  );
+
+  const roadmapIds = await getRoadmapIds();
+
+  return roadmapIds.map((roadmapId) => ({
+    params: {
+      roadmapId,
+    },
+    props: {
+      courses:
+        coursesJsons[`/src/data/roadmaps/${roadmapId}/courses.json`]?.default ||
+        {},
+    },
+  }));
+}
+
+export const GET: APIRoute = async function ({ params, request, props }) {
+  return new Response(JSON.stringify(props.courses), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};