Merge pull request #41 from topcoder-platform/dev

PROD-2741 Topcoder Academy MVP -> prod

Author: testflyjets

Jenkinsfile

@@ -1,8 +1,7 @@
 // Define Application name
-def APPNAME = "freecodecamp-mfe"
+def APPNAME = "freecodecamp"
 
 // Define which branch build and deploy need to run in the below array
-
 def branchfilter = ['dev', 'prod']
 
 if (!branchfilter.contains(env.BRANCH_NAME)) {
@@ -13,7 +12,7 @@ if (!branchfilter.contains(env.BRANCH_NAME)) {
     return
 }
 
-//Define branch specific var
+// Define branch specific vars
 if (env.BRANCH_NAME == 'dev') {
     DEPLOY_ENV = 'DEV'
     LOGICAL_ENV = 'dev'
@@ -24,7 +23,6 @@ if (env.BRANCH_NAME == 'dev') {
     ENABLE_CACHE = false
 }
 
-// NOTE: main/prod is not supported yet
 if (env.BRANCH_NAME == 'prod') {
     DEPLOY_ENV = 'PROD'
     LOGICAL_ENV = 'prod'
@@ -126,7 +124,7 @@ pipeline {
                 """
             }
         }
-        stage('appdeploy')    
+        stage('appdeploy')
         {
             //Deploying app
             when { expression { IS_APP_DEPLOY } }
@@ -137,10 +135,10 @@ pipeline {
                 sh """
                 #!/bin/bash
                 ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c $ENABLE_CACHE
-                """         
+                """
             }
         }
-        stage('apideploy')    
+        stage('apideploy')
         {
             //Deploying app
             when { expression { IS_API_DEPLOY } }
@@ -153,7 +151,7 @@ pipeline {
                 sed -i '/node_modules/d' ./.dockerignore
                 docker build -f docker/api/ECSDockerfile -t $APPNAME-api:latest .
                 ./master_deploy.sh -d ECS -e $DEPLOY_ENV -t latest -s ${LOGICAL_ENV}-${APPNAME}-appvar -i ${APPNAME}-api                
-                """         
+                """
             }
         }      
     }

README-TOPCODER.md

@@ -0,0 +1,54 @@
+## Topcoder freeCodeCamp modifications README
+
+This file describes the modifications Topcoder made to the freeCodeCamp.org application to support providing FCC course content within the Topcoder Academy and Learning Paths effort. It also provides details about how the application is deployed and hosted in our AWS cloud environment.
+
+## Table of Contents
+
+- [Learning Platform](#the-learning-platform)
+- [Learning Platform API](#the-learning-platform-api)
+- [MongoDB Configuration](#mongodb-configuration)
+- [CI/CD Configuration](#cicd-configuration)
+
+### The Learning Platform
+
+The freeCodeCamp application is hosted in the [platform-ui](https://github.com/topcoder-platform/platform-ui) application, within the [Learn tool](https://github.com/topcoder-platform/platform-ui/tree/dev/src-ts/tools/learn). The Learn application uses the [learning-paths-api](https://github.com/topcoder-platform/learning-paths-api) to manage and display course metadata, such as the certifications and courses available, and to track user course progress independently of the progress tracking performed by the hosted freeCodeCamp application.
+
+The freeCodeCamp code editors and course material viewing tools are hosted inside an iframe and communicate with the parent platform-ui application via messages, which in turn trigger calls to the learning paths API. For example, when a user completes a course, a course completion message is sent to from the freeCodeCamp application to the parent platform-ui app, which then makes an API call to record the event in the Topcoder Academy datastore.
+
+#### Build and Deploy Process
+
+The freeCodeCamp application is statically built during deployment and hosted in AWS S3 via a Cloudfront distribution. The S3 bucket had to be specially configured to support this type of deployment, in particular to allow the correct URLs to be used by the platform-ui and the embedded freeCodeCamp application.
+
+#### Authentication
+
+The application natively uses Auth0 authentication, which we had to modify to use Topcoder's login and authentication process. (details)
+
+(TODO - more detail here on the major things we did)
+
+### The Learning Platform API
+
+The freeCodeCamp API, which is responsible for managing user progress and sessions in MongoDB, was modified to support Topcoder Auth0 authentication and to reflect the path at which the API was deployed in AWS.
+
+#### Build and Deploy Process
+
+The API is deployed via AWS Elastic Container Service. See the [api/ECSDockerfile](./docker/api/ECSDockerfile) for details of this configuration. A key thing to note is that the freeCodeCamp application and API rely in the presence of a .env file that contains all of the required environment variables.
+
+Topcoder's standard deployment process is to store sensitive deployment variables (include API keys, secrets, tokens, etc.) in an S3 bucket and to programmatically retrieve them and inject those values as environment variables into the Docker container at build time. However, this approach does not work for freeCodeCamp due to the reliance on the existence of the .env file in the project root. We modified the build and deploy process to include a copy of the .env file in S3 that is copied into the project root and available for the application when it is started.
+
+### MongoDB Configuration
+
+The freeCodeCamp application natively uses MongoDB to track user sessions and course progress. To support our deployment of freeCodeCamp, an instance of MongoDB's cloud [Atlas](https://www.mongodb.com/atlas) service was stood-up. Key things to note about this:
+
+- This instance was configured via the [AWS Marketplace](https://aws.amazon.com/marketplace/pp/prodview-pp445qepfdy34?ref_=aws-mp-console-subscription-detail) so that the Atlas instance billing would flow to the associated AWS account.
+- An initial attempt was made to use an Atlas "pay as you go" serverless instance of MongoDB since costs would be very low. However, two issues arose that prevented this:
+  - The MongoDB version that Atlas serverless uses was incompatible with freeCodeCamp's NodeJS mongodb driver package
+  - AWS VPC peering cannot be used with a serverless instance
+- As a result of these issues we settled on an M10 clustered instance of MongoDB.
+
+In order to connect the [freeCodeCamp API](#learning-platform-api) to the MongoDB Atlas instance, VPC peering was established between the AWS VPC into which the freeCodeCamp API was deployed and the Atlas instance's VPC. The [VPC peering documentation](https://www.mongodb.com/docs/atlas/security-vpc-peering/) on their website is comprehensive and accurate. We followed this process to establish a secure connection from the API to the database.
+
+### CI/CD Configuration
+
+We initially attempted to deploy the freeCodeCamp application and API via our standard CircleCI system, however we were never able to get this to work properly. The application build failed repeatedly at various points and was never successful.
+
+Our DevOps team stood-up a new Jenkins CI/CD system in an AWS EC2 instance (see the [Jenkinsfile](./Jenkinsfile) in the project root for details) and this was successful. However, the build and deployment of the application and API currently takes over 20 minutes. We have an outstanding request with the DevOps team to address this.

api-server/src/server/middlewares/request-authorization.js

@@ -73,7 +73,6 @@ export default function getRequestAuthorisation({
     const { origin } = getRedirectParams(req);
     const { path } = req;
     if (!isAllowedPath(path)) {
-      console.log('##### path:', path);
       const { accessToken, error, jwt } = getAccessTokenFromRequest(
         req,
         jwtSecret

client/gatsby-config.js

@@ -123,6 +123,14 @@ module.exports = {
         icon: 'src/assets/images/square_puck.png'
       }
     },
-    'gatsby-plugin-remove-serviceworker'
+    'gatsby-plugin-remove-serviceworker',
+    {
+      resolve: `gatsby-plugin-s3`,
+      options: {
+        bucketName: 'freecodecamp-mfe.topcoder-dev.com',
+        hostname: 'freecodecamp-mfe.topcoder-dev.com',
+        protocol: 'https'
+      }
+    }
   ]
 };

client/i18n/locales/english/intro.json

@@ -80,31 +80,36 @@
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a tribute page for a subject of your choosing, fictional or real."
-        ] },
+        ]
+      },
       "build-a-personal-portfolio-webpage-project": {
         "title": "Personal Portfolio Webpage",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build your own personal portfolio page."
-        ] },
+        ]
+      },
       "build-a-product-landing-page-project": {
         "title": "Product Landing Page",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a product landing page to market a product of your choice."
-        ] },
+        ]
+      },
       "build-a-survey-form-project": {
         "title": "Survey Form",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a survey form to collect data from your users."
-        ] },
+        ]
+      },
       "build-a-technical-documentation-page-project": {
         "title": "Technical Documentation Page",
         "intro": [
           "This is one of the required projects to earn your certification.",
           "For this project, you will build a technical documentation page to serve as instruction or reference for a topic."
-        ] },
+        ]
+      },
       "learn-html-by-building-a-cat-photo-app": {
         "title": "Learn HTML by Building a Cat Photo App",
         "intro": [
@@ -181,24 +186,66 @@
           "In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS."
         ]
       },
