feat(client): add daily challenges (freeCodeCamp#60867)

Co-authored-by: Huyen Nguyen <[email protected]>

Author: moT01

client/i18n/locales/english/intro.json

@@ -4770,6 +4770,14 @@
       }
     }
   },
+  "daily-coding-challenge": {
+    "title": "Daily Coding Challenge",
+    "blocks": {
+      "daily-coding-challenge": {
+        "title": "Daily Coding Challenge"
+      }
+    }
+  },
   "misc-text": {
     "browse-other": "Browse our other free certifications",
     "courses": "Courses",

client/i18n/locales/english/translations.json

@@ -117,7 +117,38 @@
     "share-on-bluesky": "Share on BlueSky",
     "share-on-threads": "Share on Threads",
     "play-scene": "Press Play",
-    "download-latest-version": "Download the Latest Version"
+    "download-latest-version": "Download the Latest Version",
+    "start": "Start",
+    "go-to-today": "Go to Today's Challenge",
+    "go-to-today-long": "Go to Today's Coding Challenge",
+    "go-to-archive": "Go to Archive",
+    "go-to-archive-long": "Go to Daily Coding Challenge Archive"
+  },
+  "daily-coding-challenges": {
+    "title": "Daily Coding Challenges",
+    "map-title": "Try the coding challenge of the day:",
+    "not-found": "Daily Coding Challenge Not Found.",
+    "release-note": "New challenges are released at midnight US Central time."
+  },
+  "weekdays": {
+    "short": {
+      "sunday": "S",
+      "monday": "M",
+      "tuesday": "T",
+      "wednesday": "W",
+      "thursday": "T",
+      "friday": "F",
+      "saturday": "S"
+    },
+    "long": {
+      "sunday": "Sunday",
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday"
+    }
   },
   "landing": {
     "big-heading-1": "Learn to code — for free.",
@@ -851,6 +882,8 @@
     "github": "Link to {{username}}'s GitHub",
     "website": "Link to {{username}}'s website",
     "twitter": "Link to {{username}}'s Twitter",
+    "next-month": "Go to next month",
+    "previous-month": "Go to previous month",
     "first-page": "Go to first page",
     "previous-page": "Go to previous page",
     "next-page": "Go to next page",
@@ -880,7 +913,8 @@
     "editor-a11y-off-non-macos": "{{editorName}} editor content. Press Alt+F1 for accessibility options.",
     "editor-a11y-on-macos": "{{editorName}} editor content. Accessibility mode set to 'on'. Press Command+E to disable or press Option+F1 for more options.",
     "editor-a11y-on-non-macos": "{{editorName}} editor content. Accessibility mode set to 'on'. Press Ctrl+E to disable or press Alt+F1 for more options.",
-    "terminal-output": "Terminal output"
+    "terminal-output": "Terminal output",
+    "not-available": "Not available"
   },
   "flash": {
     "no-email-in-userinfo": "We could not retrieve an email from your chosen provider. Please try another provider or use the 'Continue with Email' option.",

client/src/assets/icons/calendar.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function CalendarIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 448 512'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z' />
+    </svg>
+  );
+}
+
+CalendarIcon.displayName = 'CalendarIcon';
+
+export default CalendarIcon;

client/src/assets/icons/daily-coding-challenge.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function DailyCodingChallengeIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 512 512'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z' />
+    </svg>
+  );
+}
+
+DailyCodingChallengeIcon.displayName = 'DailyCodingChallengeIcon';
+
+export default DailyCodingChallengeIcon;

client/src/components/Map/index.tsx