-      "learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": [
-        "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.",
-        "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work."
-      ] },
-      "learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": [
-        "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
-        "In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed."
-      ] },
-      "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": [
-        "You can use CSS pseudo selectors to change specific HTML elements.",
-        "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage."
-      ] },
+      "learn-css-transforms-by-building-a-penguin": {
+        "title": "Learn CSS Transforms by Building a Penguin",
+        "intro": [
+          "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.",
+          "In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work."
+        ]
+      },
+      "learn-css-animation-by-building-a-ferris-wheel": {
+        "title": "Learn CSS Animation by Building a Ferris Wheel",
+        "intro": [
+          "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
+          "In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed."
+        ]
+      },
+      "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": {
+        "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet",
+        "intro": [
+          "You can use CSS pseudo selectors to change specific HTML elements.",
+          "In this course, you'll build a balance sheet using pseudo selectors. You'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage."
+        ]
+      },
       "learn-css-colors-by-building-a-set-of-colored-markers": {
         "title": "Learn CSS Colors by Building a Set of Colored Markers",
         "intro": [
           "Selecting the correct colors for your webpage can greatly improve the aesthetic appeal to your readers.",
           "In this course, you'll build a set of colored markers. You'll learn different ways to set color values and how to pair colors with each other."
-      ] }
+        ]
+      }
+    }
+  },
+  "2022/responsive-web-design-qa": {
+    "title": "(New) Responsive Web Design QA",
+    "intro": [
+      "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
+      "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
+      "Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
+    ],
+    "note": "Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.",
+    "blocks": {
+      "build-a-personal-portfolio-webpage-project-qa": {
+        "title": "Personal Portfolio Webpage QA",
+        "intro": [
+          "This is one of the required projects to earn your certification.",
+          "For this project, you will build your own personal portfolio page."
+        ]
+      },
+      "learn-html-by-building-a-cat-photo-app-qa": {
+        "title": "Learn HTML by Building a Cat Photo App QA",
+        "intro": [
+          "HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.",
+          "In this course, you'll learn the most common HTML tags by building your own cat photo app."
+        ]
+      },
+      "learn-basic-css-by-building-a-cafe-menu-qa": {
+        "title": "Learn Basic CSS by Building a Cafe Menu QA",
+        "intro": [
+          "CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.",
+          "In this course, you'll learn CSS by designing a menu page for a cafe webpage."
+        ]
+      }
     }
   },
   "javascript-algorithms-and-data-structures": {

client/src/assets/icons/chevron-down.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function ExternalLink(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <svg
+      width='16'
+      height='10'
+      viewBox='0 0 16 10'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <title>{t('icons.chevron-down')}</title>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d={
+          'M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L8 ' +
+          '7.08579L14.2929 0.792893C14.6834 0.402369 15.3166 0.402369 15.7071 ' +
+          '0.792893C16.0976 1.18342 16.0976 1.81658 15.7071 2.20711L8.70711 ' +
+          '9.20711C8.31658 9.59763 7.68342 9.59763 7.29289 9.20711L0.292893 ' +
+          '2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z'
+        }
+        fill='#137D60'
+      />
+    </svg>
+  );
+}
+
+ExternalLink.displayName = 'ExternalLink';
+
+export default ExternalLink;

client/src/assets/icons/index.tsx

@@ -35,7 +35,9 @@ const generateIconComponent = (
   className: string
 ): JSX.Element => {
   // fallback in case super block doesn't exist and for tests
-  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
+  const Icon = iconMap[superBlock as keyof typeof iconMap]
+    ? iconMap[superBlock as keyof typeof iconMap]
+    : ResponsiveDesign;
 
   return <Icon className={className} />;
 };

client/src/components/layouts/global.css

@@ -304,6 +304,7 @@ input[type='submit']:hover,
 .btn-primary.focus {
   background-color: var(--tc-turq-140);
   outline: 0 none;
+  color: var(--tc-white);
 }
 
 .btn-tab-primary:focus,

client/src/components/layouts/learn.tsx

@@ -6,11 +6,8 @@ import { Loader } from '../../components/helpers';
 import {
   userSelector,
   userFetchStateSelector,
-  isSignedInSelector,
-  tryToShowDonationModal
+  isSignedInSelector
 } from '../../redux';
-import DonateModal from '../Donation/donation-modal';
-import createRedirect from '../create-redirect';
 
 import './prism.css';
 import './prism-night.css';
@@ -38,32 +35,16 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = {
-  tryToShowDonationModal
-};
-
-const RedirectEmailSignUp = createRedirect('/email-sign-up');
+const mapDispatchToProps = {};
 
 type LearnLayoutProps = {
   isSignedIn?: boolean;
   fetchState: FetchState;
   user: User;
-  tryToShowDonationModal: () => void;
   children?: React.ReactNode;
 };
 
-function LearnLayout({
-  isSignedIn,
-  fetchState,
-  user,
-  tryToShowDonationModal,
-  children
-}: LearnLayoutProps): JSX.Element {
-  useEffect(() => {
-    tryToShowDonationModal();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
+function LearnLayout({ fetchState, children }: LearnLayoutProps): JSX.Element {
   useEffect(() => {
     return () => {
       const metaTag = document.querySelector(`meta[name="robots"]`);
@@ -77,19 +58,12 @@ function LearnLayout({
     return <Loader fullScreen={true} />;
   }
 
-  if (isSignedIn && !user.acceptedPrivacyTerms) {
-    return <RedirectEmailSignUp />;
-  }
-
   return (
     <>
       <Helmet>
         <meta content='noindex' name='robots' />
       </Helmet>
       <main id='learn-app-wrapper'>{children}</main>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-      /* @ts-ignore  */}
-      <DonateModal />
     </>
   );
 }

client/src/components/layouts/variables.css

@@ -37,9 +37,12 @@
   --tc-link-blue-light: #5fb7ee;
   --tc-black: #000;
   --tc-black-100: #2a2a2a;
+  --tc-black-20: #d4d4d4;
   --tc-black-10: #e9e9e9;
   --tc-black-5: #f4f4f4;
   --tc-blue-140: #16679a;
+  --tc-blue-25: #bae1f9;
+  --tc-blue-10: #eaf6fd;
 }
 
 .dark-palette {