@@ -12,7 +12,11 @@ import {
 import { SuperBlockIcon } from '../../assets/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { ButtonLink } from '../helpers';
-import { showUpcomingChanges } from '../../../config/env.json';
+import {
+  showUpcomingChanges,
+  showDailyCodingChallenges
+} from '../../../config/env.json';
+import DailyCodingChallengeWidget from '../daily-coding-challenge/widget';
 
 import './map.css';
 interface MapProps {
@@ -82,6 +86,16 @@ function Map({ forLanding = false }: MapProps) {
 
         return (
           <Fragment key={stage}>
+            {
+              /* Show the daily coding challenge before the "English" curriculum */
+              showDailyCodingChallenges &&
+                stage === SuperBlockStage.English && (
+                  <>
+                    <DailyCodingChallengeWidget forLanding={forLanding} />
+                    <Spacer size='m' />
+                  </>
+                )
+            }
             <h2 className={forLanding ? 'big-heading' : ''}>
               {t(superBlockHeadings[stage])}
             </h2>

client/src/components/Progress/progress-inner.tsx

@@ -41,17 +41,24 @@ function ProgressInner({
   const [shownPercent, setShownPercent] = useState(0);
   const [lastShownPercent, setLastShownPercent] = useState(0);
   const progressInnerWrap = useRef<HTMLDivElement>(null);
+  const intervalRef = useRef<number | null>(null);
   const isProgressInViewport = useIsInViewport(progressInnerWrap);
 
   const animateProgressInner = (completedPercent: number) => {
+    // Clear any existing interval
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
     if (completedPercent > 100) completedPercent = 100;
     if (completedPercent < 0) completedPercent = 0;
 
     const transitionLength = completedPercent * 10 + 750;
     const intervalsToFinish = transitionLength / intervalLength;
     const amountPerInterval = completedPercent / intervalsToFinish;
 
-    const myInterval = window.setInterval(() => {
+    intervalRef.current = window.setInterval(() => {
       percent += amountPerInterval;
 
       if (percent > completedPercent) percent = completedPercent;
@@ -61,10 +68,14 @@ function ProgressInner({
       );
       if (percent >= completedPercent) {
         percent = 0;
-        clearInterval(myInterval);
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
       }
     }, intervalLength);
   };
+
   useEffect(() => {
     if (lastShownPercent !== completedPercent && isProgressInViewport) {
       setLastShownPercent(completedPercent);
@@ -73,6 +84,16 @@ function ProgressInner({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isProgressInViewport]);
 
+  // Cleanup interval on unmount
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <>
       <div className='completion-block-name'>{title}</div>

client/src/components/Progress/progress.tsx

@@ -14,6 +14,11 @@ import {
 import { liveCerts } from '../../../config/cert-and-project-map';
 import { updateAllChallengesInfo } from '../../redux/actions';
 import { CertificateNode, ChallengeNode } from '../../redux/prop-types';
+import { getIsDailyCodingChallenge } from '../../../../shared/config/challenge-types';
+import {
+  isValidDateParam,
+  formatDisplayDate
+} from '../daily-coding-challenge/helpers';
 import ProgressInner from './progress-inner';
 
 const mapStateToProps = createSelector(
@@ -24,10 +29,12 @@ const mapStateToProps = createSelector(
   (
     currentBlockIds: string[],
     {
+      challengeType,
       id,
       block,
       superBlock
     }: {
+      challengeType: number;
       id: string;
       block: string;
       superBlock: string;
@@ -36,6 +43,7 @@ const mapStateToProps = createSelector(
     completedPercent: number
   ) => ({
     currentBlockIds,
+    challengeType,
     id,
     block,
     superBlock,
@@ -56,17 +64,28 @@ function Progress({
   block,
   id,
   superBlock,
+  challengeType,
   completedChallengesInBlock,
   completedPercent,
   t,
   updateAllChallengesInfo
 }: ProgressProps): JSX.Element {
-  const blockTitle = t(`intro:${superBlock}.blocks.${block}.title`);
+  let blockTitle = t(`intro:${superBlock}.blocks.${block}.title`);
   // Always false for legacy full stack, since it has no projects.
   const isCertificationProject = liveCerts.some(cert =>
     cert.projects?.some((project: { id: string }) => project.id === id)
   );
 
+  // Display the date of the challenge in the completion modal for daily challenges
+  if (getIsDailyCodingChallenge(challengeType)) {
+    const dateParam =
+      new URLSearchParams(window.location.search).get('date') || '';
+
+    if (isValidDateParam(dateParam)) {
+      blockTitle += `: ${formatDisplayDate(dateParam)}`;
+    }
+  }
+
   const { challengeNodes, certificateNodes } = useGetAllBlockIds();
   useEffect(() => {
     updateAllChallengesInfo({ challengeNodes, certificateNodes });

client/src/components/daily-coding-challenge/calendar-day.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from '../helpers';
+import GreenPass from '../../assets/icons/green-pass';
+import GreenNotCompleted from '../../assets/icons/green-not-completed';
+import { formatDisplayDate } from './helpers';
+
+interface CalendarDayProps {
+  dayNumber: number;
+  date?: string;
+  isCompleted?: boolean;
+  isAvailable?: boolean;
+}
+
+// Todo: Change this to render checkmarks for JS and Python
+
+function DailyCodingChallengeCalendarDay({
+  dayNumber,
+  date,
+  isCompleted = false,
+  isAvailable = false
+}: CalendarDayProps): JSX.Element {
+  const { t } = useTranslation();
+  // dayNumber = 0 -> render nothing
+  if (dayNumber === 0) return <div></div>;
+
+  if (!isAvailable)
+    return (
+      <button
+        disabled
+        className='calendar-day not-available'
+        aria-label={`${date && formatDisplayDate(date)}, (${t('aria.not-available')})`}
+      >
+        <span className='calendar-day-number' aria-hidden='true'>
+          {dayNumber}
+        </span>
+      </button>
+    );
+
+  // isAvailable -> render link to challenge
+  return (
+    <Link
+      to={`/learn/daily-coding-challenge?date=${date}`}
+      className='calendar-day available'
+      aria-label={`${date && formatDisplayDate(date)}`}
+    >
+      <span className='calendar-day-number' aria-hidden='true'>
+        {dayNumber}
+      </span>
+
+      {isCompleted ? (
+        <span className='completed'>
+          <GreenPass />
+        </span>
+      ) : (
+        <span className='not-completed'>
+          <GreenNotCompleted />
+        </span>
+      )}
+    </Link>
+  );
+}
+
+DailyCodingChallengeCalendarDay.displayName = 'DailyCodingChallengeCalendarDay';
+
+export default DailyCodingChallengeCalendarDay;