Merge branch 'freeCodeCamp:main' into try

.eslintrc-base.json

@@ -35,40 +35,6 @@
     "import/unambiguous": 2,
     "import/no-anonymous-default-export": 2,
     "jsx-quotes": [2, "prefer-single"],
-    "jsx-a11y/accessible-emoji": "error",
-    "jsx-a11y/alt-text": "error",
-    "jsx-a11y/anchor-has-content": "error",
-    "jsx-a11y/anchor-is-valid": "error",
-    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
-    "jsx-a11y/aria-props": "error",
-    "jsx-a11y/aria-proptypes": "error",
-    "jsx-a11y/aria-role": "error",
-    "jsx-a11y/aria-unsupported-elements": "error",
-    "jsx-a11y/control-has-associated-label": "error",
-    "jsx-a11y/click-events-have-key-events": "error",
-    "jsx-a11y/heading-has-content": "error",
-    "jsx-a11y/html-has-lang": "error",
-    "jsx-a11y/iframe-has-title": "error",
-    "jsx-a11y/img-redundant-alt": "error",
-    "jsx-a11y/interactive-supports-focus": "error",
-    "jsx-a11y/label-has-associated-control": "error",
-    "jsx-a11y/lang": "error",
-    "jsx-a11y/media-has-caption": "error",
-    "jsx-a11y/mouse-events-have-key-events": "error",
-    "jsx-a11y/no-access-key": "error",
-    "jsx-a11y/no-autofocus": "error",
-    "jsx-a11y/no-distracting-elements": "error",
-    "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
-    "jsx-a11y/no-noninteractive-element-interactions": "error",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
-    "jsx-a11y/no-noninteractive-tabindex": "error",
-    "jsx-a11y/no-onchange": "error",
-    "jsx-a11y/no-redundant-roles": "error",
-    "jsx-a11y/no-static-element-interactions": "error",
-    "jsx-a11y/role-has-required-aria-props": "error",
-    "jsx-a11y/role-supports-aria-props": "error",
-    "jsx-a11y/scope": "error",
-    "jsx-a11y/tabindex-no-positive": "error",
     "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
     "keyword-spacing": [2],
     "max-depth": 0,
@@ -178,6 +144,7 @@
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/jsx-wrap-multilines": 2,
+    "react/jsx-fragments": 2,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
     "react/no-multi-comp": [2, { "ignoreStateless": true }],

.eslintrc.json

@@ -11,7 +11,8 @@
   "extends": [
     "./.eslintrc-base.json",
     "plugin:prettier/recommended",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended"
   ],
   "plugins": [
     "react",
@@ -39,11 +40,15 @@
     },
     "import/ignore": ["node_modules"]
   },
-  "overrides": [{
+  "overrides": [
+    {
       "files": ["**/*.ts?(x)"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-      "project": ["./client/tsconfig.json", "./tools/challenge-helper-scripts/tsconfig.json"]
+        "project": [
+          "./client/tsconfig.json",
+          "./tools/challenge-helper-scripts/tsconfig.json"
+        ]
       },
       "extends": [
         "plugin:@typescript-eslint/recommended",
@@ -52,7 +57,8 @@
       "plugins": ["@typescript-eslint"]
     },
     {
-    "files": ["./tools/ui-components/**/*.test.[jt]s?(x)"],
+      "files": ["./tools/ui-components/**/*.test.[jt]s?(x)", "./client/**/*.test.[jt]s?(x)"],
       "extends": ["plugin:testing-library/react", "plugin:jest-dom/recommended"]
-  }]
+    }
+  ]
 }

.github/FUNDING.yml

@@ -1 +1,3 @@
 github: freecodecamp
+patreon: freecodecamp
+custom: [www.freecodecamp.org/donate]

.github/ISSUE_TEMPLATE/01--issues-with-coding-challenges.md

@@ -10,13 +10,13 @@ assignees: ''
 NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email security@freecodecamp.org. We will look into it immediately.
 -->
 
-**Affected page**
+## Affected page
-Add a link to the coding challenge with the problem.
 
+<!-- Add a link to the coding challenge with the problem. -->
 
+## Your code
 
-**Your code**
+<!-- Copy and paste the code from the editor that you used in between the back-ticks below: -->
-Copy and paste the code from the editor that you used in between the back-ticks below:
 
 ```
 
@@ -25,21 +25,23 @@ Copy and paste the code from the editor that you used in between the back-ticks
 
 ```
 
-**Expected behavior**
+## Expected behavior
-Add a clear and concise description of what you expected to happen.
 
+<!-- Add a clear and concise description of what you expected to happen. -->
 
+## Screenshots
 
-**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. -->
-If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box.
 
+## System
 
+<!-- Please complete the following information. -->
 
-**System (please complete the following information):**
 - Device: [e.g. iPhone6, Laptop]
 - OS: [e.g. iOS 14, Windows 10, Ubuntu 20.4]
 - Browser: [e.g. chrome, safari]
 - Version: [e.g. 22]
 
-**Additional context**
+## Additional context
-Add any other context about the problem here.
+
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/02--issues-with-software-on-platforms.md

@@ -1,24 +1,22 @@
 ---
-name: 'Report issues with software on freeCodeCamp.org''s platforms'
+name: "Report issues with software on freeCodeCamp.org's platforms"
 about: Report a software bug on /learn, /news, Community Forum, Code Radio
   or any of the platforms.
 title: ''
 labels: 'type: bug, status: waiting triage'
 assignees: ''
-
 ---
 
 <!--
 NOTE: If you're reporting a security issue, don't create a GitHub issue. Instead, email security@freecodecamp.org. We will look into it immediately.
 -->
 
+## Affected page
 
-**Affected page**
+<!-- Add a link to the page with the problem. -->
-Add a Link to the page with the problem.
 
+## To reproduce
 
-
-**To Reproduce**
 Steps to reproduce the behavior:
 
 1. Go to '...'
@@ -26,21 +24,23 @@ Steps to reproduce the behavior:
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+## Expected behavior
-A clear and concise description of what you expected to happen.
 
+<!-- A clear and concise description of what you expected to happen. -->
 
+## Screenshots
 
-**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box. -->
-If applicable, add screenshots to help explain your problem. you can drag and drop, png, jpg, gif, etc. in this box.
 
+## System
 
+<!-- Please complete the following information. -->
 
-**System (please complete the following information):**
 - Device: [e.g. iPhone6, Laptop]
 - OS: [e.g. iOS 14, Windows 10, Ubuntu 20.4]
 - Browser: [e.g. chrome, safari]
 - Version: [e.g. 22]
 
-**Additional context**
+## Additional context
-Add any other context about the problem here.
+
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/03--issues-with-content-on-articles-and-docs.md

@@ -4,7 +4,6 @@ about: Report issues with content on a specific article, like broken links, typo
 title: ''
 labels: 'type: bug, status: waiting triage'
 assignees: ''
-
 ---
 
 <!--
@@ -13,13 +12,18 @@ NOTE: If you want to become an author on freeCodeCamp, you can find everything h
 <!-- If you are reporting an issue with an article on our News publication,
 please follow this link to send an email to our editorial team https://mailxto.com/lkj5n7 -->
 
-**Describe your problem and how to reproduce it:**
+## Affected page
 
+<!-- Add a link to the page with the problem. -->
 
-**Add a Link to the page with the problem:**
+## To reproduce
 
+<!-- Describe the problem and how to reproduce it. -->
 
-**Recommended fix, suggestions (how would you update it?):**
+## Recommended fix, suggestions
 
+<!-- A clear and concise description of how you want to update it. -->
 
-**If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):**
+## Screenshots
+
+<!-- If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box). -->

.github/ISSUE_TEMPLATE/04--feature-request-for-freecodecamp-org-s-platforms.md

@@ -1,20 +1,24 @@
 ---
-name: 'Request a new feature on freeCodeCamp.org''s platforms'
+name: "Request a new feature on freeCodeCamp.org's platforms"
 about: Suggest an idea for freeCodeCamp.org's /learn, /news, Community Forum, Code Radio or other platforms
 title: ''
 labels: 'type: feature request'
 assignees: ''
-
 ---
 
-**Is your feature request related to a problem? Please describe.**
+## Is your feature request related to a problem? Please describe.
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
+<!-- A clear and concise description of what the problem is. -->
-A clear and concise description of what you want to happen.
+<!-- Ex. I'm always frustrated when [...] -->
 
-**Describe alternatives you've considered**
+## Describe the solution you'd like
-A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+<!-- A clear and concise description of what you want to happen. -->
-Add any other context or screenshots about the feature request here.
+
+## Describe alternatives you've considered
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+## Additional context
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/workflows/cypress.yml

@@ -40,19 +40,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-
+          cache: 'npm'
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
 
       - name: Set freeCodeCamp Environment Variables
         run: cp sample.env .env

.github/workflows/node.js-tests-upcoming.yml

@@ -27,19 +27,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-
+          cache: 'npm'
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
 
       - name: Set Environment variables
         run: |

.github/workflows/node.js-tests.yml

@@ -22,19 +22,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-
+          cache: 'npm'
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
 
       - name: Set Environment variables
         run: cp sample.env .env

.gitpod.yml

@@ -3,11 +3,13 @@ ports:
   - port: 27017 # mongodb
     onOpen: ignore
   - port: 8000 # client
-    onOpen: open-preview
+    onOpen: open-browser
+    visibility: public
   - port: 9228 # node debug
     onOpen: ignore
   - port: 3000 # api
     onOpen: ignore
+    visibility: public
   - port: 9229 # node debug
     onOpen: ignore
   - port: 9230 # client node debug
@@ -80,5 +82,5 @@ github:
 
 vscode:
   extensions:
-    - dbaeumer.vscode-eslint@2.1.5:9Wg0Glx/TwD8ElFBg+FKcQ==
+    - dbaeumer.vscode-eslint@2.1.8
-    - esbenp.prettier-vscode@4.7.0:kgoYSh1LwTixKtJtQWtodQ==
+    - esbenp.prettier-vscode@6.4.0

.husky/.gitignore

@@ -1 +0,0 @@
-_

README.md

@@ -28,7 +28,7 @@ freeCodeCamp.org offers several free developer certifications. Each of these cer
 
 Each of these 50 projects in the freeCodeCamp.org curriculum has its own agile user stories and automated tests. These help you build up your project incrementally and ensure you've fulfilled all the user stories before you submit it.
 
-You can pull in these test suites through [freeCodeCamp's CDN](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js). This means you can build these projects on websites like CodePen and Glitch - or even on your local computer's development environment.
+You can pull in these test suites through [freeCodeCamp's CDN](https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js). This means you can build these projects on websites like CodePen and Replit - or even on your local computer's development environment.
 
 Once you’ve earned a certification, you will always have it. You will always be able to link to it from your LinkedIn or résumé. And when your prospective employers or freelance clients click that link, they’ll see a verified certification specific to you.
 
@@ -36,98 +36,98 @@ The one exception to this is if we discover violations of our [Academic Honesty
 
 Here are our ten core certifications:
 
-#### 1. Responsive Web Design Certification
+#### 1. [Responsive Web Design Certification](https://www.freecodecamp.org/learn/responsive-web-design/)
 
-- [Basic HTML and HTML5](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [Basic HTML and HTML5](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5)
-- [Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/#basic-css)
-- [Applied Visual Design](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [Applied Visual Design](https://www.freecodecamp.org/learn/responsive-web-design/#applied-visual-design)
-- [Applied Accessibility](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [Applied Accessibility](https://www.freecodecamp.org/learn/responsive-web-design/#applied-accessibility)
-- [Responsive Web Design Principles](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [Responsive Web Design Principles](https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-principles)
-- [CSS Flexbox](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [CSS Flexbox](https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox)
-- [CSS Grid](https://www.freecodecamp.org/learn/responsive-web-design/)
+- [CSS Grid](https://www.freecodecamp.org/learn/responsive-web-design/#css-grid)
   <br />
   <br />
   **Projects**: [Tribute Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page), [Survey Form](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form), [Product Landing Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page), [Technical Documentation Page](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page), [Personal Portfolio Webpage](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage)
 
-#### 2. JavaScript Algorithms and Data Structures Certification
+#### 2. [JavaScript Algorithms and Data Structures Certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
 
-- [Basic JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Basic JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript)
-- [ES6](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [ES6](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#es6)
-- [Regular Expressions](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Regular Expressions](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#regular-expressions)
-- [Debugging](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Debugging](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#debugging)
-- [Basic Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Basic Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-data-structures)
-- [Algorithm Scripting](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Basic Algorithm Scripting](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-algorithm-scripting)
-- [Object-Oriented Programming](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Object-Oriented Programming](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#object-oriented-programming)
-- [Functional Programming](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Functional Programming](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#functional-programming)
-- [Intermediate Algorithm Scripting](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
+- [Intermediate Algorithm Scripting](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#intermediate-algorithm-scripting)
   <br />
   <br />
   **Projects**: [Palindrome Checker](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker),[ Roman Numeral Converter](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter), [Caesar's Cipher](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher), [Telephone Number Validator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator), [Cash Register](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register)
 
-#### 3. Front End Libraries Certification
+#### 3. [Front End Libraries Certification](https://www.freecodecamp.org/learn/front-end-libraries/)
 
-- [Bootstrap](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [Bootstrap](https://www.freecodecamp.org/learn/front-end-libraries/#bootstrap)
-- [jQuery](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [jQuery](https://www.freecodecamp.org/learn/front-end-libraries/#jquery)
-- [Sass](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [Sass](https://www.freecodecamp.org/learn/front-end-libraries/#sass)
-- [React](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [React](https://www.freecodecamp.org/learn/front-end-libraries/#react)
-- [Redux](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [Redux](https://www.freecodecamp.org/learn/front-end-libraries/#redux)
-- [React and Redux](https://www.freecodecamp.org/learn/front-end-libraries/)
+- [React and Redux](https://www.freecodecamp.org/learn/front-end-libraries/#react-and-redux)
   <br />
   <br />
   **Projects**: [Random Quote Machine](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine), [Markdown Previewer](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer), [Drum Machine](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine), [JavaScript Calculator](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator), [25 + 5 Clock](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-25--5-clock)
 
-#### 4. Data Visualization Certification
+#### 4. [Data Visualization Certification](https://www.freecodecamp.org/learn/data-visualization/)
 
-- [Data Visualization with D3](https://www.freecodecamp.org/learn/data-visualization/)
+- [Data Visualization with D3](https://www.freecodecamp.org/learn/data-visualization/#data-visualization-with-d3)
-- [JSON APIs and Ajax](https://www.freecodecamp.org/learn/data-visualization/)
+- [JSON APIs and Ajax](https://www.freecodecamp.org/learn/data-visualization/#json-apis-and-ajax)
   <br />
   <br />
   **Projects**: [Bar Chart](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart), [Scatterplot Graph](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph), [Heat Map](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map), [Choropleth Map](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map), [Treemap Diagram](https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram)
 
-#### 5. APIs and Microservices Certification
+#### 5. [APIs and Microservices Certification](https://www.freecodecamp.org/learn/apis-and-microservices/)
 
-- [Managing Packages with Npm](https://www.freecodecamp.org/learn/apis-and-microservices/)
+- [Managing Packages with Npm](https://www.freecodecamp.org/learn/apis-and-microservices/#managing-packages-with-npm)
-- [Basic Node and Express](https://www.freecodecamp.org/learn/apis-and-microservices/)
+- [Basic Node and Express](https://www.freecodecamp.org/learn/apis-and-microservices/#basic-node-and-express)
-- [MongoDB and Mongoose](https://www.freecodecamp.org/learn/apis-and-microservices/)
+- [MongoDB and Mongoose](https://www.freecodecamp.org/learn/apis-and-microservices/#mongodb-and-mongoose)
   <br />
   <br />
   **Projects**: [Timestamp Microservice](https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/timestamp-microservice), [Request Header Parser](https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/request-header-parser-microservice), [URL Shortener](https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/url-shortener-microservice), [Exercise Tracker](https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/exercise-tracker), [File Metadata Microservice](https://www.freecodecamp.org/learn/apis-and-microservices/apis-and-microservices-projects/file-metadata-microservice)
 
-#### 6. Quality Assurance Certification
+#### 6. [Quality Assurance Certification](https://www.freecodecamp.org/learn/quality-assurance/)
 
-- [Quality Assurance and Testing with Chai](https://www.freecodecamp.org/learn/quality-assurance/)
+- [Quality Assurance and Testing with Chai](https://www.freecodecamp.org/learn/quality-assurance/#quality-assurance-and-testing-with-chai)
-- [Advanced Node and Express](https://www.freecodecamp.org/learn/quality-assurance/)
+- [Advanced Node and Express](https://www.freecodecamp.org/learn/quality-assurance/#advanced-node-and-express)
   <br />
   <br />
   **Projects**: [Metric-Imperial Converter](https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/metric-imperial-converter), [Issue Tracker](https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/issue-tracker), [Personal Library](https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/personal-library), [Sudoku Solver](https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/sudoku-solver), [American British Translator](https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/american-british-translator)
 
-#### 7. Scientific Computing with Python Certification
+#### 7. [Scientific Computing with Python Certification](https://www.freecodecamp.org/learn/scientific-computing-with-python/)
 
-- [Introduction to Python for Everybody](https://www.freecodecamp.org/learn/scientific-computing-with-python/)
+- [Introduction to Python for Everybody](https://www.freecodecamp.org/learn/scientific-computing-with-python/#python-for-everybody)
   <br />
   <br />
   **Projects**: [Arithmetic Formatter](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter), [Time Calculator](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator), [Budget App](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/budget-app), [Polygon Area Calculator](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator), [Probability Calculator](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator)
 
-#### 8. Data Analysis with Python Certification
+#### 8. [Data Analysis with Python Certification](https://www.freecodecamp.org/learn/data-analysis-with-python/)
 
-- [Data Analysis with Python Course](https://www.freecodecamp.org/learn/data-analysis-with-python/)
+- [Data Analysis with Python Course](https://www.freecodecamp.org/learn/data-analysis-with-python/#data-analysis-with-python-course)
-- [NumPy](https://www.freecodecamp.org/learn/data-analysis-with-python/)
+- [NumPy](https://www.freecodecamp.org/learn/data-analysis-with-python/#numpy)
   <br />
   <br />
   **Projects**: [Mean-Variance-Standard Deviation Calculator](https://www.freecodecamp.org/learn/data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator), [Demographic Data Analyzer](https://www.freecodecamp.org/learn/data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer), [Medical Data Visualizer](https://www.freecodecamp.org/learn/data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer), [Page View Time Series Visualizer](https://www.freecodecamp.org/learn/data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer), [Sea Level Predictor](https://www.freecodecamp.org/learn/data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor)
 
-#### 9. Information Security Certification
+#### 9. [Information Security Certification](https://www.freecodecamp.org/learn/information-security/)
 
-- [Information Security with HelmetJS](https://www.freecodecamp.org/learn/information-security/)
+- [Information Security with HelmetJS](https://www.freecodecamp.org/learn/information-security/#information-security-with-helmetjs)
-- [Python for Penetration Testing](https://www.freecodecamp.org/learn/information-security/)
+- [Python for Penetration Testing](https://www.freecodecamp.org/learn/information-security/#python-for-penetration-testing)
   <br />
   <br />
   **Projects**: [Stock Price Checker](https://www.freecodecamp.org/learn/information-security/information-security-projects/stock-price-checker), [Anonymous Message Board](https://www.freecodecamp.org/learn/information-security/information-security-projects/anonymous-message-board), [Port Scanner](https://www.freecodecamp.org/learn/information-security/information-security-projects/port-scanner), [SHA-1 Password Cracker](https://www.freecodecamp.org/learn/information-security/information-security-projects/sha-1-password-cracker), [Secure Real Time Multiplayer Game ](https://www.freecodecamp.org/learn/information-security/information-security-projects/secure-real-time-multiplayer-game)
 
-#### 10. Machine Learning with Python Certification
+#### 10. [Machine Learning with Python Certification](https://www.freecodecamp.org/learn/machine-learning-with-python/)
 
-- [TensorFlow](https://www.freecodecamp.org/learn/machine-learning-with-python/)
+- [TensorFlow](https://www.freecodecamp.org/learn/machine-learning-with-python/#tensorflow)
-- [How Neural Networks Work](https://www.freecodecamp.org/learn/machine-learning-with-python/)
+- [How Neural Networks Work](https://www.freecodecamp.org/learn/machine-learning-with-python/#how-neural-networks-work)
   <br />
   <br />
   **Projects**: [Rock Paper Scissors](https://www.freecodecamp.org/learn/machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors), [Cat and Dog Image Classifier](https://www.freecodecamp.org/learn/machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier), [Book Recommendation Engine using KNN](https://www.freecodecamp.org/learn/machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn), [Linear Regression Health Costs Calculator](https://www.freecodecamp.org/learn/machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator), [Neural Network SMS Text Classifier](https://www.freecodecamp.org/learn/machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier)

api-server/src/server/boot/certificate.js

@@ -19,7 +19,8 @@ import {
   certTypeTitleMap,
   certTypeIdMap,
   certIds,
-  oldDataVizId
+  oldDataVizId,
+  superBlockCertTypeMap
 } from '../../../../config/certification-settings';
 
 const {
@@ -49,9 +50,11 @@ export default function bootCertificate(app) {
   const certTypeIds = createCertTypeIds(getChallenges());
   const showCert = createShowCert(app);
   const verifyCert = createVerifyCert(certTypeIds, app);
+  const verifyCanClaimCert = createVerifyCanClaim(certTypeIds, app);
 
   api.put('/certificate/verify', ifNoUser401, ifNoSuperBlock404, verifyCert);
   api.get('/certificate/showCert/:username/:certSlug', showCert);
+  api.get('/certificate/verify-can-claim-cert', verifyCanClaimCert);
 
   app.use(api);
 }
@@ -494,3 +497,76 @@ function createShowCert(app) {
     }, next);
   };
 }
+
+function createVerifyCanClaim(certTypeIds, app) {
+  const { User } = app.models;
+
+  function findUserByUsername$(username, fields) {
+    return observeQuery(User, 'findOne', {
+      where: { username },
+      fields
+    });
+  }
+  return function verifyCert(req, res, next) {
+    const { superBlock, username } = req.query;
+    log(superBlock);
+    let certType = superBlockCertTypeMap[superBlock];
+    log(certType);
+
+    return findUserByUsername$(username, {
+      isFrontEndCert: true,
+      isBackEndCert: true,
+      isFullStackCert: true,
+      isRespWebDesignCert: true,
+      isFrontEndLibsCert: true,
+      isJsAlgoDataStructCert: true,
+      isDataVisCert: true,
+      is2018DataVisCert: true,
+      isApisMicroservicesCert: true,
+      isInfosecQaCert: true,
+      isQaCertV7: true,
+      isInfosecCertV7: true,
+      isSciCompPyCertV7: true,
+      isDataAnalysisPyCertV7: true,
+      isMachineLearningPyCertV7: true,
+      username: true,
+      name: true,
+      isHonest: true,
+      completedChallenges: true
+    }).subscribe(user => {
+      return Observable.of(certTypeIds[certType])
+        .flatMap(challenge => {
+          const certName = certTypeTitleMap[certType];
+          const { tests = [] } = challenge;
+          const { isHonest, completedChallenges } = user;
+          const isProjectsCompleted = canClaim(tests, completedChallenges);
+          let result = 'incomplete-requirements';
+          let status = false;
+
+          if (isHonest && isProjectsCompleted) {
+            status = true;
+            result = 'requirements-met';
+          } else if (isProjectsCompleted) {
+            result = 'projects-completed';
+          } else if (isHonest) {
+            result = 'is-honest';
+          }
+          return Observable.just({
+            type: 'success',
+            message: { status, result },
+            variables: { name: certName }
+          });
+        })
+        .subscribe(message => {
+          return res.status(200).json({
+            response: message,
+            isCertMap: getUserIsCertMap(user),
+            // send back the completed challenges
+            // NOTE: we could just send back the latest challenge, but this
+            // ensures the challenges are synced.
+            completedChallenges: user.completedChallenges
+          });
+        }, next);
+    });
+  };
+}

api-server/src/server/boot/challenge.js

@@ -17,8 +17,8 @@ import { fixCompletedChallengeItem } from '../../common/utils';
 import { getChallenges } from '../utils/get-curriculum';
 import {
   getRedirectParams,
-  getRedirectBase,
+  normalizeParams,
-  normalizeParams
+  getPrefixedLandingPath
 } from '../utils/redirection';
 
 const log = debug('fcc:boot:challenges');
@@ -341,7 +341,7 @@ export function createRedirectToCurrentChallenge(
     const { user } = req;
     const { origin, pathPrefix } = getRedirectParams(req, normalizeParams);
 
-    const redirectBase = getRedirectBase(origin, pathPrefix);
+    const redirectBase = getPrefixedLandingPath(origin, pathPrefix);
     if (!user) {
       return res.redirect(redirectBase + '/learn');
     }

api-server/src/server/boot_tests/challenge.test.js

@@ -339,7 +339,7 @@ describe('boot/challenge', () => {
     });
     const mockNormalizeParams = params => params;
 
-    it('redirects to the learn base url for non-users', async done => {
+    it('redirects to the learn base url for non-users', async () => {
       const redirectToCurrentChallenge = createRedirectToCurrentChallenge(
         () => {},
         mockNormalizeParams,
@@ -351,11 +351,10 @@ describe('boot/challenge', () => {
       await redirectToCurrentChallenge(req, res, next);
 
       expect(res.redirect).toHaveBeenCalledWith(mockLearnUrl);
-      done();
     });
 
     // eslint-disable-next-line max-len
-    it('redirects to the url provided by the challengeUrlResolver', async done => {
+    it('redirects to the url provided by the challengeUrlResolver', async () => {
       const challengeUrlResolver = await createChallengeUrlResolver(
         mockAllChallenges,
         {
@@ -376,11 +375,10 @@ describe('boot/challenge', () => {
       await redirectToCurrentChallenge(req, res, next);
 
       expect(res.redirect).toHaveBeenCalledWith(expectedUrl);
-      done();
     });
 
     // eslint-disable-next-line max-len
-    it('redirects to the first challenge for users without a currentChallengeId', async done => {
+    it('redirects to the first challenge for users without a currentChallengeId', async () => {
       const challengeUrlResolver = await createChallengeUrlResolver(
         mockAllChallenges,
         {
@@ -400,7 +398,6 @@ describe('boot/challenge', () => {
       await redirectToCurrentChallenge(req, res, next);
       const expectedUrl = `${mockHomeLocation}${firstChallengeUrl}`;
       expect(res.redirect).toHaveBeenCalledWith(expectedUrl);
-      done();
     });
   });
 });

api-server/src/server/component-passport.js

@@ -11,9 +11,9 @@ import passportProviders from './passport-providers';
 import { setAccessTokenToResponse } from './utils/getSetAccessToken';
 import {
   getReturnTo,
-  getRedirectBase,
+  getPrefixedLandingPath,
   getRedirectParams,
-  isRootPath
+  haveSamePath
 } from './utils/redirection';
 import { jwtSecret } from '../../../config/secrets';
 import { availableLangs } from '../../../config/i18n/all-langs';
@@ -100,9 +100,14 @@ export const devLoginRedirect = () => {
         };
       }
     );
-    returnTo += isRootPath(getRedirectBase(origin, pathPrefix), returnTo)
+
-      ? '/learn'
+    // if returnTo has a trailing slash, we need to remove it before comparing
-      : '';
+    // it to the prefixed landing path
+    if (returnTo.slice(-1) === '/') {
+      returnTo = returnTo.slice(0, -1);
+    }
+    const redirectBase = getPrefixedLandingPath(origin, pathPrefix);
+    returnTo += haveSamePath(redirectBase, returnTo) ? '/learn' : '';
     return res.redirect(returnTo);
   };
 };
@@ -142,7 +147,7 @@ we recommend using your email address: ${user.email} to sign in instead.
         const state = req && req.query && req.query.state;
         // returnTo, origin and pathPrefix are audited by getReturnTo
         let { returnTo, origin, pathPrefix } = getReturnTo(state, jwtSecret);
-        const redirectBase = getRedirectBase(origin, pathPrefix);
+        const redirectBase = getPrefixedLandingPath(origin, pathPrefix);
 
         // TODO: getReturnTo could return a success flag to show a flash message,
         // but currently it immediately gets overwritten by a second message. We
@@ -150,7 +155,12 @@ we recommend using your email address: ${user.email} to sign in instead.
         // multiple messages to appear at once.
 
         if (user.acceptedPrivacyTerms) {
-          returnTo += isRootPath(redirectBase, returnTo) ? '/learn' : '';
+          // if returnTo has a trailing slash, we need to remove it before comparing
+          // it to the prefixed landing path
+          if (returnTo.slice(-1) === '/') {
+            returnTo = returnTo.slice(0, -1);
+          }
+          returnTo += haveSamePath(redirectBase, returnTo) ? '/learn' : '';
           return res.redirectWithFlash(returnTo);
         } else {
           return res.redirectWithFlash(`${redirectBase}/email-sign-up`);

api-server/src/server/middleware.json

@@ -35,6 +35,7 @@
     "helmet#noSniff": {},
     "helmet#frameguard": {},
     "./middlewares/csurf": {},
+    "./middlewares/csurf-set-cookie": {},
     "./middlewares/constant-headers": {},
     "./middlewares/csp": {},
     "./middlewares/flash-cheaters": {},
@@ -43,6 +44,7 @@
   "files": {},
   "final:after": {
     "./middlewares/sentry-error-handler": {},
+    "./middlewares/csurf-error-handler": {},
     "./middlewares/error-handlers": {},
     "strong-error-handler": {
       "params": {

api-server/src/server/middlewares/csurf-error-handler.js

@@ -0,0 +1,12 @@
+import { csrfOptions } from './csurf.js';
+
+export default function csrfErrorHandler() {
+  return function (err, req, res, next) {
+    if (err.code === 'EBADCSRFTOKEN' && req.csrfToken) {
+      // use the middleware to generate a token. The client sends this back via
+      // a header
+      res.cookie('csrf_token', req.csrfToken(), csrfOptions);
+    }
+    next(err);
+  };
+}

api-server/src/server/middlewares/csurf-set-cookie.js

@@ -0,0 +1,13 @@
+import { csrfOptions } from './csurf.js';
+
+export default function setCSRFCookie() {
+  return function (req, res, next) {
+    // not all paths require a CSRF token, so the function may not be available.
+    if (req.csrfToken && !req.cookies.csrf_token) {
+      // use the middleware to generate a token. The client sends this back via
+      // a header
+      res.cookie('csrf_token', req.csrfToken(), csrfOptions);
+    }
+    next();
+  };
+}

api-server/src/server/middlewares/csurf.js

@@ -1,12 +1,14 @@
 import csurf from 'csurf';
 
-export default function getCsurf() {
+export const csrfOptions = {
-  const protection = csurf({
-    cookie: {
   domain: process.env.COOKIE_DOMAIN || 'localhost',
   sameSite: 'strict',
   secure: process.env.FREECODECAMP_NODE_ENV === 'production'
-    }
+};
+
+export default function getCsurf() {
+  const protection = csurf({
+    cookie: csrfOptions
   });
   return function csrf(req, res, next) {
     const { path } = req;
@@ -14,8 +16,10 @@ export default function getCsurf() {
       // eslint-disable-next-line max-len
       /^\/hooks\/update-paypal$/.test(path)
     ) {
-      return next();
+      next();
+    } else {
+      // add the middleware
+      protection(req, res, next);
     }
-    return protection(req, res, next);
   };
 }

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

@@ -152,7 +152,7 @@ describe('request-authorization', () => {
         expect(next).not.toHaveBeenCalled();
       });
 
-      it('adds the user to the request object', async done => {
+      it('adds the user to the request object', async () => {
         expect.assertions(3);
         const validJWT = jwt.sign({ accessToken }, validJWTSecret);
         const req = mockReq({
@@ -166,10 +166,9 @@ describe('request-authorization', () => {
         expect(next).toHaveBeenCalled();
         expect(req).toHaveProperty('user');
         expect(req.user).toEqual(users['456def']);
-        return done();
       });
 
-      it('adds the jwt to the headers', async done => {
+      it('adds the jwt to the headers', async () => {
         const validJWT = jwt.sign({ accessToken }, validJWTSecret);
         const req = mockReq({
           path: '/some-path/that-needs/auth',
@@ -180,7 +179,6 @@ describe('request-authorization', () => {
         const next = jest.fn();
         await requestAuthorization(req, res, next);
         expect(res.set).toHaveBeenCalledWith('X-fcc-access-token', validJWT);
-        return done();
       });
 
       it('calls next if request does not require authorization', async () => {
@@ -240,7 +238,7 @@ describe('request-authorization', () => {
         expect(next).not.toHaveBeenCalled();
       });
 
-      it('adds the user to the request object', async done => {
+      it('adds the user to the request object', async () => {
         expect.assertions(3);
         const validJWT = jwt.sign({ accessToken }, validJWTSecret);
         const req = mockReq({
@@ -253,10 +251,9 @@ describe('request-authorization', () => {
         expect(next).toHaveBeenCalled();
         expect(req).toHaveProperty('user');
         expect(req.user).toEqual(users['456def']);
-        return done();
       });
 
-      it('adds the jwt to the headers', async done => {
+      it('adds the jwt to the headers', async () => {
         const validJWT = jwt.sign({ accessToken }, validJWTSecret);
         const req = mockReq({
           path: '/some-path/that-needs/auth',
@@ -267,7 +264,6 @@ describe('request-authorization', () => {
         const next = jest.fn();
         await requestAuthorization(req, res, next);
         expect(res.set).toHaveBeenCalledWith('X-fcc-access-token', validJWT);
-        return done();
       });
 
       it('calls next if request does not require authorization', async () => {

api-server/src/server/utils/getSetAccessToken.js

@@ -64,6 +64,7 @@ export function removeCookies(req, res) {
   res.clearCookie('access_token', config);
   res.clearCookie('userId', config);
   res.clearCookie('_csrf', config);
+  res.clearCookie('csrf_token', config);
   return;
 }
 

api-server/src/server/utils/redirection.js

@@ -50,10 +50,7 @@ function normalizeParams(
   return { returnTo, origin, pathPrefix };
 }
 
-// TODO: tests!
+function getPrefixedLandingPath(origin, pathPrefix) {
-// TODO: ensure origin and pathPrefix validation happens first
-// (it needs a dedicated function that can be called from here and getReturnTo)
-function getRedirectBase(origin, pathPrefix) {
   const redirectPathSegment = pathPrefix ? `/${pathPrefix}` : '';
   return `${origin}${redirectPathSegment}`;
 }
@@ -70,14 +67,14 @@ function getRedirectParams(req, _normalizeParams = normalizeParams) {
   return _normalizeParams({ returnTo: returnUrl.href, origin, pathPrefix });
 }
 
-function isRootPath(redirectBase, returnUrl) {
+function haveSamePath(redirectBase, returnUrl) {
   const base = new URL(redirectBase);
   const url = new URL(returnUrl);
   return base.pathname === url.pathname;
 }
 
 module.exports.getReturnTo = getReturnTo;
-module.exports.getRedirectBase = getRedirectBase;
+module.exports.getPrefixedLandingPath = getPrefixedLandingPath;
 module.exports.normalizeParams = normalizeParams;
 module.exports.getRedirectParams = getRedirectParams;
-module.exports.isRootPath = isRootPath;
+module.exports.haveSamePath = haveSamePath;

api-server/src/server/utils/user-stats.test.js

@@ -593,7 +593,7 @@ describe('user stats', () => {
 
     it('resolves a user for a given id', done => {
       expect.assertions(7);
-      return getUserById(mockUserID, mockApp.models.User)
+      getUserById(mockUserID, mockApp.models.User)
         .then(user => {
           expect(user).toEqual(mockUser);
 

client.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.17.1-buster AS builder
+FROM node:14.17.3-buster AS builder
 
 # this is a bit clunky, perhaps there's a more concise way of passing in build
 # arguments
@@ -27,7 +27,7 @@ RUN npm run build:client
 WORKDIR /home/node/config
 RUN git clone https://github.com/freeCodeCamp/client-config.git client
 
-FROM node:14.17.1-alpine
+FROM node:14.17.3-alpine
 RUN npm i -g serve
 USER node
 WORKDIR /home/node

client/gatsby-browser.js

@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
+import cookies from 'browser-cookies';
 
 import i18n from './i18n/config';
 import { createStore } from './src/redux/createStore';
-import AppMountNotifier from './src/components/AppMountNotifier';
+import AppMountNotifier from './src/components/app-mount-notifier';
-import layoutSelector from './utils/gatsby/layoutSelector';
+import layoutSelector from './utils/gatsby/layout-selector';
 
 const store = createStore();
 
@@ -27,3 +28,11 @@ wrapRootElement.propTypes = {
 export const wrapPageElement = layoutSelector;
 
 export const disableCorePrefetching = () => true;
+
+export const onClientEntry = () => {
+  // purge the csrf cookies, rather than relying what the browser decides a
+  // Session duration is
+  cookies.erase('_csrf');
+  // the token must be erased since it is only valid for the old _csrf secret
+  cookies.erase('csrf_token');
+};

client/gatsby-node.js

@@ -132,26 +132,22 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
           } = edge;
 
           if (!fields) {
-            return null;
+            return;
           }
           const { slug, nodeIdentity } = fields;
           if (slug.includes('LICENCE')) {
-            return null;
+            return;
           }
           try {
             if (nodeIdentity === 'blockIntroMarkdown') {
-              if (!blocks.some(block => block === frontmatter.block)) {
+              if (!blocks.includes(frontmatter.block)) {
-                return null;
+                return;
               }
-            } else if (
+            } else if (!superBlocks.includes(frontmatter.superBlock)) {
-              !superBlocks.some(
+              return;
-                superBlock => superBlock === frontmatter.superBlock
-              )
-            ) {
-              return null;
             }
             const pageBuilder = createByIdentityMap[nodeIdentity](createPage);
-            return pageBuilder(edge);
+            pageBuilder(edge);
           } catch (e) {
             console.log(`
             ident: ${nodeIdentity} does not belong to a function
@@ -161,7 +157,6 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
 
             `);
           }
-          return null;
         });
 
         return null;
@@ -172,13 +167,8 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
 
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
-exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
   const newPlugins = [
-    plugins.define({
-      HOME_PATH: JSON.stringify(
-        process.env.HOME_PATH || 'http://localhost:3000'
-      )
-    }),
     // We add the shims of the node globals to the global scope
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer']

client/gatsby-ssr.js

@@ -5,7 +5,7 @@ import { I18nextProvider } from 'react-i18next';
 
 import i18n from './i18n/config';
 import { createStore } from './src/redux/createStore';
-import layoutSelector from './utils/gatsby/layoutSelector';
+import layoutSelector from './utils/gatsby/layout-selector';
 import { getheadTagComponents, getPostBodyComponents } from './utils/tags';
 
 const store = createStore();

client/i18n/locales/chinese-traditional/intro.json

@@ -92,9 +92,9 @@
     "intro": [
       "HTML 和 CSS 控制頁面的內容和樣式，JavaScript 則用於頁面交互。在 JavaScript 算法和數據結構認證中，你將學習 JavaScript 的基礎知識，包括變量、 數組、 對象、 循環和函數。",
       "打好基礎之後，你將會通過創建算法來操作字符串、進行階乘運算甚至計算國際空間站的軌道來應用這些知識。",
-      "在這個過程中，你還會學習兩種重要的編程方式或模式：面向對象的編程（OOP）和函數式編程（FP）。"
+      "Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP)."
     ],
-    "note": "注意：某些瀏覽器擴展，例如廣告攔截器和腳本攔截器，可能干擾測試。如果你遇到問題，我們建議你在學習時禁用修改或阻止頁面內容的擴展。",
+    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block the content of pages while taking the course.",
     "blocks": {
       "basic-javascript": {
         "title": "基礎 JavaScript",
@@ -107,7 +107,7 @@
         "title": "ES6",
         "intro": [
           "ECMAScript（ES）是 JavaScript 的標準。因爲所有主流瀏覽器都遵循此規範，所以 ECMAScript 和 JavaScript 是可以互換的。",
-          "截至目前你所學到的 JavaScript 大多是在 2009 年定稿的 ES5（ECMAScript5）。你仍然可以使用 ES5 編寫程序。JavaScript 在不斷迭代，每年都會發布新功能。",
+          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is constantly evolving, and new features are released every year.",
           "2015 年發佈的 ES6 爲該語言增加了許多強大的新功能。在這個課程中，你將學習這些新功能，包括 <code>let</code>、<code>const</code>、箭頭函數、類、promises 和模塊。"
         ]
       },
@@ -137,15 +137,15 @@
         "title": "基礎算法",
         "intro": [
           "算法是描述如何處理某個問題的一系列步驟。",
-          "要寫一個有效的算法，你需要先將一個特定的問題分解爲小的部分，並仔細思考如何用代碼解決每個部分。",
+          "To write an effective algorithm, it helps to break a problem down into smaller parts and think carefully about how to solve each part with code.",
           "在這個課程中，你將通過編寫算法來實現諸如轉換溫度、處理複雜的二維數組等，來學習算法思維的基礎知識。"
         ]
       },
       "object-oriented-programming": {
         "title": "面向對象編程",
         "intro": [
-          "OOP，即面向對象編程，是軟件開發過程的主要方法之一。在 OOP 中，我們用對象和類來組織代碼，以描述事物的特點以及它們可以做什麼。",
+          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes organize code to describe things and what they can do.",
-          "在這個課程中，你將會學習 JavaScript 中面向對象編程的基本原則，例如 <code>this</code> 關鍵詞、原型鏈、構造器和繼承。"
+          "In this course, you'll learn the basic principles of OOP in JavaScript, including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
         ]
       },
       "functional-programming": {
@@ -259,7 +259,7 @@
     "intro": [
       "數據無處不在。但是，如果沒有上下文，數據就沒有多大意義。",
       "在數據可視化認證中，你會用 D3.js 庫來創建表格、圖表和地圖，以展示不同的數據。",
-      "你還會學習 JSON（JavaScript 對象），以及如何使用 API（應用程序接口）使用在線的數據。"
+      "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programming Interface)."
     ],
     "note": "",
     "blocks": {
@@ -315,7 +315,7 @@
     "intro": [
       "在這之前，你只是在前端使用 JavaScript 來給頁面添加交互、解決算法挑戰，或構建一個 SP。但 JavaScript 也可以用於後端或者服務器來構建整個 web 應用程序。",
       "今天，構建應用軟件的廣受歡迎的方法之一是微服務，這些微服務是一種小型模塊化的應用，能夠共同形成一個更大的整體。",
-      "在 API 和微服務認證中，你將學習如何使用 Node.js 和 npm（Node 包管理工具）來寫後端。你還將使用 Express 框架構建 web 應用程序，並使用 MongoDB 和 Mongoose 庫構建一個 People Finder 微服務。"
+      "In the APIs and Microservices Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
     "note": "",
     "blocks": {

client/i18n/locales/chinese-traditional/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://chinese.freecodecamp.org/news/how-to-donate-to-free-code-camp/"
+  },
+  "nav": {
+    "forum": "https://chinese.freecodecamp.org/forum/",
+    "news": "https://chinese.freecodecamp.org/news/"
   }
 }

client/i18n/locales/chinese-traditional/translations.json

@@ -96,6 +96,7 @@
     "privacy": "你可以通過在本節設置來管理你展示在 freeCodeCamp 公開作品集中的內容。",
     "data": "請點擊下面的 \"下載你的數據\" 按鈕，查看我們在你的賬號上保存的數據",
     "disabled": "如果設置爲僅自己可見，其他人將無法訪問你的認證。",
+    "private-name": "Your name will not appear on your certifications, if this is set to private.",
     "claim-legacy": "當你獲得下列 freeCodeCamp 認證之後，你可以申請 {{cert}}:",
     "for": "{{username}} 賬號設置",
     "username": {
@@ -285,7 +286,8 @@
       "preview": "預覽"
     },
     "help-translate": "我們仍然在翻譯以下證書。",
-    "help-translate-link": "幫助我們翻譯。"
+    "help-translate-link": "幫助我們翻譯。",
+    "coder-survey": "<0>Take the 2021 New Coder Survey</0> (it takes about 10 minutes – do it for science)"
   },
   "donate": {
     "title": "支持我們的非營利組織",
@@ -352,7 +354,7 @@
   },
   "search": {
     "label": "搜索",
-    "placeholder": "搜索 400+ 篇教程",
+    "placeholder": "搜索 500+ 篇教程",
     "see-results": "查看 {{searchQuery}} 的所有結果",
     "no-tutorials": "未找到教程",
     "try": "想要搜索信息？試試使用頁面上的搜索框。",

client/i18n/locales/chinese/intro.json

@@ -92,9 +92,9 @@
     "intro": [
       "HTML 和 CSS 控制页面的内容和样式，JavaScript 则用于页面交互。在 JavaScript 算法和数据结构认证中，你将学习 JavaScript 的基础知识，包括变量、 数组、 对象、 循环和函数。",
       "打好基础之后，你将会通过创建算法来操作字符串、进行阶乘运算甚至计算国际空间站的轨道来应用这些知识。",
-      "在这个过程中，你还会学习两种重要的编程方式或模式：面向对象的编程（OOP）和函数式编程（FP）。"
+      "Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP)."
     ],
-    "note": "注意：某些浏览器扩展，例如广告拦截器和脚本拦截器，可能干扰测试。如果你遇到问题，我们建议你在学习时禁用修改或阻止页面内容的扩展。",
+    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block the content of pages while taking the course.",
     "blocks": {
       "basic-javascript": {
         "title": "基础 JavaScript",
@@ -107,7 +107,7 @@
         "title": "ES6",
         "intro": [
           "ECMAScript（ES）是 JavaScript 的标准。因为所有主流浏览器都遵循此规范，所以 ECMAScript 和 JavaScript 是可以互换的。",
-          "截至目前你所学到的 JavaScript 大多是在 2009 年定稿的 ES5（ECMAScript5）。你仍然可以使用 ES5 编写程序。JavaScript 在不断迭代，每年都会发布新功能。",
+          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is constantly evolving, and new features are released every year.",
           "2015 年发布的 ES6 为该语言增加了许多强大的新功能。在这个课程中，你将学习这些新功能，包括 <code>let</code>、<code>const</code>、箭头函数、类、promises 和模块。"
         ]
       },
@@ -137,15 +137,15 @@
         "title": "基础算法",
         "intro": [
           "算法是描述如何处理某个问题的一系列步骤。",
-          "要写一个有效的算法，你需要先将一个特定的问题分解为小的部分，并仔细思考如何用代码解决每个部分。",
+          "To write an effective algorithm, it helps to break a problem down into smaller parts and think carefully about how to solve each part with code.",
           "在这个课程中，你将通过编写算法来实现诸如转换温度、处理复杂的二维数组等，来学习算法思维的基础知识。"
         ]
       },
       "object-oriented-programming": {
         "title": "面向对象编程",
         "intro": [
-          "OOP，即面向对象编程，是软件开发过程的主要方法之一。在 OOP 中，我们用对象和类来组织代码，以描述事物的特点以及它们可以做什么。",
+          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes organize code to describe things and what they can do.",
-          "在这个课程中，你将会学习 JavaScript 中面向对象编程的基本原则，例如 <code>this</code> 关键词、原型链、构造器和继承。"
+          "In this course, you'll learn the basic principles of OOP in JavaScript, including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
         ]
       },
       "functional-programming": {
@@ -259,7 +259,7 @@
     "intro": [
       "数据无处不在。但是，如果没有上下文，数据就没有多大意义。",
       "在数据可视化认证中，你会用 D3.js 库来创建表格、图表和地图，以展示不同的数据。",
-      "你还会学习 JSON（JavaScript 对象），以及如何使用 API（应用程序接口）使用在线的数据。"
+      "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programming Interface)."
     ],
     "note": "",
     "blocks": {
@@ -315,7 +315,7 @@
     "intro": [
       "在这之前，你只是在前端使用 JavaScript 来给页面添加交互、解决算法挑战，或构建一个 SP。但 JavaScript 也可以用于后端或者服务器来构建整个 web 应用程序。",
       "今天，构建应用软件的广受欢迎的方法之一是微服务，这些微服务是一种小型模块化的应用，能够共同形成一个更大的整体。",
-      "在 API 和微服务认证中，你将学习如何使用 Node.js 和 npm（Node 包管理工具）来写后端。你还将使用 Express 框架构建 web 应用程序，并使用 MongoDB 和 Mongoose 库构建一个 People Finder 微服务。"
+      "In the APIs and Microservices Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
     "note": "",
     "blocks": {

client/i18n/locales/chinese/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://chinese.freecodecamp.org/news/how-to-donate-to-free-code-camp/"
+  },
+  "nav": {
+    "forum": "https://chinese.freecodecamp.org/forum/",
+    "news": "https://chinese.freecodecamp.org/news/"
   }
 }

client/i18n/locales/chinese/translations.json

@@ -96,6 +96,7 @@
     "privacy": "你可以通过在本节设置来管理你展示在 freeCodeCamp 公开作品集中的内容。",
     "data": "请点击下面的 \"下载你的数据\" 按钮，查看我们在你的账号上保存的数据",
     "disabled": "如果设置为仅自己可见，其他人将无法访问你的认证。",
+    "private-name": "Your name will not appear on your certifications, if this is set to private.",
     "claim-legacy": "当你获得下列 freeCodeCamp 认证之后，你可以申请 {{cert}}:",
     "for": "{{username}} 账号设置",
     "username": {
@@ -285,7 +286,8 @@
       "preview": "预览"
     },
     "help-translate": "我们仍然在翻译以下证书。",
-    "help-translate-link": "帮助我们翻译。"
+    "help-translate-link": "帮助我们翻译。",
+    "coder-survey": "<0>Take the 2021 New Coder Survey</0> (it takes about 10 minutes – do it for science)"
   },
   "donate": {
     "title": "支持我们的非营利组织",
@@ -352,7 +354,7 @@
   },
   "search": {
     "label": "搜索",
-    "placeholder": "搜索 400+ 篇教程",
+    "placeholder": "搜索 500+ 篇教程",
     "see-results": "查看 {{searchQuery}} 的所有结果",
     "no-tutorials": "未找到教程",
     "try": "想要搜索信息？试试使用页面上的搜索框。",

client/i18n/locales/english/intro.json

@@ -83,9 +83,9 @@
     "intro": [
       "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
-      "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
+      "Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP)."
     ],
-    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block content of pages, while taking the course.",
+    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block the content of pages while taking the course.",
     "blocks": {
       "basic-javascript": {
         "title": "Basic JavaScript",
@@ -98,7 +98,7 @@
         "title": "ES6",
         "intro": [
           "ECMAScript, or ES, is a standardized version of JavaScript. Because all major browsers follow this specification, the terms ECMAScript and JavaScript are interchangeable.",
-          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is always evolving, and new features are released every year.",
+          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is constantly evolving, and new features are released every year.",
           "ES6, released in 2015, added many powerful new features to the language. In this course, you'll learn these new features, including <code>let</code> and <code>const</code>, arrow functions, classes, promises, and modules."
         ]
       },
@@ -128,15 +128,15 @@
         "title": "Basic Algorithm Scripting",
         "intro": [
           "An algorithm is a series of step-by-step instructions that describe how to do something.",
-          "To write an effective algorithm, it helps to break a problem down into smaller parts, and think carefully about how to solve each part with code.",
+          "To write an effective algorithm, it helps to break a problem down into smaller parts and think carefully about how to solve each part with code.",
           "In this course, you'll learn the fundamentals of algorithmic thinking by writing algorithms that do everything from converting temperatures to handling complex 2D arrays."
         ]
       },
       "object-oriented-programming": {
         "title": "Object Oriented Programming",
         "intro": [
-          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes are used to organize code to describe things and what they can do.",
+          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes organize code to describe things and what they can do.",
-          "In this course, you'll learn the basic principles of OOP in JavaScript including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
+          "In this course, you'll learn the basic principles of OOP in JavaScript, including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
         ]
       },
       "functional-programming": {
@@ -241,7 +241,7 @@
     "intro": [
       "Data is all around us, but it doesn't mean much without shape or context.",
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
-      "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
+      "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programming Interface)."
     ],
     "note": "",
     "blocks": {
@@ -290,7 +290,7 @@
     "intro": [
       "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
-      "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
+      "In the APIs and Microservices Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
     "note": "",
     "blocks": {

client/i18n/locales/english/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/",
+    "news": "https://freecodecamp.org/news/"
   }
 }

client/i18n/locales/english/translations.json

@@ -96,6 +96,7 @@
     "privacy": "The settings in this section enable you to control what is shown on your freeCodeCamp public portfolio.",
     "data": "To see what data we hold on your account, click the \"Download your data\" button below",
     "disabled": "Your certifications will be disabled, if set to private.",
+    "private-name": "Your name will not appear on your certifications, if this is set to private.",
     "claim-legacy": "Once you've earned the following freeCodeCamp certifications, you'll be able to claim the {{cert}}:",
     "for": "Account Settings for {{username}}",
     "username": {
@@ -285,7 +286,8 @@
       "preview": "Preview"
     },
     "help-translate": "We are still translating the following certifications.",
-    "help-translate-link": "Help us translate."
+    "help-translate-link": "Help us translate.",
+    "coder-survey": "<0>Take the 2021 New Coder Survey</0> (it takes about 10 minutes – do it for science)"
   },
   "donate": {
     "title": "Support our nonprofit",

client/i18n/locales/espanol/intro.json

@@ -92,9 +92,9 @@
     "intro": [
       "Mientras HTML y CSS controlan el contenido y el estilo de una página, JavaScript se utiliza para hacerlo interactivo. En la certificación Algoritmos de JavaScript y Estructuras de Datos, aprenderás los fundamentos de JavaScript incluyendo variables, arreglos, objetos, bucles y funciones.",
       "Una vez que tengas los fundamentos, aplicarás ese conocimiento creando algoritmos para manipular cadenas, factorizar números e incluso calcular la órbita de la Estación Espacial Internacional.",
-      "A lo largo del camino, también aprenderás dos estilos o paradigmas importantes de programación: la Programación Orientada a Objetos (OOP), y la Programación Funcional (FP)."
+      "Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP)."
     ],
-    "note": "Nota: Algunas extensiones del navegador, como bloqueadores de anuncios o bloqueadores de scripts pueden interferir con las pruebas. Si se te presentan problemas, te recomendamos deshabilitar las extensiones que modifiquen o bloqueen el contenido de la página, mientras tomas el curso.",
+    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block the content of pages while taking the course.",
     "blocks": {
       "basic-javascript": {
         "title": "JavaScript básico",
@@ -107,7 +107,7 @@
         "title": "ES6",
         "intro": [
           "ECMAScript, o ES, es una versión estandarizada de JavaScript. Debido a que todos los principales navegadores siguen esta especificación, los términos ECMAScript y JavaScript son intercambiables.",
-          "La mayoría del JavaScript que has aprendido hasta este punto estaba en ES5 (ECMAScript 5), el cual fue finalizado en 2009. Aunque puedes seguir escribiendo programas en ES5, JavaScript está evolucionando siempre, y cada año se lanzan nuevas funcionalidades.",
+          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is constantly evolving, and new features are released every year.",
           "ES6, lanzado en 2015, añadió muchas nuevas y potentes características al lenguaje. En este curso, aprenderás estas nuevas características, incluyendo <code>let</code> y <code>const</code>, funciones flecha, clases, promesas, y módulos."
         ]
       },
@@ -137,22 +137,22 @@
         "title": "Programación de algoritmos básicos",
         "intro": [
           "Un algoritmo es una serie de instrucciones paso a paso que describen cómo hacer algo.",
-          "Para escribir un algoritmo efectivo, es de ayuda dividir un problema en pequeñas partes, y pensar detenidamente sobre como resolver cada parte con código.",
+          "To write an effective algorithm, it helps to break a problem down into smaller parts and think carefully about how to solve each part with code.",
           "En este curso, aprenderás los fundamentos del pensamiento algorítmico mediante la escritura de algoritmos que hacen de todo, desde la conversión de temperaturas hasta el manejo de arreglos 2D complejos."
         ]
       },
       "object-oriented-programming": {
         "title": "Programación orientada a objetos",
         "intro": [
-          "OOP, o programación orientada a objetos, es uno de los principales enfoques del proceso de desarrollo de software. En la OOP, los objetos y las clases son usadas para organizar código para describir las cosas y lo que pueden hacer.",
+          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes organize code to describe things and what they can do.",
-          "En este curso, aprenderás los principios básicos de OOP en JavaScript incluyendo la palabra clave <code>this</code>, cadenas prototipo, constructores, y herencias."
+          "In this course, you'll learn the basic principles of OOP in JavaScript, including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
         ]
       },
       "functional-programming": {
         "title": "Programación funcional",
         "intro": [
           "La programación funcional es otro enfoque común en el desarrollo de software. En programación funcional, el código está organizado en funciones más pequeñas y básicas que se pueden combinar para construir programas de mayor complejidad.",
-          "In this course, you'll learn the core concepts of Functional Programming including pure functions, how to avoid mutations, and how to write cleaner code with methods like <code>.map()</code> and <code>.filter()</code>."
+          "En este curso, aprenderás los conceptos básicos de programación funcional incluyendo funciones puras, cómo evitar mutaciones, y cómo escribir código más limpio con métodos como <code>.map()</code> y <code>.filter()</code>."
         ]
       },
       "intermediate-algorithm-scripting": {
@@ -192,64 +192,64 @@
     }
   },
   "front-end-libraries": {
-    "title": "Bibliotecas de desarrollo Front end",
+    "title": "Librerías de desarrollo Front End",
     "intro": [
-      "Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
+      "Ahora que ya estás familiarizado con HTML, CSS y JavaScript, mejora tus habilidades aprendiendo algunas de las librerías de Front End más populares de la industria.",
-      "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
+      "En la certificación de librerías de Front End, aprenderás a diseñar tu sitio rápidamente con Bootstrap. También aprenderás cómo añadir lógica a tus estilos CSS y extenderlos con Sass.",
-      "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
+      "Después, construirás un carrito de compras y otras aplicaciones para aprender a crear poderosas Single Page Applications (SPAs) con React y Redux."
     ],
     "note": "",
     "blocks": {
       "bootstrap": {
         "title": "Bootstrap",
         "intro": [
-          "Bootstrap is a front end framework used to design responsive web pages and applications. It takes a mobile-first approach to web development, and includes pre-built CSS styles and classes, plus some JavaScript functionality.",
+          "Bootstrap es un framework de front end utilizado para diseñar páginas y aplicaciones web. Tiene un enfoque de desarrollo web centrado en los dispositivos móviles e incluye estilos y clases CSS preconfigurados, además de algunas funciones de JavaScript.",
-          "In this course, you'll learn how to build responsive websites with Bootstrap, and use its included classes to style buttons, images, forms, navigation, and other common elements."
+          "En este curso, aprenderás cómo crear sitios web responsivos con Bootstrap, y utilizarás sus clases incluidas para estilizar botones, imágenes, formularios, navegación y otros elementos."
         ]
       },
       "jquery": {
         "title": "jQuery",
         "intro": [
-          "jQuery is one of the most widely used JavaScript libraries in the world.",
+          "jQuery es una de las librerías de JavaScript más utilizadas en el mundo.",
-          "In 2006 when it was released, all major browsers handled JavaScript slightly differently. jQuery simplified the process of writing client-side JavaScript, and also ensured that your code worked the same way in all browsers.",
+          "En 2006, cuando se lanzó, los principales navegadores manejaban JavaScript de forma ligeramente diferente. jQuery simplificó el proceso de escribir JavaScript del lado del cliente, y también garantizó que tu código funcionara de la misma manera en todos los navegadores.",
-          "In this course, you'll learn how to use jQuery to select, remove, clone, and modify different elements on the page."
+          "En este curso, aprenderás a usar jQuery para seleccionar, eliminar, copiar y modificar diferentes elementos en la página."
         ]
       },
       "sass": {
         "title": "SASS",
         "intro": [
-          "Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available in basic CSS, which make it easier for you to simplify and maintain the style sheets for your projects.",
+          "Sass, o \"Syntactically Awesome StyleSheets\", es una extensión del lenguaje CSS. Añade características que no están disponibles en CSS básicos, lo que te facilita simplificar y mantener las hojas de estilo para tus proyectos.",
-          "In this Sass course, you'll learn how to store data in variables, nest CSS, create reusable styles with mixins, add logic and loops to your styles, and more."
+          "En este curso de Sass, aprenderás cómo almacenar datos en variables, anidar CSS, crear estilos reutilizables con mixins, añadir lógica y bucles a tus estilos, y más."
         ]
       },
       "react": {
         "title": "React",
         "intro": [
-          "React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications.",
+          "React es una librería muy popular de JavaScript para construir interfaces de usuario reutilizables, impulsadas por componentes para páginas web o aplicaciones.",
-          "React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application.",
+          "React combina HTML con funcionalidad de JavaScript creando su propio lenguaje de marcado llamado JSX. React hace fácil la administración del flujo de datos a través de la aplicación.",
-          "In this course, you'll learn how to create different React components, manage data in the form of state props, use different lifecycle methods like <code>componentDidMount</code>, and much more."
+          "En este curso, aprenderás cómo crear diferentes componentes de React, administrar las propiedades de estado de los datos, usar diferentes métodos de ciclo de vida como <code>componentDidMount</code> y mucho más."
         ]
       },
       "redux": {
         "title": "Redux",
         "intro": [
-          "As applications grow in size and scope, managing shared data becomes much more difficult. Redux is defined as a \"predictable state container for JavaScript apps\" that helps ensure your apps work predictably, and are easier to test.",
+          "A medida que las aplicaciones crecen en tamaño y alcance, la gestión de datos compartidos se vuelve mucho más difícil. Redux se define como un \"contenedor de estado predecible para aplicaciones de JavaScript\" que ayuda a asegurar que tus aplicaciones funcionen de manera predecible, y sean más fáciles de probar.",
-          "While you can use Redux with any view library, we introduce Redux here before combining it with React in the next set of courses.",
+          "Aunque puedes usar Redux con cualquier librería de vistas, aquí introducimos Redux antes de combinarlo con React en los siguientes capítulos del curso.",
-          "In this course, you'll learn the fundamentals of Redux stores, actions, reducers and middleware to manage data throughout your application."
+          "En este curso, aprenderás los fundamentos de almacenamiento en Redux, así como de las acciones, reductores e intermediarios para administrar datos a lo largo de tu aplicación."
         ]
       },
       "react-and-redux": {
-        "title": "React and Redux",
+        "title": "React y Redux",
         "intro": [
-          "React and Redux are often mentioned together, and with good reason. The developer who created Redux was a React developer who wanted to make it easier to share data across different components.",
+          "React y Redux se mencionan a menudo juntos, y con razón. El desarrollador que creó Redux era un desarrollador de React que quería hacer más fácil compartir datos a través de diferentes componentes.",
-          "Now that you know how to manage the flow of shared data with Redux, it's time to combine that knowledge with React. In the React and Redux courses, you'll build a React component and learn how to manage state locally at the component level, and throughout the entire application with Redux."
+          "Ahora que sabes cómo administrar el flujo de datos compartidos con Redux, es hora de combinar ese conocimiento con React. En los cursos de React y Redux, construirás un componente de React y aprenderás cómo administrar el estado localmente a nivel de componentes, y a lo largo de toda la aplicación con Redux."
         ]
       },
       "front-end-libraries-projects": {
-        "title": "Front End Development Libraries Projects",
+        "title": "Proyectos de librerías de desarrollo Front End",
         "intro": [
-          "It's time to put your front end development libraries skills to the test. Use Bootstrap, jQuery, Sass, React, and Redux to build 5 projects that will test everything you've learned up to this point.",
+          "Es hora de poner a prueba tus habilidades con las librerías de desarrollo front end. Usa Bootstrap, jQuery, Sass, React, y Redux para construir 5 proyectos que probarán todo lo que has aprendido hasta este punto.",
-          "Complete all 5 projects, and you'll earn the Front End Development Libraries certification."
+          "Completa los 5 proyectos y obtendrás la certificación librerías de desarrollo Front End."
         ]
       }
     }
@@ -259,7 +259,7 @@
     "intro": [
       "Los datos están a nuestro alrededor, pero no significan mucho si no tienen forma o contexto.",
       "En la certificación Visualización de Datos, construirás diagramas, gráficos, y mapas para presentar diferentes tipos de datos utilizando la biblioteca D3.js.",
-      "También aprenderás acerca de JSON (JavaScript Object Notation), y cómo trabajar con datos en línea usando una API (Application Programing Interface)."
+      "También aprenderás acerca de JSON (JavaScript Object Notation), y cómo trabajar con datos en línea usando un API (Application Programing Interface)."
     ],
     "note": "",
     "blocks": {
@@ -276,19 +276,19 @@
         "title": "APIs JSON y AJAX",
         "intro": [
           "De forma similar a la que las interfaces de usuario \"UI\" ayudan a la gente a usar programas, las APIs (Interfaces de Programación de Aplicación) ayudan a los programas a interactuar con otros programas. Las APIs son herramientas que los ordenadores utilizan para comunicarse entre sí, en parte para enviar y recibir datos.",
-          "Programmers often use AJAX (Asynchronous JavaScript and XML) when working with APIs. AJAX refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. And the data transferred between the browser and server is often in a format called JSON (JavaScript Object Notation).",
+          "Los programadores a menudo usan AJAX (Asynchronous JavaScript y XML) cuando trabajan con APIs. AJAX se refiere a un grupo de tecnologías que hacen peticiones asíncronas a un servidor para transferir datos, y luego cargar cualquier dato devuelto en la página. Y los datos transferidos entre el navegador y el servidor suelen estar en un formato llamado JSON (JavaScript Object Notation).",
-          "This course will teach you the basics about working with APIs and different AJAX technologies in the browser."
+          "Este curso te enseñará lo básico sobre trabajar con APIs y diferentes tecnologías AJAX en el navegador."
         ]
       },
       "data-visualization-projects": {
-        "title": "Data Visualization Projects",
+        "title": "Proyectos de visualización de datos",
         "intro": [
-          "Now that you learned how to work with D3, APIs, and AJAX technologies, put your skills to the test with these 5 Data Visualization projects.",
+          "Ahora que has aprendido a trabajar con las tecnologías D3, APIs y AJAX, pon a prueba tus habilidades con estos 5 proyectos de visualización de datos.",
-          "In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification."
+          "En estos proyectos, necesitarás obtener datos y analizar un conjunto de datos y después usar D3 para crear diferentes visualizaciones de datos. Termínalos todos para obtener tu certificación de visualización de datos."
         ]
       },
       "d3-dashboard": {
-        "title": "D3 Dashboard",
+        "title": "Panel D3",
         "intro": [
           "",
           ""
@@ -297,15 +297,15 @@
     }
   },
   "relational-databases": {
-    "title": "Relational Databases",
+    "title": "Bases de Datos Relacionales",
     "intro": [
-      "placeholder"
+      "marcador de posición"
     ],
     "blocks": {
       "learn-relational-databases": {
-        "title": "Learn Relational Databases",
+        "title": "Aprender Bases de Datos Relacionales",
         "intro": [
-          "placeholder"
+          "marcador de posición"
         ]
       }
     }
@@ -313,41 +313,41 @@
   "apis-and-microservices": {
     "title": "APIs y Microservicios",
     "intro": [
-      "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
+      "Hasta este punto, sólo has usado JavaScript en la parte de front end para añadir interactividad a una página, resolver los desafíos de algoritmos o construir un SPA. Pero JavaScript también se puede utilizar en el back end, o servidor, para construir aplicaciones web completas.",
-      "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
+      "Hoy en día, una de las formas populares de construir aplicaciones es a través de microservicios, que son pequeñas aplicaciones modulares que trabajan juntas para formar un todo más grande.",
-      "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
+      "In the APIs and Microservices Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
     "note": "",
     "blocks": {
       "managing-packages-with-npm": {
-        "title": "Managing Packages with NPM",
+        "title": "Gestión de paquetes con NPM",
         "intro": [
-          "npm (Node Package Manager), is a command line tool to install, create, and share packages of JavaScript code written for Node.js. There are many open source packages available on npm, so before starting a project, take some time to explore so you don't end up recreating the wheel for things like working with dates or fetching data from an API.",
+          "npm (Node Package Manager), es una herramienta de línea de comandos para instalar, crear y compartir paquetes de código JavaScript escritos para Node.js. Hay muchos paquetes de código abierto disponibles en npm, así que antes de iniciar un proyecto, tómate algo de tiempo para explorar los diferentes paquetes, para que no termines reinventando la rueda para cosas comunes como trabajar con fechas y obtener datos de una API.",
-          "In this course, you'll learn the basics of using npm, including how to work with the <code>package.json</code> and how to manage your installed dependencies."
+          "En este curso, aprenderás los conceptos básicos del uso de npm, incluyendo cómo trabajar con el <code>package.json</code> y cómo administrar las dependencias instaladas."
         ]
       },
       "basic-node-and-express": {
-        "title": "Basic Node and Express",
+        "title": "Node y Express básicos",
         "intro": [
-          "Node.js is a JavaScript runtime that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules — small, independent programs — that help with this. Some of the core modules include HTTP, which acts like a server, and File System, a module to read and modify files.",
+          "Node.js es un entorno que trabaja en tiempo de ejecución de JavaScript que permite a los desarrolladores escribir programas de backend (del lado del servidor) en JavaScript. Node.js viene con un puñado de módulos integrados — pequeños programas independientes — que ayudan con esto. Algunos de los módulos principales incluyen HTTP, que actúa como un servidor, y File System, un módulo para leer y modificar archivos.",
-          "In the last set of courses you learned to install and manage packages from npm, which are collections of smaller modules. These packages can help you build larger, more complex applications.",
+          "En el último conjunto de cursos aprendiste a instalar y administrar paquetes desde npm, que son colecciones de módulos más pequeños. Estos paquetes pueden ayudarte a construir aplicaciones más grandes y complejas.",
-          "Express is a lightweight web application framework, and is one of the most popular packages on npm. Express makes it much easier to create a server and handle routing the routing for your application, which handles things like direct people to the correct page when they visit a certain endpoint like <pre>/blog</pre>.",
+          "Express es un framework de aplicaciones web ligero, y es uno de los paquetes más populares de npm. Express hace que sea mucho más fácil crear un servidor y manejar el enrutamiento de tu aplicación, que gestiona cosas como dirigir a la gente a la página correcta cuando visitan un determinado endpoint como <pre>/blog</pre>.",
-          "In this course, you'll learn the basics of Node and Express including how to create a server, serve different files, and handle different requests from the browser."
+          "En este curso, aprenderás los conceptos básicos de Node y Express incluyendo cómo crear un servidor, servir diferentes archivos y manejar diferentes peticiones desde el navegador."
         ]
       },
       "mongodb-and-mongoose": {
-        "title": "MongoDB and Mongoose",
+        "title": "MongoDB y Mongoose",
         "intro": [
-          "MongoDB is a database application that stores JSON documents (or records) that you can use in your application. Unlike SQL, another type of database, Mongo is a non-relational or \"NoSQL\" database. This means Mongo stores all associated data within one record, instead of storing it across many preset tables as in a SQL database.",
+          "MongoDB es una aplicación de base de datos que almacena documentos (o registros) JSON que puedes utilizar en tu aplicación. A diferencia de SQL, otro tipo de base de datos, Mongo es una base de datos no relacional o \"NoSQL\". Esto significa que Mongo almacena todos los datos asociados dentro de un registro en lugar de almacenarlos en varias tablas predefinidas como en una base de datos SQL.",
-          "Mongoose is a popular npm package that is often installed alongside Mongo. With Mongoose, you can use plain JavaScript objects instead of JSON, which makes it easier to work with Mongo. Also, it allows you to create blueprints for your documents called schemas, so you don't accidentally save the wrong type of data and cause bugs later.",
+          "Mongoose es un popular paquete npm que a menudo se instala junto con Mongo. Con Mongoose, puedes utilizar objetos de JavaScript simples en lugar de JSON, lo que hace más fácil trabajar con Mongo. Además, te permite crear plantillas para tus documentos llamados esquemas, para que no guarde accidentalmente el tipo equivocado de datos y cause errores más tarde.",
-          "In the MongoDB and Mongoose courses, you'll learn the fundamentals of working with persistent data including how to set up a model, and save, delete, and find documents in the database."
+          "En los cursos de MongoDB y Mongoose, aprenderás los fundamentos para trabajar con datos persistentes, incluyendo cómo configurar un modelo, guardar, eliminar y encontrar documentos en la base de datos."
         ]
       },
       "apis-and-microservices-projects": {
-        "title": "APIs and Microservices Projects",
+        "title": "Proyectos de microservicios y APIs",
         "intro": [
-          "You've worked with APIs before, but now that you know npm, Node, Express, MongoDB, and Mongoose, it's time to build your own. Draw on everything you've learned up to this point to create 5 different microservices, which are smaller applications that are limited in scope.",
+          "Has trabajado con APIs antes, pero ahora que conoces npm, Node, Express, MongoDB y Mongoose, es el momento de construir tu propia API. Basado en todo lo que ha aprendido hasta este punto, crearás 5 microservicios diferentes, que son aplicaciones más pequeñas que tienen un alcance limitado.",
-          "After creating these, you'll have 5 cool microservice APIs you can show off to friends, family, and potential employers. Oh, and you'll have a shiny new APIs and Microservices Certification, too."
+          "Después de crearlas, tendrás 5 APIs de microservicios interesantes que puedes mostrar a amigos, familiares y potenciales empleadores. Oh, y también tendrás una nueva y brillante certificación de APIs y microservicios."
         ]
       }
     }
@@ -355,33 +355,33 @@
   "quality-assurance": {
     "title": "Control de Calidad",
     "intro": [
-      "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
+      "A medida que tus programas o aplicaciones web se vuelven más complejos, querrás probarlos para asegurarte de que los nuevos cambios no rompan su funcionalidad original.",
-      "In the Quality Assurance Certification, you'll learn how to write tests with Chai to ensure your applications work the way you expect them to.",
+      "En la certificación de control de calidad, aprenderás a escribir pruebas con Chai para asegurarte de que tus aplicaciones funcionan como esperas.",
-      "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
+      "Luego construirás una aplicación de chat para aprender conceptos avanzados de Node y Express. También usarás Pug como motor de plantillas, Passport para autenticación y Socket.io para la comunicación en tiempo real entre el servidor y los clientes conectados."
     ],
     "note": "",
     "blocks": {
       "quality-assurance-and-testing-with-chai": {
-        "title": "Quality Assurance and Testing with Chai",
+        "title": "Control de calidad y pruebas con Chai",
         "intro": [
-          "Chai is a JavaScript testing library that helps you confirm that your program still behaves the way you expect it to after you make changes to your code.",
+          "Chai es una librería de pruebas de JavaScript que te ayuda a confirmar que tu programa todavía se comporta de la manera que esperas después de realizar cambios en tu código.",
-          "Using Chai, you can write tests that describe your program's requirements and see if your program meets them.",
+          "Usando Chai, puedes escribir pruebas que describan los requisitos de tu programa y ver si tu programa los cumple.",
-          "In this course, you'll learn about assertions, deep equality, truthiness, testing APIs, and other fundamentals for testing JavaScript applications."
+          "En este curso, aprenderá sobre aserciones, igualdad profunda, veracidad, pruebas de APIs y otros fundamentos para probar aplicaciones JavaScript."
         ]
       },
       "advanced-node-and-express": {
-        "title": "Advanced Node and Express",
+        "title": "Node y Express avanzados",
         "intro": [
-          "Now it's time to take a deep dive into Node.js and Express.js by building a chat application with a sign-in system.",
+          "Ahora es el momento de sumergirse en Node.js y Express.js construyendo una aplicación de chat con un sistema de inicio de sesión.",
-          "To implement the sign-in system safely, you'll need to learn about authentication. This is the act of verifying the identity of a person or process.",
+          "Para implementar el sistema de inicio de sesión de forma segura, necesitarás aprender acerca de autenticación. Este es el acto de verificar la identidad de una persona o proceso.",
-          "In this course, you'll learn how to use Passport to manage authentication, Pug to create reusable templates for quickly building the front end, and web sockets for real-time communication between the clients and server."
+          "En este curso, aprenderás cómo utilizar Passport para administrar la autenticación, Pug para crear plantillas reutilizables para construir rápidamente el front end, y web sockets para comunicación en tiempo real entre los clientes y el servidor."
         ]
       },
       "quality-assurance-projects": {
         "title": "Quality Assurance Projects",
         "intro": [
-          "Now that you're well versed in both the front end and back end, it's time to apply all the skills and concepts you've learned up to this point. You'll build 5 different web applications, and write tests for each one to make sure they're working and can handle different edge cases.",
+          "Ahora que estas versado tanto en el front end como en el back end, es tiempo de aplicar todas tus nuevas habilidades y los conceptos que has aprendido hasta el momento. Construirás 5 aplicaciones web diferentes y escribirás pruebas para cada una de ellas, para estar seguro de que funcionarán y que tus aplicaciones pueden manejar diferentes casos extremos.",
-          "After completing these Quality Assurance projects, you'll have 5 more projects under your belt, and a new certification to show off on your portfolio."
+          "Después de completar estos proyectos de Control de Calidad, tendrás 5 proyectos más en tu currículum, y una nueva certificación para mostrar en tu portafolio."
         ]
       }
     }
@@ -389,22 +389,22 @@
   "scientific-computing-with-python": {
     "title": "Cálculo Científico con Python",
     "intro": [
-      "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
+      "Hoy en día, Python es uno de los lenguajes de programación más populares y flexibles. Puedes usarlo para todo, desde programas básicos hasta machine learning.",
-      "In the Scientific Computing with Python Certification, you'll learn Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
+      "En la certificación de Cálculo Científico con Python, aprenderás los fundamentos de Python tales como: variables, bucles, condicionales, y funciones. Luego, avanzarás rápidamente por estructura de datos complejas, redes, base de datos relacionales y visualización de datos."
     ],
     "note": "",
     "blocks": {
       "python-for-everybody": {
         "title": "Python for Everybody",
         "intro": [
-          "Python for everybody is a free video course series that teaches the basics of using Python 3.",
+          "Python para todos, es una serie de videocursos gratuitos, que enseña los conceptos básicos del uso de Python 3.",
-          "The courses were created by Dr. Charles Severance (also known as Dr. Chuck). He is a Clinical Professor at the University of Michigan School of Information, where he teaches various technology-oriented courses including programming, database design, and web development."
+          "Los cursos fueron creados por el Dr. Charles Severance (también conocido como Dr. Chuck). El es un Profesor de Clínica en la Escuela de Información de la Universidad de Michigan, donde él enseña varios cursos orientados a tecnología, diseño de bases de datos y desarrollo web."
         ]
       },
       "scientific-computing-with-python-projects": {
         "title": "Scientific Computing with Python Projects",
         "intro": [
-          "Time to put your Python skills to the test. By completing these projects, you will demonstrate that you have a good foundational knowledge of Python and qualify for the Scientific Computing with Python Certification."
+          "Es momento de poner a prueba tus habilidades con Python. Al completar estos proyectos, demostrarás que tienes el conocimiento fundamental de Python y que calificas para la Certificación de cálculo científico con Python."
         ]
       }
     }

client/i18n/locales/espanol/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/espanol/",
+    "news": "https://freecodecamp.org/espanol/news/"
   }
 }

client/i18n/locales/espanol/translations.json

@@ -96,6 +96,7 @@
     "privacy": "Los ajustes de esta sección te permiten controlar lo que se muestra en tu portafolio público de freeCodeCamp.",
     "data": "Para ver qué datos tenemos en tu cuenta, haz clic en el botón \"Descarga tus datos\" a continuación",
     "disabled": "Tus certificaciones se deshabilitarán si se configuran como privadas.",
+    "private-name": "Tu nombre no aparecerá en tus certificaciones, si está establecido como privado.",
     "claim-legacy": "Una vez que hayas obtenido las siguientes certificaciones de FreeCodeCamp, podrás reclamar la {{cert}}:",
     "for": "Ajustes de cuenta de {{username}}",
     "username": {
@@ -285,7 +286,8 @@
       "preview": "Vista"
     },
     "help-translate": "Todavía estamos traduciendo las siguientes certificaciones.",
-    "help-translate-link": "Ayúdanos a traducir."
+    "help-translate-link": "Ayúdanos a traducir.",
+    "coder-survey": "<0>Take the 2021 New Coder Survey</0> (it takes about 10 minutes – do it for science)"
   },
   "donate": {
     "title": "Apoya a nuestra organización sin fines de lucro",
@@ -396,7 +398,7 @@
     "shield": "Un escudo con una marca de verificación",
     "tensorflow": "Icono de Tensorflow",
     "algorithm": "Nodos ramificados",
-    "magnifier": "magnifier"
+    "magnifier": "lupa"
   },
   "aria": {
     "fcc-logo": "Logo de freeCodeCamp",
@@ -559,7 +561,7 @@
   },
   "certification-card": {
     "title": "Reclamar tu certificación",
-    "intro": "Complete the following steps to claim and view your {{i18nCertText}}",
+    "intro": "Completa los siguientes pasos para reclamar y ver tu {{i18nCertText}}",
     "complete-project": "Completa {{i18nCertText}} proyectos",
     "accept-honesty": "Acepta nuestra política de honestidad académica",
     "set-name": "Establece tu nombre, y hazlo público",

client/i18n/locales/italian/intro.json

@@ -94,7 +94,7 @@
       "Una volta che avrai appreso le basi, applicherai questa conoscenza creando algoritmi per manipolare stringhe, fattorizzare numeri, e persino calcolare l'orbita della Stazione Spaziale Internazionale.",
       "Lungo il percorso, imparerai anche due importanti stili di programmazione o paradigmi: Programmazione Orientata agli Oggetti (Object Oriented Programming, OOP) e Programmazione Funzionale (Functional Programming, FP)."
     ],
-    "note": "Nota: Alcune estensioni del browser, come ad esempio gli ad-blocker e gli script-blocker, possono interferire con i test. In caso di problemi, ti raccomandiamo di disabilitare durante il corso le estensioni che modificano o bloccano il contenuto delle pagine.",
+    "note": "Nota: Alcune estensioni del browser, come ad esempio gli ad-blocker e gli script-blocker, possono interferire con i test. In caso di problemi, ti raccomandiamo di disabilitare le estensioni che modificano o bloccano il contenuto delle pagine durante il corso.",
     "blocks": {
       "basic-javascript": {
         "title": "JavaScript Base",
@@ -137,7 +137,7 @@
         "title": "Scrittura di Algoritmi Base",
         "intro": [
           "Un algoritmo è una serie di istruzioni passo-passo che descrivono come fare qualcosa.",
-          "Per scrivere un algoritmo efficace, aiuta spezzare un problema in parti più piccole, e pensare attentamente a come risolvere ogni parte con il codice.",
+          "Per scrivere un algoritmo efficace, aiuta spezzare un problema in parti più piccole e pensare attentamente a come risolvere ogni parte con il codice.",
           "In questo corso, imparerai i fondamenti del pensiero algoritmico scrivendo algoritmi che fanno di tutto, dalla conversione delle temperature alla gestione di complessi array 2D."
         ]
       },
@@ -259,7 +259,7 @@
     "intro": [
       "I dati ci circondano, ma non ci dicono molto senza forma o contesto.",
       "Nella Certificazione Visualizzazione dei Dati, costruirai diagrammi, grafici e mappe per presentare diversi tipi di dati con la libreria D3.js.",
-      "Imparerai anche JSON (JavaScript Object Notation), e come lavorare con i dati online utilizzando un'API (Application Programing Interface)."
+      "Imparerai anche JSON (JavaScript Object Notation), e come lavorare con i dati online utilizzando un'API (Application Programming Interface)."
     ],
     "note": "",
     "blocks": {
@@ -315,7 +315,7 @@
     "intro": [
       "Fino a questo punto, hai usato solo JavaScript sul front-end per aggiungere interattività a una pagina, risolvere sfide algoritmiche o costruire una Single Page Application. Ma JavaScript può essere utilizzato anche nel backend (cioè lato server), per costruire intere applicazioni web.",
       "Oggi, uno dei modi più popolari per costruire applicazioni è attraverso i microservizi, che sono piccole applicazioni modulari che lavorano insieme per formare qualcosa di più grande.",
-      "Nelle Certificazione API e Microservizi, imparerai a scrivere per il backend con Node.js e npm (Node Package Manager). Costruirai anche applicazioni web con il framework Express, e costruirai un microservizio Trova Persone con MongoDB e la libreria Mongoose."
+      "In the APIs and Microservices Certification, you'll learn how to write back end apps with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
     ],
     "note": "",
     "blocks": {

client/i18n/locales/italian/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/italiano/",
+    "news": "https://freecodecamp.org/italian/news/"
   }
 }

client/i18n/locales/italian/motivation.json

@@ -1,819 +1,56 @@
 {
   "compliments": [
-    "Over the top!",
+    "A tutta birra!",
-    "Down the rabbit hole we go!",
+    "Pikachu, scelgo te!",
-    "Bring that rain!",
+    "Hai fegato!",
-    "Target acquired.",
+    "Alla Batmobile",
-    "Feel that need for speed!",
+    "Tu sei un mago, Harry",
-    "You've got guts!",
+    "È così che si fa!",
-    "We have liftoff!",
+    "Leggen - non ti muovere - dario!",
-    "To infinity and beyond!",
+    "Potere del cristallo di Luna!",
-    "Encore!",
+    "Mitico!!!",
-    "Onward!",
+    "Verso l'infinito e oltre!"
-    "Challenge destroyed!",
-    "It's on like Donkey Kong!",
-    "Power level? It's over 9000!",
-    "Coding spree!",
-    "Code long and prosper.",
-    "The crowd goes wild!",
-    "One for the guinness book!",
-    "Flawless victory!",
-    "Most efficient!",
-    "You've got the touch!",
-    "You're on fire!",
-    "The town is now red!",
-    "To the nines!",
-    "To the Batmobile!",
-    "Pull out all the stops!",
-    "You're a wizard, Harry!",
-    "You're an all star!",
-    "Way to go!",
-    "Outta sight!",
-    "You're crushing it!",
-    "What sorcery is this?",
-    "The world rejoices!",
-    "That's the way it's done!",
-    "You rock!",
-    "Woo-hoo!",
-    "We knew you could do it!",
-    "Hyper Combo Finish!",
-    "Nothing but net!",
-    "Boom-shakalaka!",
-    "You're a shooting star!",
-    "You're unstoppable!",
-    "Way cool!",
-    "Walk on that sunshine!",
-    "Keep on trucking!",
-    "Off the charts!",
-    "There is no spoon!",
-    "Cranked it up to 11!",
-    "Escape velocity reached!",
-    "You make this look easy!",
-    "Passed with flying colors!",
-    "You've got this!",
-    "Happy, happy, joy, joy!",
-    "Tomorrow, the world!",
-    "Your powers combined!",
-    "It's alive. It's alive!",
-    "Sonic Boom!",
-    "Here's looking at you, Code!",
-    "Ride like the wind!",
-    "Legen - wait for it - dary!",
-    "Ludicrous Speed! Go!",
-    "Most triumphant!",
-    "One loop to rule them all!",
-    "By the power of Grayskull!",
-    "You did it!",
-    "Storm that castle!",
-    "Face-melting guitar solo!",
-    "Checkmate!",
-    "Bodacious!",
-    "Tubular!",
-    "You're outta sight!",
-    "Keep calm and code on!",
-    "Even sad panda smiles!",
-    "Even grumpy cat approves!",
-    "Kool Aid Man says oh yeah!",
-    "Bullseye!",
-    "Far out!",
-    "You're heating up!",
-    "Standing ovation!",
-    "Nice one!",
-    "All right!",
-    "Hasta la vista, challenge!",
-    "Terminated.",
-    "Off the hook!",
-    "Thundercats, Hooo!",
-    "Shiver me timbers!",
-    "Raise the roof!",
-    "Bingo!",
-    "Even honeybadger cares!",
-    "Helm, Warp Nine. Engage!",
-    "Gotta code 'em all!",
-    "Spool up the FTL drive!",
-    "Cool beans!",
-    "They're in another castle.",
-    "Power UP!",
-    "Pikachu chooses you!",
-    "I gotta have more cow bell.",
-    "Gotta go fast!",
-    "Yipee!",
-    "Cowabunga!",
-    "Moon Prism Power!",
-    "Plus Ultra!"
   ],
   "motivationalQuotes": [
     {
-      "quote": "Whatever you are, be a good one.",
+      "quote": "Se i costruttori costruissero come i programmatori programmano, il primo picchio che passa potrebbe distruggere la civiltà.",
-      "author": "Abraham Lincoln"
+      "author": "Artur Bloch, Seconda legge di Weinberg"
     },
     {
-      "quote": "A change in perspective is worth 80 IQ points.",
+      "quote": "I bravi programmatori sanno cosa scrivere. I migliori sanno cosa riscrivere.",
-      "author": "Alan Kay"
+      "author": "Eric Steven Raymond"
     },
     {
-      "quote": "The best way to predict the future is to invent it.",
+      "quote": "Misurare i progressi della programmazione dalle linee di codice è come misurare i progressi nella costruzione di aerei dal loro peso.",
-      "author": "Alan Kay"
+      "author": "Bill Gates"
     },
     {
-      "quote": "The future is not laid out on a track. It is something that we can decide, and to the extent that we do not violate any known laws of the universe, we can probably make it work the way that we want to.",
+      "quote": "Il passato non può essere cambiato. Il futuro è ancora in tuo potere.",
-      "author": "Alan Kay"
+      "author": "Confucio"
     },
     {
-      "quote": "We can only see a short distance ahead, but we can see plenty there that needs to be done.",
+      "quote": "Vendi la tua intelligenza e compra lo sconcerto.",
-      "author": "Alan Turing"
-    },
-    {
-      "quote": "In the depth of winter, I finally learned that within me there lay an invincible summer.",
-      "author": "Albert Camus"
-    },
-    {
-      "quote": "A person who never made a mistake never tried anything new.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Creativity is intelligence having fun.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "I have no special talents. I am only passionately curious.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Make everything as simple as possible, but not simpler.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Never memorize something that you can look up.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Once we accept our limits, we go beyond them.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Play is the highest form of research.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "We cannot solve our problems with the same thinking we used when we created them.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Wisdom is not a product of schooling but of the lifelong attempt to acquire it.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "Your imagination is your preview of life's coming attractions.",
-      "author": "Albert Einstein"
-    },
-    {
-      "quote": "There is only one corner of the universe you can be certain of improving, and that's your own self.",
-      "author": "Aldous Huxley"
-    },
-    {
-      "quote": "The most common way people give up their power is by thinking they don't have any.",
-      "author": "Alice Walker"
-    },
-    {
-      "quote": "Follow your inner moonlight. Don't hide the madness.",
-      "author": "Allen Ginsberg"
-    },
-    {
-      "quote": "The most difficult thing is the decision to act. The rest is merely tenacity.",
-      "author": "Amelia Earhart"
-    },
-    {
-      "quote": "Life shrinks or expands in proportion with one's courage.",
-      "author": "Anaïs Nin"
-    },
-    {
-      "quote": "Weeks of programming can save you hours of planning.",
-      "author": "Unknown"
-    },
-    {
-      "quote": "Quality is not an act, it is a habit.",
-      "author": "Aristotle"
-    },
-    {
-      "quote": "Start where you are. Use what you have. Do what you can.",
-      "author": "Arthur Ashe"
-    },
-    {
-      "quote": "Nothing is impossible, the word itself says \"I'm possible\"!",
-      "author": "Audrey Hepburn"
-    },
-    {
-      "quote": "Every strike brings me closer to the next home run.",
-      "author": "Babe Ruth"
-    },
-    {
-      "quote": "By failing to prepare, you are preparing to fail.",
-      "author": "Benjamin Franklin"
-    },
-    {
-      "quote": "Tell me and I forget.  Teach me and I remember.  Involve me and I learn.",
-      "author": "Benjamin Franklin"
-    },
-    {
-      "quote": "Well done is better than well said.",
-      "author": "Benjamin Franklin"
-    },
-    {
-      "quote": "There are no short cuts to any place worth going.",
-      "author": "Beverly Sills"
-    },
-    {
-      "quote": "Controlling complexity is the essence of computer programming.",
-      "author": "Brian Kernighan"
-    },
-    {
-      "quote": "I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.",
-      "author": "Bruce Lee"
-    },
-    {
-      "quote": "There are far, far better things ahead than any we leave behind.",
-      "author": "C.S. Lewis"
-    },
-    {
-      "quote": "We are what we believe we are.",
-      "author": "C.S. Lewis"
-    },
-    {
-      "quote": "With the possible exception of the equator, everything begins somewhere.",
-      "author": "C.S. Lewis"
-    },
-    {
-      "quote": "You are never too old to set another goal, or to dream a new dream.",
-      "author": "C.S. Lewis"
-    },
-    {
-      "quote": "Somewhere, something incredible is waiting to be known.",
-      "author": "Carl Sagan"
-    },
-    {
-      "quote": "If you're not making mistakes, then you're not making decisions.",
-      "author": "Catherine Cook"
-    },
-    {
-      "quote": "Find what you love and let it kill you.",
-      "author": "Charles Bukowski"
-    },
-    {
-      "quote": "What matters most is how well you walk through the fire.",
-      "author": "Charles Bukowski"
-    },
-    {
-      "quote": "It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.",
-      "author": "Charles Darwin"
-    },
-    {
-      "quote": "Life is 10% what happens to you and 90% how you react to it.",
-      "author": "Charles R. Swindoll"
-    },
-    {
-      "quote": "You will do foolish things, but do them with enthusiasm.",
-      "author": "Colette"
-    },
-    {
-      "quote": "It does not matter how slowly you go as long as you do not stop.",
-      "author": "Confucius"
-    },
-    {
-      "quote": "Real knowledge is to know the extent of one's ignorance.",
-      "author": "Confucius"
-    },
-    {
-      "quote": "The past cannot be changed. The future is yet in your power.",
-      "author": "Confucius"
-    },
-    {
-      "quote": "Looking at code you wrote more than two weeks ago is like looking at code you are seeing for the first time.",
-      "author": "Dan Hurvitz"
-    },
-    {
-      "quote": "Someday is not a day of the week.",
-      "author": "Denise Brennan-Nelson"
-    },
-    {
-      "quote": "UNIX is simple.  It just takes a genius to understand its simplicity.",
-      "author": "Dennis Ritchie"
-    },
-    {
-      "quote": "Computers are good at following instructions, but not at reading your mind.",
-      "author": "Donald Knuth"
-    },
-    {
-      "quote": "A good programmer is someone who always looks both ways before crossing a one-way street.",
-      "author": "Doug Linder"
-    },
-    {
-      "quote": "Tough times never last, but tough people do.",
-      "author": "Dr. Robert Schuller"
-    },
-    {
-      "quote": "If things start happening, don't worry, don't stew, just go right along and you'll start happening too.",
-      "author": "Dr. Seuss"
-    },
-    {
-      "quote": "Do not go gentle into that good night. Rage, rage against the dying of the light.",
-      "author": "Dylan Thomas"
-    },
-    {
-      "quote": "The question of whether computers can think is like the question of whether submarines can swim.",
-      "author": "E.W. Dijkstra"
-    },
-    {
-      "quote": "Any code of your own that you haven't looked at for six or more months might as well have been written by someone else.",
-      "author": "Eagleson's Law"
-    },
-    {
-      "quote": "Do one thing every day that scares you.",
-      "author": "Eleanor Roosevelt"
-    },
-    {
-      "quote": "With the new day comes new strength and new thoughts.",
-      "author": "Eleanor Roosevelt"
-    },
-    {
-      "quote": "You must do the things you think you cannot do.",
-      "author": "Eleanor Roosevelt"
-    },
-    {
-      "quote": "Light tomorrow with today.",
-      "author": "Elizabeth Barrett Browning"
-    },
-    {
-      "quote": "Forever is composed of nows.",
-      "author": "Emily Dickinson"
-    },
-    {
-      "quote": "Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.",
-      "author": "Eric Raymond"
-    },
-    {
-      "quote": "If you don't risk anything, you risk even more.",
-      "author": "Erica Jong"
-    },
-    {
-      "quote": "The world breaks everyone, and afterward, many are strong at the broken places.",
-      "author": "Ernest Hemingway"
-    },
-    {
-      "quote": "There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self.",
-      "author": "Ernest Hemingway"
-    },
-    {
-      "quote": "Never confuse a single defeat with a final defeat.",
-      "author": "F. Scott Fitzgerald"
-    },
-    {
-      "quote": "I attribute my success to this - I never gave or took any excuse.",
-      "author": "Florence Nightingale"
-    },
-    {
-      "quote": "The best revenge is massive success.",
-      "author": "Frank Sinatra"
-    },
-    {
-      "quote": "The only limit to our realization of tomorrow, will be our doubts of today.",
-      "author": "Franklin D. Roosevelt"
-    },
-    {
-      "quote": "Right or wrong, it's very pleasant to break something from time to time.",
-      "author": "Fyodor Dostoevsky"
-    },
-    {
-      "quote": "The harder I work, the luckier I get.",
-      "author": "Gary Player"
-    },
-    {
-      "quote": "Giving up is the only sure way to fail.",
-      "author": "Gena Showalter"
-    },
-    {
-      "quote": "The only truly secure system is one that is powered off, cast in a block of concrete and sealed in a lead-lined room with armed guards.",
-      "author": "Gene Spafford"
-    },
-    {
-      "quote": "A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.",
-      "author": "George Bernard Shaw"
-    },
-    {
-      "quote": "First learn computer science and all the theory. Next develop a programming style. Then forget all that and just hack.",
-      "author": "George Carrette"
-    },
-    {
-      "quote": "Discovering the unexpected is more important than confirming the known.",
-      "author": "George Box"
-    },
-    {
-      "quote": "We only see what we know.",
-      "author": "Goethe"
-    },
-    {
-      "quote": "Without hard work, nothing grows but weeds.",
-      "author": "Gordon B. Hinckley"
-    },
-    {
-      "quote": "The function of good software is to make the complex appear to be simple.",
-      "author": "Grady Booch"
-    },
-    {
-      "quote": "When you know that you're capable of dealing with whatever comes, you have the only security the world has to offer.",
-      "author": "Harry Browne"
-    },
-    {
-      "quote": "Pain is inevitable. Suffering is optional.",
-      "author": "Haruki Murakami"
-    },
-    {
-      "quote": "Optimism is the faith that leads to achievement. Nothing can be done without hope and confidence.",
-      "author": "Helen Keller"
-    },
-    {
-      "quote": "The price of anything is the amount of life you exchange for it.",
-      "author": "Henry David Thoreau"
-    },
-    {
-      "quote": "Whether you think you can or think you can't, you're right.",
-      "author": "Henry Ford"
-    },
-    {
-      "quote": "The most exciting phrase to hear in science, the one that heralds discoveries, is not 'Eureka!' but 'Now that's funny…'",
-      "author": "Isaac Asimov"
-    },
-    {
-      "quote": "We are all failures. At least the best of us are.",
-      "author": "J.M. Barrie"
-    },
-    {
-      "quote": "You can't wait for inspiration. You have to go after it with a club.",
-      "author": "Jack London"
-    },
-    {
-      "quote": "Don't wish it were easier, wish you were better.",
-      "author": "Jim Rohn"
-    },
-    {
-      "quote": "By seeking and blundering we learn.",
-      "author": "Johann Wolfgang von Goethe"
-    },
-    {
-      "quote": "Knowing is not enough; we must apply. Wishing is not enough; we must do.",
-      "author": "Johann Wolfgang von Goethe"
-    },
-    {
-      "quote": "We first make our habits, then our habits make us.",
-      "author": "John Dryden"
-    },
-    {
-      "quote": "The power of imagination makes us infinite.",
-      "author": "John Muir"
-    },
-    {
-      "quote": "May you live every day of your life.",
-      "author": "Jonathan Swift"
-    },
-    {
-      "quote": "Perseverance is failing 19 times and succeeding the 20th.",
-      "author": "Julie Andrews"
-    },
-    {
-      "quote": "The work of today is the history of tomorrow, and we are its makers.",
-      "author": "Juliette Gordon Low"
-    },
-    {
-      "quote": "If you reveal your secrets to the wind, you should not blame the wind for revealing them to the trees.",
-      "author": "Kahlil Gibran"
-    },
-    {
-      "quote": "Optimism is an occupational hazard of programming; feedback is the treatment.",
-      "author": "Kent Beck"
-    },
-    {
-      "quote": "Opportunity does not knock, it presents itself when you beat down the door.",
-      "author": "Kyle Chandler"
-    },
-    {
-      "quote": "To iterate is human, to recurse divine.",
-      "author": "Peter Deutsch"
-    },
-    {
-      "quote": "A good traveler has no fixed plans and is not intent on arriving.",
-      "author": "Lao Tzu"
-    },
-    {
-      "quote": "An ant on the move does more than a dozing ox.",
-      "author": "Lao Tzu"
-    },
-    {
-      "quote": "Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.",
-      "author": "Lao Tzu"
-    },
-    {
-      "quote": "That's the thing about people who think they hate computers. What they really hate is lousy programmers.",
-      "author": "Larry Niven"
-    },
-    {
-      "quote": "It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things.",
-      "author": "Leonardo da Vinci"
-    },
-    {
-      "quote": "If you're any good at all, you know you can be better.",
-      "author": "Lindsay Buckingham"
-    },
-    {
-      "quote": "If people never did silly things, nothing intelligent would ever get done.",
-      "author": "Ludwig Wittgenstein"
-    },
-    {
-      "quote": "You only live once, but if you do it right, once is enough.",
-      "author": "Mae West"
-    },
-    {
-      "quote": "Live as if you were to die tomorrow. Learn as if you were to live forever.",
-      "author": "Mahatma Gandhi"
-    },
-    {
-      "quote": "Strength does not come from physical capacity. It comes from an indomitable will.",
-      "author": "Mahatma Gandhi"
-    },
-    {
-      "quote": "One person's 'paranoia' is another person's 'engineering redundancy'.",
-      "author": "Marcus J. Ranum"
-    },
-    {
-      "quote": "Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less.",
-      "author": "Marie Curie"
-    },
-    {
-      "quote": "If you have everything under control, you're not moving fast enough.",
-      "author": "Mario Andretti"
-    },
-    {
-      "quote": "Education: the path from cocky ignorance to miserable uncertainty.",
-      "author": "Mark Twain"
-    },
-    {
-      "quote": "It ain't what you don't know that gets you into trouble. It's what you know for sure that just ain't so.",
-      "author": "Mark Twain"
-    },
-    {
-      "quote": "The secret of getting ahead is getting started.",
-      "author": "Mark Twain"
-    },
-    {
-      "quote": "The two most important days in your life are the day you are born and the day you find out why.",
-      "author": "Mark Twain"
-    },
-    {
-      "quote": "Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails.",
-      "author": "Mark Twain"
-    },
-    {
-      "quote": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
-      "author": "Martin Fowler"
-    },
-    {
-      "quote": "I know, somehow, that only when it is dark enough can you see the stars.",
-      "author": "Martin Luther King Jr."
-    },
-    {
-      "quote": "It is never too late to be what you might have been.",
-      "author": "Mary Anne Evans"
-    },
-    {
-      "quote": "Nothing will work unless you do.",
-      "author": "Maya Angelou"
-    },
-    {
-      "quote": "We delight in the beauty of the butterfly, but rarely admit the changes it has gone through to achieve that beauty.",
-      "author": "Maya Angelou"
-    },
-    {
-      "quote": "We may encounter many defeats, but we must not be defeated.",
-      "author": "Maya Angelou"
-    },
-    {
-      "quote": "Everybody has talent, but ability takes hard work.",
-      "author": "Michael Jordan"
-    },
-    {
-      "quote": "I've missed more than 9,000 shots during my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed.",
-      "author": "Michael Jordan"
-    },
-    {
-      "quote": "Impossible is just a big word thrown around by small men who find it easier to live in the world they've been given than to explore the power they have to change it. Impossible is not a fact. It's an opinion. Impossible is not a declaration. It's a dare. Impossible is potential. Impossible is temporary. Impossible is nothing.",
-      "author": "Muhammad Ali"
-    },
-    {
-      "quote": "A winner is a dreamer who never gives up.",
-      "author": "Nelson Mandela"
-    },
-    {
-      "quote": "It always seems impossible until it's done.",
-      "author": "Nelson Mandela"
-    },
-    {
-      "quote": "Failure will never overtake me if my determination to succeed is strong enough.",
-      "author": "Og Mandino"
-    },
-    {
-      "quote": "I am not young enough to know everything.",
-      "author": "Oscar Wilde"
-    },
-    {
-      "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure.",
-      "author": "Paulo Coelho"
-    },
-    {
-      "quote": "Never go to bed mad. Stay up and fight.",
-      "author": "Phyllis Diller"
-    },
-    {
-      "quote": "You can't cross the sea merely by standing and staring at the water.",
-      "author": "Rabindranath Tagore"
-    },
-    {
-      "quote": "The only person you are destined to become is the person you decide to be.",
-      "author": "Ralph Waldo Emerson"
-    },
-    {
-      "quote": "What you do speaks so loudly that I cannot hear what you say.",
-      "author": "Ralph Waldo Emerson"
-    },
-    {
-      "quote": "People who are crazy enough to think they can change the world, are the ones who do.",
-      "author": "Rob Siltanen"
-    },
-    {
-      "quote": "The best way out is always through.",
-      "author": "Robert Frost"
-    },
-    {
-      "quote": "Today's accomplishments were yesterday's impossibilities.",
-      "author": "Robert H. Schuller"
-    },
-    {
-      "quote": "Don't be satisfied with stories, how things have gone with others. Unfold your own myth.",
       "author": "Rumi"
     },
     {
-      "quote": "Forget safety. Live where you fear to live. Destroy your reputation. Be notorious.",
+      "quote": "Il fallimento è il condimento che dà al successo il suo sapore.",
-      "author": "Rumi"
-    },
-    {
-      "quote": "Sell your cleverness and buy bewilderment.",
-      "author": "Rumi"
-    },
-    {
-      "quote": "The cure for pain is in the pain.",
-      "author": "Rumi"
-    },
-    {
-      "quote": "Have no fear of perfection - you'll never reach it.",
-      "author": "Salvador Dalí"
-    },
-    {
-      "quote": "Don't watch the clock. Do what it does. Keep going.",
-      "author": "Sam Levenson"
-    },
-    {
-      "quote": "Ever Tried. Ever failed. No matter. Try again. Fail again. Fail better.",
-      "author": "Samuel Beckett"
-    },
-    {
-      "quote": "The more you know, the more you realize you know nothing.",
-      "author": "Socrates"
-    },
-    {
-      "quote": "The greatest enemy of knowledge is not ignorance, it is the illusion of knowledge.",
-      "author": "Stephen Hawking"
-    },
-    {
-      "quote": "The universe doesn't allow perfection.",
-      "author": "Stephen Hawking"
-    },
-    {
-      "quote": "Whether you want to uncover the secrets of the universe, or you want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.",
-      "author": "Stephen Hawking"
-    },
-    {
-      "quote": "The scariest moment is always just before you start.",
-      "author": "Stephen King"
-    },
-    {
-      "quote": "You can, you should, and if you're brave enough to start, you will.",
-      "author": "Stephen King"
-    },
-    {
-      "quote": "Arise, Awake and Stop not until the goal is reached.",
-      "author": "Swami Vivekananda"
-    },
-    {
-      "quote": "It is said that your life flashes before your eyes just before you die. That is true, it's called Life.",
-      "author": "Terry Pratchett"
-    },
-    {
-      "quote": "Believe you can and you're halfway there.",
-      "author": "Theodore Roosevelt"
-    },
-    {
-      "quote": "I have not failed. I've just found 10,000 ways that won't work.",
-      "author": "Thomas A. Edison"
-    },
-    {
-      "quote": "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
-      "author": "Thomas A. Edison"
-    },
-    {
-      "quote": "The harder the conflict, the more glorious the triumph.",
-      "author": "Thomas Paine"
-    },
-    {
-      "quote": "The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.",
-      "author": "Tim Berners-Lee"
-    },
-    {
-      "quote": "Failure is the condiment that gives success its flavor.",
       "author": "Truman Capote"
     },
     {
-      "quote": "Those who says it cannot be done should not interrupt the person doing it.",
+      "quote": "Credi di poterlo fare e sei a metà strada.",
-      "author": "Unknown"
+      "author": "Theodore Roosevelt"
     },
     {
-      "quote": "Even if you fall on your face, you're still moving forward.",
+      "quote": "Educazione: il percorso dall'ignoranza arrogante alla miserabile incertezza.",
-      "author": "Victor Kiam"
+      "author": "Mark Twain"
     },
     {
-      "quote": "It's not whether you get knocked down, it's whether you get up.",
+      "quote": "Una formica in movimento fa più di un bue assopito.",
-      "author": "Vince Lombardi"
+      "author": "Lao Tzu"
     },
     {
-      "quote": "I dream my painting and I paint my dream.",
+      "quote": "Il controllo della complessità è l'essenza della programmazione informatica.",
-      "author": "Vincent van Gogh"
+      "author": "Brian Kernighan"
-    },
-    {
-      "quote": "Let us cultivate our garden.",
-      "author": "Voltaire"
-    },
-    {
-      "quote": "Aim for the moon. If you miss, you may hit a star.",
-      "author": "W. Clement Stone"
-    },
-    {
-      "quote": "The way to get started is to quit talking and begin doing.",
-      "author": "Walt Disney"
-    },
-    {
-      "quote": "You miss 100% of the shots you don't take.",
-      "author": "Wayne Gretzky"
-    },
-    {
-      "quote": "Don't let yesterday take up too much of today.",
-      "author": "Will Rogers"
-    },
-    {
-      "quote": "Even if you're on the right track, you'll get run over if you just sit there.",
-      "author": "Will Rogers"
-    },
-    {
-      "quote": "Do not wait to strike till the iron is hot; but make it hot by striking.",
-      "author": "William Butler Yeats"
-    },
-    {
-      "quote": "You cannot swim for new horizons until you have courage to lose sight of the shore.",
-      "author": "William Faulkner"
-    },
-    {
-      "quote": "Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.",
-      "author": "William Shakespeare"
-    },
-    {
-      "quote": "We know what we are, but not what we may be.",
-      "author": "William Shakespeare"
-    },
-    {
-      "quote": "In theory there is no difference between theory and practice. In practice there is.",
-      "author": "Yogi Berra"
-    },
-    {
-      "quote": "You can see a lot by just looking.",
-      "author": "Yogi Berra"
-    },
-    {
-      "quote": "There is no elevator to success, you have to take the stairs.",
-      "author": "Zig Ziglar"
-    },
-    {
-      "quote": "You don't have to be great to start, but you have to start to be great.",
-      "author": "Zig Ziglar"
     }
   ]
 }

client/i18n/locales/italian/translations.json

@@ -96,6 +96,7 @@
     "privacy": "Le impostazioni di questa sezione ti permettono di controllare quello che viene mostrato sul tuo portfolio pubblico di freeCodeCamp.",
     "data": "Per vedere quali dati teniamo nel tuo account, clicca sul pulsante \"Scarica i tuoi dati\" qui sotto",
     "disabled": "Le tue certificazioni saranno disabilitate, se impostato su privato.",
+    "private-name": "Il tuo nome non apparirà sulle certificazioni, se impostato su privato.",
     "claim-legacy": "Una volta che avrai ottenuto le seguenti certificazioni gratuite di freeCodeCamp, sarai in grado di richiedere la {{cert}}:",
     "for": "Impostazioni Account per {{username}}",
     "username": {
@@ -285,7 +286,8 @@
       "preview": "Anteprima"
     },
     "help-translate": "Stiamo ancora traducendo le seguenti certificazioni.",
-    "help-translate-link": "Aiutaci con le traduzioni..."
+    "help-translate-link": "Aiutaci con le traduzioni...",
+    "coder-survey": "<0>Partecipa al Sondaggio 2021 per nuovi programmatori</0> (ci vogliono circa 10 minuti - fallo per la scienza)"
   },
   "donate": {
     "title": "Supporta il nostro no profit",

client/i18n/locales/portuguese/intro.json

@@ -1,85 +1,85 @@
 {
   "responsive-web-design": {
-    "title": "Responsive Web Design",
+    "title": "Design responsivo para a web",
     "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.",
+      "Nessa certificação de Design responsivo para a web, você aprenderá as linguagens que os desenvolvedores usam para construir sites: HTML (Linguagem de Marcação de Hipertexto) para o conteúdo e CSS (Folha de Estilo em Cascata) para o 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.",
+      "Primeiro, você vai construir um aplicativo de fotos de gato para aprender o básico de HTML e CSS. Mais tarde, você aprenderá técnicas modernas como variáveis CSS construindo um pinguim, e melhores práticas de acessibilidade criando um formulário web.",
-      "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."
+      "Finalmente, você vai aprender a fazer páginas web que respondem a diferentes tamanhos de telas construindo um card do Twitter com Flexbox, e um layout complexo de blog com o 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.",
+    "note": "Observação: algumas extensões de navegador, como bloqueadores de anúncios e extensões de modo escuro podem interferir nos testes. Se você tiver problemas, recomendamos desabilitar extensões que modifiquem o conteúdo ou o layout das páginas durante o curso.",
     "blocks": {
       "basic-html-and-html5": {
-        "title": "Basic HTML and HTML5",
+        "title": "HTML e HTML5 básicos",
         "intro": [
-          "HTML is a markup language that uses a special syntax or notation to describe the structure of a webpage to the browser. HTML elements usually have opening and closing tags that surround and give meaning to content. For example, different elements can describe text as a heading, paragraph, or list item.",
+          "HTML é uma linguagem de marcação que usa uma sintaxe ou notação especial para descrever a estrutura de uma página da Web para o navegador. Os elementos HTML geralmente têm tags de abertura e fechamento que os circundam e dão significado ao conteúdo. Elementos diferentes, por exemplo, podem descrever o texto como um título, um parágrafo ou item da lista.",
-          "In this course, you'll build a cat photo app to learn some of the most common HTML elements — the building blocks of any webpage."
+          "Neste curso, você vai construir um aplicativo de fotografia de gatos para aprender alguns dos elementos HTML mais comuns: os blocos de construção de qualquer página da web."
         ]
       },
       "basic-css": {
-        "title": "Basic CSS",
+        "title": "CSS básico",
         "intro": [
-          "CSS, or Cascading Style Sheets, tell the browser how to display the text and other content that you write in HTML. With CSS, you can control the color, font, size, spacing, and many other aspects of HTML elements.",
+          "O CSS, ou Folhas de Estilo em Cascata, diz ao navegador como exibir o texto e outros conteúdos que você escreve em HTML. Com o CSS, você pode controlar a cor, fonte, tamanho, espaçamento e muitos outros aspectos dos elementos HTML.",
-          "Now that you've described the structure of your cat photo app, give it some style with CSS."
+          "Agora que você descreveu a estrutura do seu aplicativo de fotos de gatos, aplique um pouco de estilo com o CSS."
         ]
       },
       "applied-visual-design": {
-        "title": "Applied Visual Design",
+        "title": "Design visual aplicado",
         "intro": [
-          "Visual design is a combination of typography, color theory, graphics, animation, page layout, and more to help deliver your unique message.",
+          "O design visual é uma combinação de tipografia, teoria de cores, gráficos, animação, layout da página e mais para ajudar a entregar sua mensagem única.",
-          "In this course, you'll learn how to apply these different elements of visual design to your webpages."
+          "Neste curso, você vai aprender como aplicar esses diferentes elementos do design visual em suas páginas da web."
         ]
       },
       "applied-accessibility": {
-        "title": "Applied Accessibility",
+        "title": "Acessibilidade aplicada",
         "intro": [
-          "In web development, accessibility refers to web content and a UI (user interface) that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.",
+          "No desenvolvimento web, a acessibilidade refere-se ao conteúdo da web e uma UI (interface do usuário) que pode ser compreendida, navegada e interagida por um público amplo. Isto inclui pessoas com deficiência visual, auditiva, de mobilidade ou cognitiva.",
-          "In this course, you'll learn best practices for building webpages that are accessible to everyone."
+          "Nesse curso, você aprenderá as melhores práticas para a construção de páginas da Web que sejam acessíveis a todos."
         ]
       },
       "responsive-web-design-principles": {
-        "title": "Responsive Web Design Principles",
+        "title": "Princípios do design responsivo para a web",
         "intro": [
-          "There are many devices that can access the web, and they come in all shapes and sizes. Responsive web design is the practice of designing flexible websites that can respond to different screen sizes, orientations, and resolutions.",
+          "Existem muitos dispositivos que podem acessar a Internet, de todas as formas e tamanhos. O Design responsivo para a web é a prática de se projetar sites flexíveis, que podem responder a diferentes tamanhos de telas, orientações e resoluções.",
-          "In this course, you'll learn how to use CSS to make your webpages look good, no matter what device they're viewed on."
+          "Neste curso, você vai aprender a usar CSS para fazer suas páginas ficarem bonitas, não importa em qual dispositivo elas estão sendo visualizadas."
         ]
       },
       "css-flexbox": {
         "title": "CSS Flexbox",
         "intro": [
-          "Flexbox is a powerful, well-supported layout method that was introduced with the latest version of CSS, CSS3. With flexbox, it's easy to center elements on the page and create dynamic user interfaces that shrink and expand automatically.",
+          "O Flexbox é um método de layout poderoso e com bastante suporte, que foi introduzido na versão mais recente do CSS, o CSS3. Com o Flexbox, é fácil centralizar os elementos na página e criar interfaces dinâmicas que diminuem e aumentam de tamanho automaticamente.",
-          "In this course, you'll learn the fundamentals of flexbox and dynamic layouts by building a Twitter card."
+          "Nesse curso, você aprenderá os fundamentos de flexbox e layouts dinâmicos construindo um card do Twitter."
         ]
       },
       "css-grid": {
         "title": "CSS Grid",
         "intro": [
-          "The CSS grid is a newer standard that makes it easy to build complex responsive layouts. It works by turning an HTML element into a grid, and lets you place child elements anywhere within.",
+          "O CSS Grid é um padrão mais recente, que torna fácil construir layouts responsivos complexos. Ele funciona transformando um elemento HTML em uma grade e permite que você coloque elementos filhos em qualquer lugar dentro dele.",
-          "In this course, you'll learn the fundamentals of CSS grid by building different complex layouts, including a blog."
+          "Nesse curso, você aprenderá os fundamentos do CSS Grid construindo diferentes layouts complexos, incluindo um blog."
         ]
       },
       "responsive-web-design-projects": {
-        "title": "Responsive Web Design Projects",
+        "title": "Projetos do design responsivo para a web",
         "intro": [
-          "Time to put your newly learnt skills to work. By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far: HTML, CSS, Visual Design, Accessibility, and more.",
+          "Hora de colocar suas novas habilidades aprendidas para funcionar. Ao trabalhar nestes projetos, você terá a oportunidade de aplicar todas as competências, princípios e conceitos que você aprendeu até agora: HTML, CSS, Visual Design, Acessibilidade e muito mais.",
-          "Complete the five web programming projects below to earn your Responsive Web Design certification."
+          "Conclua os cinco projetos de programação web abaixo para ganhar a sua Certificação de Design responsivo para a web."
         ]
       },
       "basic-html-cat-photo-app": {
-        "title": "Basic HTML Cat Photo App",
+        "title": "Aplicativo básico de fotos de gatos em HTML",
         "intro": [
           "",
           ""
         ]
       },
       "basic-css-cafe-menu": {
-        "title": "Basic CSS Cafe Menu",
+        "title": "Menu de uma cafeteria em CSS básico",
         "intro": [
           "",
           ""
         ]
       },
       "css-variables-skyline": {
-        "title": "CSS Variables Skyline",
+        "title": "Horizonte com variáveis de CSS",
         "intro": [
           "",
           ""
@@ -88,102 +88,102 @@
     }
   },
   "javascript-algorithms-and-data-structures": {
-    "title": "JavaScript Algorithms and Data Structures",
+    "title": "Algoritmos e estruturas de dados em JavaScript",
     "intro": [
-      "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
+      "Enquanto o HTML e o CSS controlam o conteúdo e o estilo de uma página, o JavaScript é usado para torná-lo interativo. Na certificação de Algoritmos e Estruturas de Dados em JavaScript, você aprenderá os fundamentos do JavaScript, incluindo variáveis, arrays, objetos, laços e funções.",
-      "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
+      "Assim que souber os fundamentos abaixo, você aplicará esse conhecimento, criando algoritmos para manipular strings, fatorar números e até mesmo calcular a órbita da Estação Espacial Internacional.",
-      "Along the way, you'll also learn two important programing styles or paradigms: Object Oriented Programing (OOP), and Functional Programing (FP)."
+      "Durante o processo, você também aprenderá dois estilos ou paradigmas de programação importantes: a Programação Orientada a Objetos (POO) e a Programação Funcional (PF)."
     ],
-    "note": "Note: Some browser extensions, such as ad-blockers and script-blockers can interfere with the tests. If you face issues, we recommend disabling extensions that modify or block content of pages, while taking the course.",
+    "note": "Observação: algumas extensões de navegador, como bloqueadores de anúncios e bloqueadores de scripts, podem interferir nos testes. Se você tiver problemas, recomendamos desabilitar extensões que modifiquem ou bloqueiem o conteúdo das páginas durante o curso.",
     "blocks": {
       "basic-javascript": {
-        "title": "Basic JavaScript",
+        "title": "JavaScript básico",
         "intro": [
-          "JavaScript is a scripting language you can use to make web pages interactive. It is one of the core technologies of the web, along with HTML and CSS, and is supported by all modern browsers.",
+          "O JavaScript é uma linguagem de script que você pode usar para tornar as páginas da web interativas. É uma das principais tecnologias da web, juntamente com o HTML e o CSS e tem o suporte de todos os navegadores modernos.",
-          "In this course, you'll learn fundamental programming concepts in JavaScript. You'll start with basic data structures like numbers and strings. Then you'll learn to work with arrays, objects, functions, loops, if/else statements, and more."
+          "Neste curso, você aprenderá conceitos básicos de programação em JavaScript. Você vai começar com estruturas básicas de dados, como números e strings. Então, você aprenderá a trabalhar com arrays, objetos, funções, laços, instruções if/else e muito mais."
         ]
       },
       "es6": {
         "title": "ES6",
         "intro": [
-          "ECMAScript, or ES, is a standardized version of JavaScript. Because all major browsers follow this specification, the terms ECMAScript and JavaScript are interchangeable.",
+          "ECMAScript, ou ES, é uma versão padronizada do JavaScript. Como todos os principais navegadores seguem essa especificação, os termos ECMAScript e JavaScript são intercambiáveis.",
-          "Most of the JavaScript you've learned up to this point was in ES5 (ECMAScript 5), which was finalized in 2009. While you can still write programs in ES5, JavaScript is always evolving, and new features are released every year.",
+          "A maior parte do JavaScript que você aprendeu até este momento estava na ES5 (ECMAScript 5), que foi finalizada em 2009. Mesmo que você ainda possa escrever programas em ES5, saiba que o JavaScript está constantemente em evolução e, por isso, novas funcionalidades são lançadas todos os anos.",
-          "ES6, released in 2015, added many powerful new features to the language. In this course, you'll learn these new features, including <code>let</code> and <code>const</code>, arrow functions, classes, promises, and modules."
+          "O ES6, lançado em 2015, adicionou muitos recursos novos e poderosos à linguagem. Neste curso, você aprenderá quais são eles, incluindo <code>let</code> e <code>const</code>, arrow functions, classes, promises e módulos."
         ]
       },
       "regular-expressions": {
-        "title": "Regular Expressions",
+        "title": "Expressões regulares",
         "intro": [
-          "Regular expressions, often shortened to \"regex\" or \"regexp\", are patterns that help programmers match, search, and replace text. Regular expressions are very powerful, but can be hard to read because they use special characters to make more complex, flexible matches.",
+          "Expressões regulares, muitas vezes abreviadas como \"regex\" ou \"regexp\", são padrões que ajudam programadores a encontrar correspondências, pesquisar e substituir texto. Expressões regulares são muito poderosas, mas podem ser difíceis de ler porque usam caracteres especiais para fazer correspondências mais complexas e flexíveis.",
-          "In this course, you'll learn how to use special characters, capture groups, positive and negative lookaheads, and other techniques to match any text you want."
+          "Neste curso, você aprenderá a usar caracteres especiais, grupos de captura, buscas positivas e negativas e outras técnicas para encontrar correspondências com o texto desejado."
         ]
       },
       "debugging": {
-        "title": "Debugging",
+        "title": "Depuração",
         "intro": [
-          "Debugging is the process of going through your code, finding any issues, and fixing them.",
+          "A depuração é o processo de revisão de código, procurando qualquer problema e corrigindo-o.",
-          "Issues in code generally come in three forms: syntax errors that prevent your program from running, runtime errors where your code has unexpected behavior, or logical errors where your code doesn't do what you intended.",
+          "Os problemas no código geralmente chegam em três formas: erros de sintaxe, que impedem que o programa seja executado, erros de tempo de execução, onde o código tem um comportamento inesperado, ou erros lógicos, onde o código não faz o que você pretendia.",
-          "In this course, you'll learn how to use the JavaScript console to debug programs and prevent common issues before they happen."
+          "Neste curso, você aprenderá a usar o console do JavaScript para depurar programas e prevenir erros comuns antes de que aconteçam."
         ]
       },
       "basic-data-structures": {
-        "title": "Basic Data Structures",
+        "title": "Estruturas de dados básicas",
         "intro": [
-          "Data can be stored and accessed in many ways. You already know some common JavaScript data structures — arrays and objects.",
+          "Os dados podem ser guardados e acessados de muitas formas. Você já conhece algumas estruturas de dados comuns em JavaScript: os arrays e os objetos.",
-          "In this Basic Data Structures course, you'll learn more about the differences between arrays and objects, and which to use in different situations. You'll also learn how to use helpful JS methods like <code>splice()</code> and <code>Object.keys()</code> to access and manipulate data."
+          "Neste curso de Estruturas de Dados Básicas, você vai aprender mais sobre as diferenças entre arrays e objetos, e qual deles usar em diferentes situações. Também aprenderá a usar métodos úteis do JS, como <code>splice()</code> e <code>Object.keys()</code>, para acessar e manipular dados."
         ]
       },
       "basic-algorithm-scripting": {
-        "title": "Basic Algorithm Scripting",
+        "title": "Programação de algoritmos básicos",
         "intro": [
-          "An algorithm is a series of step-by-step instructions that describe how to do something.",
+          "Um algoritmo é uma série de instruções passo a passo, que descrevem como fazer alguma coisa.",
-          "To write an effective algorithm, it helps to break a problem down into smaller parts, and think carefully about how to solve each part with code.",
+          "Para escrever um algoritmo eficiente, é importante saber dividir o problema em partes menores e pensar atentamente sobre maneiras de resolver cada uma dessas partes com código.",
-          "In this course, you'll learn the fundamentals of algorithmic thinking by writing algorithms that do everything from converting temperatures to handling complex 2D arrays."
+          "Nesse curso, você aprenderá os fundamentos do raciocínio algorítmico escrevendo algoritmos que fazem de tudo, desde a conversão de temperaturas ao tratamento de arrays bidimensionais complexos."
         ]
       },
       "object-oriented-programming": {
-        "title": "Object Oriented Programming",
+        "title": "Programação Orientada a Objetos",
         "intro": [
-          "OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, objects and classes are used to organize code to describe things and what they can do.",
+          "A POO, ou Programação Orientada a Objetos, é uma das abordagens principais do processo de desenvolvimento de software. Na POO, os objetos e as classes são usados para organizar o código, descrever coisas e o que elas podem fazer.",
-          "In this course, you'll learn the basic principles of OOP in JavaScript including the <code>this</code> keyword, prototype chains, constructors, and inheritance."
+          "Neste curso, você aprenderá os princípios básicos de POO em JavaScript, incluindo a palavra-chave <code>this</code>, cadeias de protótipos, construtores e herança."
         ]
       },
       "functional-programming": {
-        "title": "Functional Programming",
+        "title": "Programação Funcional",
         "intro": [
-          "Functional Programming is another popular approach to software development. In Functional Programming, code is organized into smaller, basic functions that can be combined to build complex programs.",
+          "Programação funcional é outra abordagem popular em desenvolvimento de software. Na programação funcional, o código é organizado em funções menores e básicas, que podem ser combinadas para criar programas complexos.",
-          "In this course, you'll learn the core concepts of Functional Programming including pure functions, how to avoid mutations, and how to write cleaner code with methods like <code>.map()</code> and <code>.filter()</code>."
+          "Neste curso, você aprenderá os conceitos principais da Programação Funcional, incluindo funções puras, como evitar mutações e como escrever código mais limpo com métodos como <code>.map()</code> e <code>.filter()</code>."
         ]
       },
       "intermediate-algorithm-scripting": {
-        "title": "Intermediate Algorithm Scripting",
+        "title": "Programação de algoritmos intermediários",
         "intro": [
-          "Now that you know the basics of algorithmic thinking, along with OOP and Functional Programming, test your skills with the Intermediate Algorithm Scripting challenges."
+          "Agora que você conhece as noções básicas de raciocínio algorítmico, juntamente com POO e Programação Funcional, teste suas habilidades com os desafios de Programação de Algoritmos Intermediários."
         ]
       },
       "javascript-algorithms-and-data-structures-projects": {
-        "title": "JavaScript Algorithms and Data Structures Projects",
+        "title": "Projetos de algoritmos e estruturas de dados em JavaScript",
         "intro": [
-          "This is it — time to put your new JavaScript skills to work. These projects are similar to the algorithm scripting challenges you've done before – just much more difficult.",
+          "É hora de colocar suas novas habilidades em JavaScript para funcionar. Estes projetos são similares aos desafios de programação de algoritmos que você fez antes — só que muito mais difíceis.",
-          "Complete these 5 JavaScript projects to earn the JavaScript Algorithms and Data Structures certification."
+          "Conclua estes 5 projetos de JavaScript para ganhar a certificação de Algoritmos e Estruturas de Dados do JavaScript."
         ]
       },
       "basic-javascript-rpg-game": {
-        "title": "Basic JavaScript RPG Game",
+        "title": "Jogo básico de RPG em JavaScript",
         "intro": [
           "",
           ""
         ]
       },
       "intermediate-javascript-calorie-counter": {
-        "title": "Intermediate JavaScript Calorie Counter",
+        "title": "Contador de calorias JavaScript Intermediário",
         "intro": [
           "",
           ""
         ]
       },
       "functional-programming-spreadsheet": {
-        "title": "Functional Programming Spreadsheet",
+        "title": "Planilha de programação funcional",
         "intro": [
           "",
           ""
@@ -192,103 +192,103 @@
     }
   },
   "front-end-libraries": {
-    "title": "Front End Development Libraries",
+    "title": "Bibliotecas de desenvolvimento em front-end",
     "intro": [
-      "Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
+      "Agora que você está familiarizado com HTML, CSS e JavaScript, melhore suas habilidades aprendendo algumas das bibliotecas front-end mais populares do setor.",
-      "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
+      "Na certificação de bibliotecas de front-end, você aprenderá a estilizar seu site rapidamente com Bootstrap. Você também aprenderá a adicionar a lógica aos seus estilos CSS e a ampliá-los com Sass.",
-      "Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux."
+      "Mais tarde, você construirá um carrinho de compras e outras aplicações para aprender a criar Aplicativos de Página Única (Single Page Applications - SPA) poderosos com React e Redux."
     ],
     "note": "",
     "blocks": {
       "bootstrap": {
         "title": "Bootstrap",
         "intro": [
-          "Bootstrap is a front end framework used to design responsive web pages and applications. It takes a mobile-first approach to web development, and includes pre-built CSS styles and classes, plus some JavaScript functionality.",
+          "O Bootstrap é um framework de front-end usado para projetar páginas da web e aplicativos responsivos. Ele adota uma abordagem mobile-first para o desenvolvimento na web e inclui estilos e classes CSS pré-construídos, além de algumas funcionalidades JavaScript.",
-          "In this course, you'll learn how to build responsive websites with Bootstrap, and use its included classes to style buttons, images, forms, navigation, and other common elements."
+          "Neste curso, você aprenderá a criar sites responsivos com Bootstrap, e usará as classes que ele tem para estilizar botões, imagens, formulários, navegação e outros elementos comuns."
         ]
       },
       "jquery": {
         "title": "jQuery",
         "intro": [
-          "jQuery is one of the most widely used JavaScript libraries in the world.",
+          "O jQuery é uma das bibliotecas JavaScript mais usadas no mundo.",
-          "In 2006 when it was released, all major browsers handled JavaScript slightly differently. jQuery simplified the process of writing client-side JavaScript, and also ensured that your code worked the same way in all browsers.",
+          "Em 2006, quando foi lançado, todos os principais navegadores lidavam com JavaScript de forma ligeiramente diferente. O jQuery simplificou o processo de escrita de JavaScript do lado do cliente, além de assegurar que seu código funcionasse da mesma forma em todos os navegadores.",
-          "In this course, you'll learn how to use jQuery to select, remove, clone, and modify different elements on the page."
+          "Neste curso, você aprenderá a usar jQuery para selecionar, remover, clonar e modificar diferentes elementos na página."
         ]
       },
       "sass": {
         "title": "SASS",
         "intro": [
-          "Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available in basic CSS, which make it easier for you to simplify and maintain the style sheets for your projects.",
+          "Sass, ou \"Stylesheets Sintaticamente Incríveis\", do inglês \"Syntactically Awesome StyleSheets\", é uma extensão da linguagem CSS. A extensão adiciona recursos que não estão disponíveis no CSS básico, facilitando a simplificação e manutenção dos arquivos de estilo de seus projetos.",
-          "In this Sass course, you'll learn how to store data in variables, nest CSS, create reusable styles with mixins, add logic and loops to your styles, and more."
+          "Neste curso sobre Sass, você aprenderá a armazenar dados em variáveis, aninhar CSS, criar estilos reutilizáveis com mixins, adicionar lógica e loops aos seus estilos, e mais."
         ]
       },
       "react": {
         "title": "React",
         "intro": [
-          "React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications.",
+          "React é uma biblioteca JavaScript popular para a criação de interfaces de usuário reutilizáveis e orientadas por componentes para páginas ou aplicações.",
-          "React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application.",
+          "O React combina HTML com funcionalidade JavaScript em sua própria linguagem markup, chamada JSX. Ele também facilita a gestão do fluxo de dados por toda a aplicação.",
-          "In this course, you'll learn how to create different React components, manage data in the form of state props, use different lifecycle methods like <code>componentDidMount</code>, and much more."
+          "Neste curso, você vai aprender a criar diferentes componentes do React, a gerenciar dados na forma de propriedades de estado (\"state props\"), a utilizar diferentes métodos de ciclo de vida, como o <code>componentDidMount</code>, e muito mais."
         ]
       },
       "redux": {
         "title": "Redux",
         "intro": [
-          "As applications grow in size and scope, managing shared data becomes much more difficult. Redux is defined as a \"predictable state container for JavaScript apps\" that helps ensure your apps work predictably, and are easier to test.",
+          "À medida que as aplicações crescem em tamanho e escopo, o gerenciamento de dados compartilhados torna-se muito mais difícil. O Redux é definido como um \"contêiner de estado previsível para aplicações JavaScript\", o que ajuda a garantir que suas aplicações funcionem de forma previsível e que sejam mais fáceis de testar.",
-          "While you can use Redux with any view library, we introduce Redux here before combining it with React in the next set of courses.",
+          "Embora você possa usar o Redux com qualquer biblioteca de visualizações, apresentamos o Redux aqui antes de combiná-lo com React no próximo conjunto de cursos.",
-          "In this course, you'll learn the fundamentals of Redux stores, actions, reducers and middleware to manage data throughout your application."
+          "Nesse curso, você vai aprender os fundamentos das stores, actions, reducers e middlewares do Redux para gerenciar dados por toda sua aplicação."
         ]
       },
       "react-and-redux": {
-        "title": "React and Redux",
+        "title": "React e Redux",
         "intro": [
-          "React and Redux are often mentioned together, and with good reason. The developer who created Redux was a React developer who wanted to make it easier to share data across different components.",
+          "React e Redux são muitas vezes mencionados juntos, e por uma boa razão. O desenvolvedor que criou o Redux era um desenvolvedor do React que queria facilitar o compartilhamento de dados entre diferentes componentes.",
-          "Now that you know how to manage the flow of shared data with Redux, it's time to combine that knowledge with React. In the React and Redux courses, you'll build a React component and learn how to manage state locally at the component level, and throughout the entire application with Redux."
+          "Agora que você sabe como gerenciar o fluxo de dados compartilhados com Redux, é hora de combinar esse conhecimento com React. Nos cursos do React e Redux, você vai construir um componente React e aprender como gerenciar estado localmente, ao nível do componente e por toda aplicação com Redux."
         ]
       },
       "front-end-libraries-projects": {
-        "title": "Front End Development Libraries Projects",
+        "title": "Projetos de desenvolvimento com bibliotecas de front-end",
         "intro": [
-          "It's time to put your front end development libraries skills to the test. Use Bootstrap, jQuery, Sass, React, and Redux to build 5 projects that will test everything you've learned up to this point.",
+          "É hora de testar suas habilidades nas bibliotecas de desenvolvimento de front-end. Use Bootstrap, jQuery, Sass, React e Redux para criar 5 projetos que testarão tudo o que você aprendeu até agora.",
-          "Complete all 5 projects, and you'll earn the Front End Development Libraries certification."
+          "Complete todos os 5 projetos e você ganhará a certificação em Bibliotecas de Desenvolvimento Front-End."
         ]
       }
     }
   },
   "data-visualization": {
-    "title": "Data Visualization",
+    "title": "Visualização de dados",
     "intro": [
-      "Data is all around us, but it doesn't mean much without shape or context.",
+      "Os dados estão ao nosso redor, mas isso não quer dizer muita coisa se eles não tiverem forma ou contexto.",
-      "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
+      "Na certificação de visualização de dados, você criará tabelas, gráficos e mapas para apresentar diferentes tipos de dados com a biblioteca D3.js.",
-      "You'll also learn about JSON (JavaScript Object Notation), and how to work with data online using an API (Application Programing Interface)."
+      "Você também aprenderá sobre JSON (JavaScript Object Notation) e sobre como trabalhar com dados on-line usando uma API (Application Programming Interface)."
     ],
     "note": "",
     "blocks": {
       "data-visualization-with-d3": {
-        "title": "Data Visualization with D3",
+        "title": "Visualização de dados com D3",
         "intro": [
-          "D3, or D3.js, stands for Data Driven Documents. It's a JavaScript library for creating dynamic and interactive data visualizations in the browser.",
+          "D3, ou D3.js, significa Documentos Orientados aos Dados. É uma biblioteca JavaScript para criar visualizações de dados dinâmicas e interativas no navegador.",
-          "D3 is built to work with common web standards – namely HTML, CSS, and Scalable Vector Graphics (SVG).",
+          "O D3 foi criado para funcionar com padrões web comuns, como o HTML, o CSS e os Scalable Vector Graphics (SVG).",
-          "D3 supports many different kinds of input data formats. Then, using its powerful built-in methods, you can transform those data into different charts, graphs, and maps.",
+          "O D3 suporta vários tipos diferentes de formatos de dados de entrada. Usando os poderosos métodos integrados do D3, você consegue transformar esses dados em diferentes gráficos, diagramas e mapas.",
-          "In the Data Visualization with D3 courses, you'll learn how to work with data to create different charts, graphs, hover elements, and other ingredients to create dynamic and attractive data visualizations."
+          "Nos cursos de visualização de dados com o D3, você aprenderá a trabalhar com dados para criar diferentes diagramas, gráficos, elementos \"hover\" e outros componentes para gerar visualizações de dados dinâmicas e atrativas."
         ]
       },
       "json-apis-and-ajax": {
-        "title": "JSON APIs and AJAX",
+        "title": "APIs JSON e AJAX",
         "intro": [
-          "Similar to how UIs help people use programs, APIs (Application Programming Interfaces) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data.",
+          "Da mesma forma como as IUs ajudam as pessoas a usarem os programas, as APIs (Interfaces de Programação de Aplicação) ajudam programas a interagir com outros programas. As APIs são ferramentas que os computadores usam para se comunicarem uns com os outros, em parte, para enviar e receber dados.",
-          "Programmers often use AJAX (Asynchronous JavaScript and XML) when working with APIs. AJAX refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. And the data transferred between the browser and server is often in a format called JSON (JavaScript Object Notation).",
+          "Programadores frequentemente usam AJAX (JavaScript e XML assíncronos) quando estão trabalhando com APIs. AJAX refere-se a um conjunto de tecnologias que faz solicitações assíncronas para um servidor transferir dados e, em seguida, carregar os dados que forem retornados para a página. Os dados transferidos entre o navegador e o servidor frequentemente estão em um formato chamado JSON (JavaScript Object Notation).",
-          "This course will teach you the basics about working with APIs and different AJAX technologies in the browser."
+          "Este curso ensinará o básico sobre como trabalhar com APIs e diferentes tecnologias AJAX no browser."
         ]
       },
       "data-visualization-projects": {
-        "title": "Data Visualization Projects",
+        "title": "Projetos de visualização de dados",
         "intro": [
-          "Now that you learned how to work with D3, APIs, and AJAX technologies, put your skills to the test with these 5 Data Visualization projects.",
+          "Agora que você aprendeu a trabalhar com D3, APIs e tecnologias AJAX, teste suas habilidades com esses 5 projetos de Visualização de Dados.",
-          "In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification."
+          "Nestes projetos, você precisará buscar dados e analisar um conjunto de dados e, em seguida, usar D3 para criar diferentes visualizações de dados. Conclua todos para receber a sua certificação de Visualização de Dados."
         ]
       },
       "d3-dashboard": {
-        "title": "D3 Dashboard",
+        "title": "Painel do D3",
         "intro": [
           "",
           ""
@@ -297,13 +297,13 @@
     }
   },
   "relational-databases": {
-    "title": "Relational Databases",
+    "title": "Bancos de dados relacionais",
     "intro": [
       "placeholder"
     ],
     "blocks": {
       "learn-relational-databases": {
-        "title": "Learn Relational Databases",
+        "title": "Aprenda bancos de dados relacionais",
         "intro": [
           "placeholder"
         ]
@@ -311,249 +311,249 @@
     }
   },
   "apis-and-microservices": {
-    "title": "APIs and Microservices",
+    "title": "APIs e microsserviços",
     "intro": [
-      "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
+      "Até esse ponto, você usou JavaScript apenas no front-end para adicionar interatividade a uma página, resolver desafios de algoritmos ou construir uma SPA. Mas o JavaScript também pode ser usado no back-end, ou servidor, para construir aplicações web inteiras.",
-      "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
+      "Hoje em dia, uma das formas populares de se criar aplicações é através do uso de microsserviços, que são pequenas aplicações modulares que trabalham em conjunto para formar uma aplicação maior inteira.",
-      "In the APIs and Microservices Certification, you'll learn how to write back end-ready with Node.js and npm (Node Package Manager). You'll also build web applications with the Express framework, and build a People Finder microservice with MongoDB and the Mongoose library."
+      "Na certificação de APIs e microsserviços, você aprenderá a escrever aplicações de back-end com o Node.js e o npm (Node Package Manager). Você também vai construir aplicações web com o framework Express e criará um microsserviço de localização de pessoas com o MongoDB e com a biblioteca Mongoose."
     ],
     "note": "",
     "blocks": {
       "managing-packages-with-npm": {
-        "title": "Managing Packages with NPM",
+        "title": "Gerenciamento de pacotes com o NPM",
         "intro": [
-          "npm (Node Package Manager), is a command line tool to install, create, and share packages of JavaScript code written for Node.js. There are many open source packages available on npm, so before starting a project, take some time to explore so you don't end up recreating the wheel for things like working with dates or fetching data from an API.",
+          "O npm (Node Package Manager) é uma ferramenta de linha de comando para instalar, criar e compartilhar pacotes de código JavaScript escritos para Node.js. Há muitos pacotes de código aberto disponíveis no npm. Então, antes de iniciar um projeto, explore os pacotes que já existem para que você não acabe recriando do zero coisas como trabalhar com datas ou buscar dados de uma API.",
-          "In this course, you'll learn the basics of using npm, including how to work with the <code>package.json</code> and how to manage your installed dependencies."
+          "Neste curso, você aprenderá o básico sobre como usar o npm, incluindo como trabalhar com o <code>package.json</code> e como gerenciar suas dependências instaladas."
         ]
       },
       "basic-node-and-express": {
-        "title": "Basic Node and Express",
+        "title": "Básico sobre Node e Express",
         "intro": [
-          "Node.js is a JavaScript runtime that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules — small, independent programs — that help with this. Some of the core modules include HTTP, which acts like a server, and File System, a module to read and modify files.",
+          "O Node.js é um ambiente de execução em Javascript que permite que os desenvolvedores escrevam programas de backend (no lado do servidor) em JavaScript. O Node.js vem com diversos módulos internos — pequenos programas independentes — que ajudam com isso. Alguns dos principais módulos incluem o HTTP, que atua como um servidor, e um sistema de arquivos, que atua como um módulo para ler e modificar arquivos.",
-          "In the last set of courses you learned to install and manage packages from npm, which are collections of smaller modules. These packages can help you build larger, more complex applications.",
+          "Nos últimos cursos, você aprendeu a instalar e gerenciar pacotes a partir do npm, que são coleções de pequenos módulos. Estes pacotes podem ajudá-lo a construir aplicações maiores e mais complexas.",
-          "Express is a lightweight web application framework, and is one of the most popular packages on npm. Express makes it much easier to create a server and handle routing the routing for your application, which handles things like direct people to the correct page when they visit a certain endpoint like <pre>/blog</pre>.",
+          "O Express é um framework leve para a criação de aplicações web, sendo um dos pacotes mais populares no npm. O Express torna muito mais fácil criar um servidor e lidar com o roteamento para seu aplicativo, lidando com coisas como direcionar as pessoas para a página correta quando elas visitam um determinado endpoint, como <pre>/blog</pre>.",
-          "In this course, you'll learn the basics of Node and Express including how to create a server, serve different files, and handle different requests from the browser."
+          "Neste curso, você aprenderá o básico do Node e do Express, incluindo como criar um servidor, manusear arquivos diferentes e manipular diferentes solicitações de um navegador."
         ]
       },
       "mongodb-and-mongoose": {
-        "title": "MongoDB and Mongoose",
+        "title": "MongoDB e Mongoose",
         "intro": [
-          "MongoDB is a database application that stores JSON documents (or records) that you can use in your application. Unlike SQL, another type of database, Mongo is a non-relational or \"NoSQL\" database. This means Mongo stores all associated data within one record, instead of storing it across many preset tables as in a SQL database.",
+          "O MongoDB é uma aplicação de banco de dados que armazena documentos JSON (ou registros) que podem ser usados em sua aplicação. Ao contrário do SQL, outro tipo de banco de dados, o Mongo é um banco de dados não relacional ou \"NoSQL\". Isto significa que o Mongo armazena todos os dados associados dentro de um registro, em vez de armazená-los em muitas tabelas predefinidas, como em um banco de dados SQL.",
-          "Mongoose is a popular npm package that is often installed alongside Mongo. With Mongoose, you can use plain JavaScript objects instead of JSON, which makes it easier to work with Mongo. Also, it allows you to create blueprints for your documents called schemas, so you don't accidentally save the wrong type of data and cause bugs later.",
+          "O Mongoose é um pacote popular do npm que é frequentemente instalado junto com MongoDB. Com o Mongose, você pode usar objetos JavaScript simples em vez de JSON, o que torna mais fácil trabalhar com o Mongo. Além disso, ele permite que você crie projetos para seus documentos, chamados schemas, para que você não salve acidentalmente o tipo errado de dados e cause bugs mais tarde.",
-          "In the MongoDB and Mongoose courses, you'll learn the fundamentals of working with persistent data including how to set up a model, and save, delete, and find documents in the database."
+          "Nos cursos de MongoDB e Mongose, você aprenderá os fundamentos de trabalhar com dados persistentes, incluindo como configurar um modelo, salvar, excluir e buscar documentos no banco de dados."
         ]
       },
       "apis-and-microservices-projects": {
-        "title": "APIs and Microservices Projects",
+        "title": "Projetos de APIs e microsserviços",
         "intro": [
-          "You've worked with APIs before, but now that you know npm, Node, Express, MongoDB, and Mongoose, it's time to build your own. Draw on everything you've learned up to this point to create 5 different microservices, which are smaller applications that are limited in scope.",
+          "Você já trabalhou com APIs antes, mas agora que você conhece o npm, Node, Express, MongoDB e o Mongoose, é hora de construir a sua própria API. Utilize tudo o que você aprendeu até esse ponto para criar 5 microsserviços diferentes – aplicações menores e com escopo limitado.",
-          "After creating these, you'll have 5 cool microservice APIs you can show off to friends, family, and potential employers. Oh, and you'll have a shiny new APIs and Microservices Certification, too."
+          "Depois de criá-las, você terá 5 APIs de microsserviço sensacionais, que poderão ser mostradas para amigos, familiares e potenciais empregadores. Ah, e você também terá uma Certificação em APIs e microsserviços novinha."
         ]
       }
     }
   },
   "quality-assurance": {
-    "title": "Quality Assurance",
+    "title": "Garantia de qualidade",
     "intro": [
-      "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
+      "À medida que seus programas ou aplicativos da web se tornam mais complexos, você vai querer testá-los para garantir que novas alterações não quebrem as funcionalidades originais.",
-      "In the Quality Assurance Certification, you'll learn how to write tests with Chai to ensure your applications work the way you expect them to.",
+      "Na certificação de garantia de qualidade, você aprenderá a escrever testes com o Chai para garantir que suas aplicações funcionem da maneira que você espera.",
-      "Then you'll build a chat application to learn advanced Node and Express concepts. You'll also use Pug as a template engine, Passport for authentication, and Socket.io for real-time communication between the server and connected clients."
+      "Em seguida, você vai construir uma aplicação de chat para aprender conceitos avançados de Node e Express. Você também usará o Pug como um modelo de motor, o Passport, para autenticação, e o Socket.io, para comunicação em tempo real entre o servidor e os clientes conectados."
     ],
     "note": "",
     "blocks": {
       "quality-assurance-and-testing-with-chai": {
-        "title": "Quality Assurance and Testing with Chai",
+        "title": "Garantia de qualidade e teste com o Chai",
         "intro": [
-          "Chai is a JavaScript testing library that helps you confirm that your program still behaves the way you expect it to after you make changes to your code.",
+          "O Chai é uma biblioteca de testes do JavaScript que ajuda você a confirmar que seu programa ainda se comporta como você espera após realizar alterações no código.",
-          "Using Chai, you can write tests that describe your program's requirements and see if your program meets them.",
+          "Usando o Chai, você pode escrever testes que descrevem as exigências do programa e ver se o programa as satisfaz.",
-          "In this course, you'll learn about assertions, deep equality, truthiness, testing APIs, and other fundamentals for testing JavaScript applications."
+          "Neste curso, você aprenderá sobre afirmações, igualdade profunda, condição de verdade, testes de APIs e outros fundamentos para testar aplicações JavaScript."
         ]
       },
       "advanced-node-and-express": {
-        "title": "Advanced Node and Express",
+        "title": "Node e Express avançado",
         "intro": [
-          "Now it's time to take a deep dive into Node.js and Express.js by building a chat application with a sign-in system.",
+          "Agora é hora de fazer um mergulho profundo no Node.js e no Express.js, construindo uma aplicação de chat com um sistema de login.",
-          "To implement the sign-in system safely, you'll need to learn about authentication. This is the act of verifying the identity of a person or process.",
+          "Para implementar o sistema de login de forma segura, você precisará saber sobre autenticação. Este é o ato de verificar a identidade de uma pessoa ou um processo.",
-          "In this course, you'll learn how to use Passport to manage authentication, Pug to create reusable templates for quickly building the front end, and web sockets for real-time communication between the clients and server."
+          "Neste curso, você aprenderá a usar o Passport, para gerenciar a autenticação, o Pug, para criar modelos reutilizáveis para a construção rápida do front-end, e web sockets, para a comunicação em tempo real entre os clientes e o servidor."
         ]
       },
       "quality-assurance-projects": {
-        "title": "Quality Assurance Projects",
+        "title": "Projetos de garantia de qualidade",
         "intro": [
-          "Now that you're well versed in both the front end and back end, it's time to apply all the skills and concepts you've learned up to this point. You'll build 5 different web applications, and write tests for each one to make sure they're working and can handle different edge cases.",
+          "Agora que você conhece bem o front-end e o back-end, chegou a hora de aplicar todas as habilidades e conceitos que você aprendeu até agora. Você vai construir 5 aplicações web diferentes e escrever testes para cada uma, para garantir que estão funcionando e que podem lidar com casos diferentes.",
-          "After completing these Quality Assurance projects, you'll have 5 more projects under your belt, and a new certification to show off on your portfolio."
+          "Depois de concluir estes projetos de garantia de qualidade (QA), você terá mais 5 projetos e uma nova certificação para exibir em seu portfólio."
         ]
       }
     }
   },
   "scientific-computing-with-python": {
-    "title": "Scientific Computing with Python",
+    "title": "Computação científica com Python",
     "intro": [
-      "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
+      "Python é uma das linguagens de programação mais populares e flexíveis atualmente. Você pode usá-la para tudo, desde programação básica até aprendizagem de máquina.",
-      "In the Scientific Computing with Python Certification, you'll learn Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
+      "Na certificação em computação científica com Python, você aprenderá o básico sobre Python, como variáveis, \"loops\", condicionais e funções. Depois, você vai evoluir rapidamente para estruturas de dados complexas, redes, bancos de dados relacionais e visualização de dados."
     ],
     "note": "",
     "blocks": {
       "python-for-everybody": {
-        "title": "Python for Everybody",
+        "title": "Python para todos",
         "intro": [
-          "Python for everybody is a free video course series that teaches the basics of using Python 3.",
+          "Python para todos é uma série gratuita vídeos de cursos que ensina o básico para usar o Python 3.",
-          "The courses were created by Dr. Charles Severance (also known as Dr. Chuck). He is a Clinical Professor at the University of Michigan School of Information, where he teaches various technology-oriented courses including programming, database design, and web development."
+          "Os cursos foram criados pelo Dr. Charles Severance (também conhecido como Dr. Chuck). Ele é Professor Clínico na Escola de Informação da Universidade de Michigan, onde leciona vários cursos orientados à tecnologia, incluindo programação, projeto de banco de dados e desenvolvimento web."
         ]
       },
       "scientific-computing-with-python-projects": {
-        "title": "Scientific Computing with Python Projects",
+        "title": "Computação científica com projetos em Python",
         "intro": [
-          "Time to put your Python skills to the test. By completing these projects, you will demonstrate that you have a good foundational knowledge of Python and qualify for the Scientific Computing with Python Certification."
+          "Está na hora de testar suas habilidades em Python. Ao completar esses projetos, você demonstrará que possui um bom conhecimento fundamental em Python e se qualificará para a certificação em computação científica em Python."
         ]
       }
     }
   },
   "data-analysis-with-python": {
-    "title": "Data Analysis with Python",
+    "title": "Análise de dados com Python",
     "intro": [
-      "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
+      "A análise de dados já existe há um bom tempo. Porém, até poucos anos atrás, os desenvolvedores praticavam-na apenas usando ferramentas caras e de código fechado, como o Tableau. Recentemente, Python, SQL e outras bibliotecas abertas começaram a mudar a análise de dados para sempre.",
-      "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
+      "Na certificação em análise de dados com Python, você aprenderá os fundamentos da análise de dados com Python. No final desta certificação, você saberá ler dados de fontes como CSVs e SQL, além de usar bibliotecas como Numpy, Pandas, Matplolib e Seaborn para processar e visualizar dados."
     ],
     "note": "",
     "blocks": {
       "data-analysis-with-python-course": {
-        "title": "Data Analysis with Python",
+        "title": "Análise de dados com Python",
         "intro": [
-          "In these comprehensive video courses, created by Santiago Basulto, you will learn the whole process of data analysis. You'll be reading data from multiple sources (CSV, SQL, Excel), process that data using NumPy and Pandas, and visualize it using Matplotlib and Seaborn,",
+          "Nestes cursos completos em vídeo, criados por Santiago Basulto, você aprenderá todo o processo de análise de dados. Você fará a leitura de dados a partir de múltiplas fontes (CSV, SQL, Excel), processará estes dados usando NumPy e Pandas, e os visualizará usando Matplotlib e Seaborn.",
-          "Additionally, we've included a thorough Jupyter Notebook course, and a quick Python reference to refresh your programming skills."
+          "Além disso, incluímos um curso completo sobre o Jupyter Notebook, bem como uma referência rápida para o Python para atualizar suas habilidades em programação."
         ]
       },
       "numpy": {
         "title": "Numpy",
         "intro": [
-          "Learn the basics of the NumPy library in the following video course created by Keith Galli.",
+          "Aprenda os conceitos básicos da biblioteca NumPy nos vídeos do curso a seguir, criado por Keith Galli.",
-          "In this course, you'll learn how NumPy works and how it compares to Python's built-in lists. You'll also learn how to write code with NumPy, indexing, reshaping, applied statistics, and much more."
+          "Neste curso, você vai aprender como a NumPy funciona e como ela se compara às listas incorporadas do Python. Você também aprenderá a escrever código com NumPy, indexação, remodelação, estatísticas aplicadas e muito mais."
         ]
       },
       "data-analysis-with-python-projects": {
-        "title": "Data Analysis with Python Projects",
+        "title": "Projetos de análise de dados com Python",
         "intro": [
-          "There are many ways to analyze data with Python. By completing these projects, you will demonstrate that you have a good foundational knowledge of data analysis with Python.",
+          "Existem muitas maneiras de analisar dados com o Python. Ao completar esses projetos, você vai demonstrar que tem um bom conhecimento fundamental de análise de dados com Python.",
-          "Finish them all to claim your Data Analysis with Python certification."
+          "Conclua todos os cursos para solicitar a certificação em Análise de Dados com Python."
         ]
       }
     }
   },
   "information-security": {
-    "title": "Information Security",
+    "title": "Segurança da informação",
     "intro": [
-      "With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
+      "Com tudo o que fazemos on-line, há uma grande quantidade de informações sensíveis em risco: endereços de e-mail, senhas, números de telefone e muito mais.",
-      "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
+      "Com o certificado de segurança da informação, você criará um aplicativo web seguro com o HelmetJS para aprender os fundamentos de proteção de informações on-line.",
-      "You'll also build a TCP client, and an Nmap and port scanner in Python. This will help you learn the basics of penetration testing — an important component of good information security."
+      "Você também vai construir um cliente TCP, um Nmap e um scanner de portas em Python. Isso ajudará você a aprender o básico do teste de penetração — um componente importante de boa segurança da informação."
     ],
     "note": "",
     "blocks": {
       "information-security-with-helmetjs": {
-        "title": "Information Security with HelmetJS",
+        "title": "Segurança da informação com HelmetJS",
         "intro": [
-          "This programming course focuses on HelmetJS, a type of middleware for Express-based applications that automatically sets HTTP headers. This way it can prevent sensitive information from unintentionally being passed between the server and client.",
+          "Este curso de programação se concentra no HelmetJS, um tipo de middleware para aplicativos baseados em Express que define automaticamente os cabeçalhos HTTP. Desta forma, ele pode prevenir que informações confidenciais sejam transmitidas involuntariamente entre o servidor e o cliente.",
-          "Completing the courses below will help you understand how to protect your website from malicious behavior."
+          "A conclusão dos cursos abaixo ajudará você a entender como proteger seu site de comportamentos maliciosos."
         ]
       },
       "python-for-penetration-testing": {
-        "title": "Python for Penetration Testing",
+        "title": "Python para testes de penetração",
         "intro": [
-          "These video courses teach you penetration testing with Python. Also known as a pen test, penetration testing is a simulated attack against a system to check for vulnerabilities.",
+          "Estes cursos por vídeo ensinam você a fazer o teste de penetração com Python. Também conhecido como pen test, o teste de penetração é um ataque simulado a um sistema para verificar vulnerabilidades.",
-          "In this course, you'll learn about sockets, create a TCP server and client, build an Nmap scanner, and other tools and techniques that pen testers use daily."
+          "Neste curso, você aprenderá a respeito de sockets, criará um cliente e um servidor TCP, construirá um scanner Nmap, além de outras ferramentas e técnicas que os testadores de invasão usam diariamente."
         ]
       },
       "information-security-projects": {
-        "title": "Information Security Projects",
+        "title": "Projetos de segurança da informação",
         "intro": [
-          "Now it’s time to put your new information security skills to work. These projects will give you a chance to apply the infosec skills, principles, and concepts you've learned.",
+          "Agora é hora de colocar suas novas habilidades em segurança da informação para funcionar. Estes projetos darão a chance de você praticar as habilidades, princípios e conceitos de segurança da informação que aprendeu.",
-          "When you are done, you will have plenty of information security projects under your belt, along with a certification that you can show off to friends, family, and employers."
+          "Quando você tiver terminado, você terá aprendido diversos projetos de segurança da informação, juntamente com uma certificação que poderá mostrar a amigos, familiares e empregadores."
         ]
       }
     }
   },
   "machine-learning-with-python": {
-    "title": "Machine Learning with Python",
+    "title": "Aprendizado de máquina com Python",
     "intro": [
-      "Machine learning has many practical applications that you can use in your projects or on the job.",
+      "A aprendizagem de máquina tem várias aplicações práticas que você pode usar em seus projetos ou no trabalho.",
-      "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks and explore more advanced techniques like natural language processing and reinforcement learning.",
+      "Na certificação de aprendizagem de máquina com Python, você usará o framework chamado TensorFlow para construir várias redes neurais e explorar técnicas mais avançadas, como o processamento de linguagem natural e a aprendizagem por reforço.",
-      "You'll also dive into neural networks, and learn the principles behind how deep, recurrent, and convolutional neural networks work."
+      "Você também vai mergulhar em redes neurais e aprender os princípios por trás de como as redes neurais profundas, recorrentes e convolucionais funcionam."
     ],
     "note": "",
     "blocks": {
       "tensorflow": {
         "title": "Tensorflow",
         "intro": [
-          "TensorFlow is an open source framework that makes machine learning and neural networking easier to use.",
+          "O TensorFlow é um framework de código aberto que facilita o uso da aprendizagem de máquina e das redes neurais.",
-          "The following video course was created by Tim Ruscica, also known as “Tech With Tim”. It will help you to understand TensorFlow and some of its powerful capabilities."
+          "O curso por vídeos a seguir foi criado por Tim Ruscica, também conhecido como \"Tech With Tim\". Ele ajudará você a entender o TensorFlow e algumas de suas capacidades poderosas."
         ]
       },
       "how-neural-networks-work": {
-        "title": "How Neural Networks Work",
+        "title": "Como as redes neurais funcionam",
         "intro": [
-          "Neural networks are at the core of what we call artificial intelligence today. But historically they've been hard to understand. Especially for beginners in the machine learning field.",
+          "As redes neurais estão no núcleo daquilo a que hoje chamamos de inteligência artificial. Mas, historicamente, elas foram difíceis de entender, especialmente para os iniciantes no campo de aprendizagem de máquina.",
-          "Even if you are completely new to neural networks, these video courses by Brandon Rohrer will get you comfortable with the concepts and the math behind them."
+          "Mesmo se você for completamente novo em redes neurais, esses cursos por vídeo de Brandon Rohrer farão com que você se sinta confortável com os conceitos e com a matemática por trás deles."
         ]
       },
       "machine-learning-with-python-projects": {
-        "title": "Machine Learning with Python Projects",
+        "title": "Projetos de aprendizagem de máquina com Python",
         "intro": [
-          "Machine learning has many practical applications. By completing these free and challenging coding projects, you will demonstrate that you have a good foundational knowledge of machine learning, and qualify for your Machine Learning with Python certification."
+          "A aprendizagem de máquina tem muitas aplicações práticas. Ao completar estes projetos de programação gratuitos e desafiadores, você vai demonstrar que tem um bom conhecimento nos fundamentos de aprendizagem de máquina, além de se qualificar para sua certificação em aprendizagem de máquina com Python."
         ]
       }
     }
   },
   "coding-interview-prep": {
-    "title": "Coding Interview Prep",
+    "title": "Preparação para entrevistas de programação",
     "intro": [
-      "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
+      "Se estiver procurando exercícios gratuitos de programação para se preparar para sua próxima entrevista de emprego, nós temos o que você precisa.",
-      "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
+      "Esta seção contém centenas de desafios de programação que testam seu conhecimento de algoritmos, estruturas de dados e matemática. Ela também possui vários projetos adicionais, que você pode usar para fortalecer suas habilidades ou adicionar ao seu portfólio."
     ],
     "note": "",
     "blocks": {
       "algorithms": {
-        "title": "Algorithms",
+        "title": "Algoritmos",
         "intro": [
-          "These free programming exercises will teach you about some common algorithms that you will likely encounter in real life. They are a great opportunity to improve your logic and programming skills.",
+          "Esses exercícios de programação gratuitos ensinam alguns algoritmos comuns que você provavelmente encontrará na vida real. Eles são uma grande oportunidade para melhorar suas habilidades de lógica e programação.",
-          "These algorithms are frequently used in job interviews to test a candidate's skills. We'll give you clear and concise explanations of how these different algorithms work so you can implement a solution for each one."
+          "Estes algoritmos são frequentemente usados em entrevistas de trabalho para testar as habilidades de um candidato. Nós vamos oferecer explicações claras e concisas sobre como esses vários algoritmos funcionam para que você possa implementar uma solução para cada um."
         ]
       },
       "data-structures": {
-        "title": "Data Structures",
+        "title": "Estruturas de dados",
         "intro": [
-          "These free programming courses are meant to help you deal with large and complex data structures that you may not yet be familiar with.",
+          "Esses cursos de programação gratuitos têm o objetivo de ajudá-lo a lidar com estruturas de dados grandes e complexas com as quais você ainda não está familiarizado.",
-          "Working through the courses below, you will learn about each type of data structure, and implement algorithms to reinforce your understanding of them."
+          "Trabalhando com os cursos abaixo, você aprenderá sobre cada tipo de estrutura de dados e implementará algoritmos para reforçar seu entendimento sobre eles."
         ]
       },
       "take-home-projects": {
-        "title": "Take Home Projects",
+        "title": "Projetos para levar para casa",
         "intro": [
-          "Programming interviews have always been stressful. Job applicants are sometimes given a take home project to be completed outside of the interview. These types of interviews usually require a lot of work, but they're a great way for employers to see how you might perform on the job.",
+          "Entrevistas de programação sempre foram estressantes. Os candidatos a empregos às vezes recebem um projeto para levar para casa, a ser concluído fora da entrevista. Esses tipos de entrevistas geralmente exigem muito trabalho, mas são uma ótima maneira para os empregadores verem como você se sairia no trabalho.",
-          "Build the bonus coding projects below for extra practice. Take your time, make them great, and put them on your resume or portfolio to show potential employers."
+          "Realize os projetos de codificação adicionais abaixo para uma prática extra. Não tenha pressa, melhore-os e coloque no seu currículo ou portfólio para mostrar a possíveis empregadores."
         ]
       },
       "rosetta-code": {
         "title": "Rosetta Code",
         "intro": [
-          "Level up your creative problem solving skills with these free programming tasks from the classic Rosetta Code library.",
+          "Aumente o nível de suas habilidades criativas de resolução de problemas com essas tarefas de programação gratuitas da biblioteca clássica do Rosetta Code.",
-          "These challenges can prove to be difficult, but they will push your algorithm logic to new heights."
+          "Esses desafios podem ser difíceis, mas levarão sua lógica de algoritmos a novos patamares."
         ]
       },
       "project-euler": {
-        "title": "Project Euler",
+        "title": "Projeto Euler",
         "intro": [
-          "Complete the programming challenges below, from the massive Project Euler archives. These will harden your algorithm and mathematics knowledge.",
+          "Complete os desafios de programação abaixo, diretamente dos grandes arquivos do Projeto Euler. Isso fortalecerá seu conhecimento de algoritmos e de matemática.",
-          "These problems range in difficulty and, for many, the experience is inductive chain learning. That is, by solving one problem, it will expose you to a new concept that allows you to undertake a previously inaccessible problem. Can you finish them all?"
+          "Esses problemas variam em dificuldade e, para muitos, a experiência é uma aprendizagem em sequência indutiva. Ou seja, ao resolver um problema, você será exposto a um novo conceito que permite a você resolver um problema que antes era inacessível. Você consegue concluir todos eles?"
         ]
       }
     }
   },
   "misc-text": {
-    "certification": "{{cert}} Certification",
+    "certification": "Certificação {{cert}}",
-    "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
+    "browse-other": "Navegue por nossas outras certificações gratuitas\n(recomendamos fazer isto em sequência)",
-    "courses": "Courses",
+    "courses": "Cursos",
-    "steps": "Steps",
+    "steps": "Passos",
-    "expand": "Expand",
+    "expand": "Expandir",
-    "collapse": "Collapse"
+    "collapse": "Recolher"
   }
 }

client/i18n/locales/portuguese/links.json

@@ -13,5 +13,9 @@
   },
   "donate": {
     "other-ways-url": "https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/c/portugues/",
+    "news": "https://freecodecamp.org/portuguese/news/"
   }
 }

client/package.json

@@ -39,9 +39,9 @@
     "@babel/plugin-proposal-export-default-from": "7.14.5",
     "@babel/plugin-proposal-function-bind": "7.14.5",
     "@babel/polyfill": "7.12.1",
-    "@babel/preset-env": "7.14.7",
+    "@babel/preset-env": "7.14.8",
     "@babel/preset-react": "7.14.5",
-    "@babel/standalone": "7.14.7",
+    "@babel/standalone": "7.14.8",
     "@fortawesome/fontawesome": "1.1.8",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
@@ -50,45 +50,44 @@
     "@freecodecamp/loop-protect": "2.2.1",
     "@freecodecamp/react-bootstrap": "0.32.3",
     "@freecodecamp/react-calendar-heatmap": "1.0.0",
-    "@freecodecamp/strip-comments": "3.0.0",
+    "@freecodecamp/strip-comments": "3.0.1",
     "@loadable/component": "5.15.0",
     "@reach/router": "1.3.4",
-    "algoliasearch": "4.10.2",
+    "algoliasearch": "4.10.3",
     "assert": "2.0.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-prismjs": "2.0.1",
+    "babel-plugin-prismjs": "2.1.0",
     "bezier-easing": "2.1.0",
     "browser-cookies": "1.2.0",
     "buffer": "6.0.3",
     "chai": "4.3.4",
     "crypto-browserify": "3.12.0",
-    "csrf": "3.1.0",
+    "date-fns": "2.23.0",
-    "date-fns": "2.22.1",
     "dedent": "0.7.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "final-form": "4.20.2",
-    "gatsby": "3.8.1",
+    "gatsby": "3.10.0",
-    "gatsby-cli": "3.8.0",
+    "gatsby-cli": "3.10.0",
     "gatsby-plugin-advanced-sitemap": "1.6.0",
-    "gatsby-plugin-create-client-paths": "3.8.0",
+    "gatsby-plugin-create-client-paths": "3.10.0",
-    "gatsby-plugin-manifest": "3.8.0",
+    "gatsby-plugin-manifest": "3.10.0",
-    "gatsby-plugin-postcss": "4.8.0",
+    "gatsby-plugin-postcss": "4.10.0",
-    "gatsby-plugin-react-helmet": "4.8.0",
+    "gatsby-plugin-react-helmet": "4.10.0",
     "gatsby-plugin-remove-serviceworker": "1.0.0",
-    "gatsby-remark-prismjs": "5.5.0",
+    "gatsby-remark-prismjs": "5.7.0",
-    "gatsby-source-filesystem": "3.8.0",
+    "gatsby-source-filesystem": "3.10.0",
-    "gatsby-transformer-remark": "4.5.0",
+    "gatsby-transformer-remark": "4.7.0",
-    "i18next": "20.3.2",
+    "i18next": "20.3.5",
     "jquery": "3.6.0",
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
-    "monaco-editor": "0.25.2",
+    "monaco-editor": "0.26.1",
     "nanoid": "3.1.23",
     "normalize-url": "4.5.1",
     "path-browserify": "1.0.1",
-    "postcss": "8.3.5",
+    "postcss": "8.3.6",
-    "prismjs": "1.24.0",
+    "prismjs": "1.24.1",
     "process": "0.11.10",
     "prop-types": "15.7.2",
     "psl": "1.8.0",
@@ -99,12 +98,12 @@
     "react-ga": "3.3.0",
     "react-helmet": "6.1.0",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "11.11.0",
+    "react-i18next": "11.11.4",
-    "react-instantsearch-dom": "6.11.2",
+    "react-instantsearch-dom": "6.12.0",
     "react-lazy-load": "3.1.13",
     "react-monaco-editor": "0.43.0",
     "react-redux": "5.1.2",
-    "react-reflex": "4.0.1",
+    "react-reflex": "4.0.2",
     "react-responsive": "6.1.2",
     "react-scrollable-anchor": "0.6.1",
     "react-spinkit": "3.0.0",
@@ -122,28 +121,45 @@
     "sass.js": "0.11.1",
     "store": "2.0.12",
     "stream-browserify": "3.0.0",
-    "typescript": "4.3.4",
+    "typescript": "4.3.5",
     "uuid": "8.3.2",
     "validator": "13.6.0"
   },
   "devDependencies": {
-    "@babel/types": "7.14.5",
+    "@babel/types": "7.14.8",
-    "@codesee/babel-plugin-instrument": "0.43.1",
+    "@codesee/babel-plugin-instrument": "0.56.0",
-    "@codesee/tracker": "0.43.1",
+    "@codesee/tracker": "0.56.0",
     "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "11.2.7",
+    "@testing-library/react": "12.0.0",
-    "@types/react-transition-group": "4.4.1",
+    "@types/jest": "26.0.24",
-    "@types/redux-actions": "2.6.1",
+    "@types/loadable__component": "5.13.4",
-    "autoprefixer": "10.2.6",
+    "@types/lodash-es": "4.17.4",
+    "@types/prismjs": "1.16.6",
+    "@types/reach__router": "1.3.9",
+    "@types/react-dom": "17.0.9",
+    "@types/react-helmet": "6.1.2",
+    "@types/react-instantsearch-dom": "6.12.0",
+    "@types/react-monaco-editor": "0.16.0",
+    "@types/react-redux": "7.1.16",
+    "@types/react-responsive": "8.0.2",
+    "@types/react-spinkit": "3.0.7",
+    "@types/react-test-renderer": "17.0.1",
+    "@types/react-transition-group": "4.4.2",
+    "@types/redux-actions": "2.6.2",
+    "@types/sanitize-html": "2.3.2",
+    "@types/store": "2.0.2",
+    "@types/validator": "13.6.3",
+    "autoprefixer": "10.3.1",
+    "axios": "0.21.1",
     "babel-plugin-transform-imports": "2.0.0",
     "chokidar": "3.5.2",
     "copy-webpack-plugin": "9.0.1",
     "gatsby-plugin-webpack-bundle-analyser-v2": "1.1.24",
     "jest-json-schema-extended": "1.0.0",
-    "monaco-editor-webpack-plugin": "4.0.0",
+    "monaco-editor-webpack-plugin": "4.1.1",
     "react-test-renderer": "16.14.0",
-    "redux-saga-test-plan": "4.0.1",
+    "redux-saga-test-plan": "4.0.3",
-    "webpack": "5.41.1",
+    "webpack": "5.47.1",
     "webpack-cli": "4.7.2"
   }
 }

client/src/analytics/__mocks__/index.js

@@ -1,5 +0,0 @@
-const analytics = {
-  event: () => {}
-};
-
-export default analytics;

client/src/analytics/__mocks__/index.tsx

@@ -0,0 +1,7 @@
+const analytics = {
+  event: function (): void {
+    // comment necessary for linting.
+  }
+};
+
+export default analytics;

client/src/assets/icons/API-icon.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function APIIcon(props) {
+function APIIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.api')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 208v96a47.758 47.758 0 01-6.438 24A47.758 47.758 0 01512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 304v-96a47.758 47.758 0 016.438-24A47.758 47.758 0 010 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/D3-icon.tsx

@@ -1,11 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function D3Icon(props) {
+function D3Icon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.d3')}</span>
       <svg
         viewBox='-10 -10 116 111'
@@ -14,7 +16,7 @@ function D3Icon(props) {
       >
         <path d='M0 0h7.75a45.5 45.5 0 110 91H0V71h7.75a25.5 25.5 0 100-51H0zm36.251 0h32a27.75 27.75 0 0121.331 45.5A27.75 27.75 0 0168.251 91h-32a53.69 53.69 0 0018.746-20H68.25a7.75 7.75 0 100-15.5H60.5a53.69 53.69 0 000-20h7.75a7.75 7.75 0 100-15.5H54.997A53.69 53.69 0 0036.251 0z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/FreeCodeCamp-logo.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable max-len */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function FreeCodeCampLogo() {
+function FreeCodeCampLogo(): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/JavaScript-icon.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function JavaScriptIcon(props) {
+function JavaScriptIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.javascript')}</span>
       <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/React-icon.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ReactIcon(props) {
+function ReactIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.react')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/Tensorflow-icon.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function TensorflowIcon(props) {
+function TensorflowIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.tensorflow')}</span>
       <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/algorithm.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Algorithm(props) {
+function Algorithm(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.algorithm')}</span>
       <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M568 368c-19.1 0-36.3 7.6-49.2 19.7L440.6 343c4.5-12.2 7.4-25.2 7.4-39 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-32.2-69c15-13.2 24.6-32.3 24.6-53.8 0-39.8-32.2-72-72-72s-72 32.2-72 72 32.2 72 72 72c.9 0 1.8-.2 2.7-.3l33.5 71.7C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 30.7 0 58.6-12.4 78.8-32.5l82.2 47c-.4 3.1-1 6.3-1 9.5 0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72zM232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm104 272c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm232 96c-13.2 0-24-10.8-24-24s10.8-24 24-24 24 10.8 24 24-10.8 24-24 24zm-54.4-261.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM152 320h48v-32h-48v32zm-88-80c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/analytics.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Analytics(props) {
+function Analytics(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.analytics')}</span>
       <svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M510.62 92.63C516.03 94.74 521.85 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 2.43.37 4.76.71 7.09l-95.34 76.27c-5.4-2.11-11.23-3.37-17.38-3.37s-11.97 1.26-17.38 3.37L255.29 55.1c.35-2.33.71-4.67.71-7.1 0-26.51-21.49-48-48-48s-48 21.49-48 48c0 4.27.74 8.34 1.78 12.28l-101.5 101.5C56.34 160.74 52.27 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-4.27-.74-8.34-1.78-12.28l101.5-101.5C199.66 95.26 203.73 96 208 96c6.15 0 11.97-1.26 17.38-3.37l95.34 76.27c-.35 2.33-.71 4.67-.71 7.1 0 26.51 21.49 48 48 48s48-21.49 48-48c0-2.43-.37-4.76-.71-7.09l95.32-76.28zM400 320h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm160-128h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-320 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zM80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/caret.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Caret() {
+function Caret(): JSX.Element {
   return (
     <svg viewBox='0 0 100 100' width='25px'>
       <polygon

client/src/assets/icons/certification-icon.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-function CertificationIcon() {
+function CertificationIcon(): JSX.Element {
   return (
     <svg
       height='248.21'

client/src/assets/icons/clipboard.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Clipboard(props) {
+function Clipboard(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.clipboard')}</span>
       <svg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M126.2 286.4l64.2-63.6c2.1-2.1 2.1-5.5 0-7.6l-12.6-12.7c-2.1-2.1-5.5-2.1-7.6 0l-47.6 47.2-20.6-20.9c-2.1-2.1-5.5-2.1-7.6 0l-12.7 12.6c-2.1 2.1-2.1 5.5 0 7.6l37.1 37.4c1.9 2.1 5.3 2.1 7.4 0zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336zM112 328c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm168-88h-63.3c-1.3 1.8-2.1 3.9-3.7 5.5L186.2 272H280c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/cup.tsx

@@ -1,14 +1,13 @@
-/* eslint-disable max-len */
+import React from 'react';
-import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function Cup(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function Cup(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.gold-cup')}</span>
       <svg
         height={200}
@@ -52,11 +51,10 @@ function Cup(props) {
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 
 Cup.displayName = 'Cup';
-Cup.propTypes = propTypes;
 
 export default Cup;

client/src/assets/icons/default-avatar.tsx

@@ -1,8 +1,9 @@
-/* eslint-disable max-len */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function DefaultAvatar(props) {
+function DefaultAvatar(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (

client/src/assets/icons/donate-with-PayPal.tsx

@@ -1,14 +1,13 @@
-/* eslint-disable max-len */
+import React from 'react';
-import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function DonateWithPayPal(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function DonateWithPayPal(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.donate')}</span>
       <svg
         height={31}
@@ -51,11 +50,10 @@ function DonateWithPayPal(props) {
           </text>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 
 DonateWithPayPal.displayName = 'DonateWithPayPal';
-DonateWithPayPal.propTypes = propTypes;
 
 export default DonateWithPayPal;

client/src/assets/icons/fail.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function RedFail() {
+function RedFail(): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,16 +20,12 @@ function RedFail() {
           r='95'
           stroke='(var--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <rect
           fill='var(--primary-background)'
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(-45, 100, 103.321)'
           width='128.85878'
           x='35'
@@ -40,8 +36,6 @@ function RedFail() {
           height='30'
           stroke='var(--primary-background)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
           transform='rotate(45, 99.5, 104)'
           width='128.85878'
           x='35'

client/src/assets/icons/green-not-completed.tsx

@@ -1,13 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function GreenNotCompleted(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function GreenNotCompleted(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.not-passed')}</span>
       <svg
         height='50'
@@ -25,17 +25,14 @@ function GreenNotCompleted(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 
 GreenNotCompleted.displayName = 'GreenNotCompleted';
-GreenNotCompleted.propTypes = propTypes;
 
 export default GreenNotCompleted;

client/src/assets/icons/green-pass.tsx

@@ -1,11 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function GreenPass(props) {
+function GreenPass(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.passed')}</span>
       <svg
         height='50'
@@ -23,16 +25,12 @@ function GreenPass(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
           />
           <rect
             fill='var(--primary-background)'
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 120, 106.321)'
             width='128.85878'
             x='55.57059'
@@ -43,8 +41,6 @@ function GreenPass(props) {
             height='30'
             stroke='var(--primary-background)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='80.66548'
             x='26.41726'
@@ -52,7 +48,7 @@ function GreenPass(props) {
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/heart.tsx

@@ -1,13 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function Heart(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function Heart(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.heart')}</span>
       <svg
         height={184}
@@ -31,11 +31,10 @@ function Heart(props) {
           </g>
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 
 Heart.displayName = 'Heart';
-Heart.propTypes = propTypes;
 
 export default Heart;

client/src/assets/icons/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import ResponsiveDesign from './ResponsiveDesign';
-import JavaScriptIcon from './JavaScriptIcon';
-import ReactIcon from './ReactIcon';
-import D3Icon from './D3Icon';
-import APIIcon from './APIIcon';
-import Clipboard from './Clipboard';
-import PythonIcon from './PythonIcon';
-import Analytics from './Analytics';
-import Shield from './Shield';
-import TensorflowIcon from './TensorflowIcon';
-import Algorithm from './Algorithm';
-
-const generateIconComponent = (superBlock, className) => {
-  const iconMap = {
-    'responsive-web-design': ResponsiveDesign,
-    'javascript-algorithms-and-data-structures': JavaScriptIcon,
-    'front-end-libraries': ReactIcon,
-    'data-visualization': D3Icon,
-    'apis-and-microservices': APIIcon,
-    'quality-assurance': Clipboard,
-    'scientific-computing-with-python': PythonIcon,
-    'data-analysis-with-python': Analytics,
-    'information-security': Shield,
-    'machine-learning-with-python': TensorflowIcon,
-    'coding-interview-prep': Algorithm
-  };
-  // fallback in case super block doesn't exist and for tests
-  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
-
-  return <Icon className={className} />;
-};
-
-export { generateIconComponent };

client/src/assets/icons/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ResponsiveDesign from './responsive-design';
+import JavaScriptIcon from './JavaScript-icon';
+import ReactIcon from './React-icon';
+import D3Icon from './D3-icon';
+import APIIcon from './API-icon';
+import Clipboard from './clipboard';
+import PythonIcon from './python-icon';
+import Analytics from './analytics';
+import Shield from './shield';
+import TensorflowIcon from './Tensorflow-icon';
+import Algorithm from './algorithm';
+
+const iconMap = {
+  'responsive-web-design': ResponsiveDesign,
+  'javascript-algorithms-and-data-structures': JavaScriptIcon,
+  'front-end-libraries': ReactIcon,
+  'data-visualization': D3Icon,
+  'apis-and-microservices': APIIcon,
+  'quality-assurance': Clipboard,
+  'scientific-computing-with-python': PythonIcon,
+  'data-analysis-with-python': Analytics,
+  'information-security': Shield,
+  'machine-learning-with-python': TensorflowIcon,
+  'coding-interview-prep': Algorithm
+};
+
+type SuperBlock = keyof typeof iconMap;
+
+const generateIconComponent = (
+  superBlock: SuperBlock,
+  className: string
+): JSX.Element => {
+  // fallback in case super block doesn't exist and for tests
+  const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
+
+  return <Icon className={className} />;
+};
+
+export { generateIconComponent };

client/src/assets/icons/initial.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Initial(props) {
+function Initial(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -21,8 +23,6 @@ function Initial(props) {
           r='95'
           stroke='var(--primary-color)'
           strokeDasharray='null'
-          strokeLinecap='null'
-          strokeLinejoin='null'
         />
         <svg
           height='200'

client/src/assets/icons/intro-information.tsx

@@ -1,13 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const propTypes = {};
+function IntroInformation(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function IntroInformation(props) {
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.info')}</span>
       <svg
         height='50'
@@ -25,8 +25,6 @@ function IntroInformation(props) {
             r='95'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
           <circle
@@ -36,17 +34,14 @@ function IntroInformation(props) {
             r='45'
             stroke='var(--primary-color)'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             strokeWidth='10'
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 
 IntroInformation.displayName = 'IntroInformation';
-IntroInformation.propTypes = propTypes;
 
 export default IntroInformation;

client/src/assets/icons/link-button.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-export default function LinkButton(props) {
+export default function LinkButton(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   return (
     <svg
       aria-hidden='true'

client/src/assets/icons/python-icon.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function PythonIcon(props) {
+function PythonIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.python')}</span>
       <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/responsive-design.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ResponsiveDesign(props) {
+function ResponsiveDesign(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.responsive-design')}</span>
       <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M112 48h352v48h48V32a32.09 32.09 0 00-32-32H96a32.09 32.09 0 00-32 32v256H16a16 16 0 00-16 16v16a64.14 64.14 0 0063.91 64H352v-96H112zm492 80H420a36 36 0 00-36 36v312a36 36 0 0036 36h184a36 36 0 0036-36V164a36 36 0 00-36-36zm-12 336H432V176h160z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/shield.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Shield(props) {
+function Shield(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.shield')}</span>
       <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' {...props}>
         <path d='M466.5 83.7l-192-80a48.15 48.15 0 00-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zm-47.2 114.2l-184 184c-6.2 6.2-16.4 6.2-22.6 0l-104-104c-6.2-6.2-6.2-16.4 0-22.6l22.6-22.6c6.2-6.2 16.4-6.2 22.6 0l70.1 70.1 150.1-150.1c6.2-6.2 16.4-6.2 22.6 0l22.6 22.6c6.3 6.3 6.3 16.4 0 22.6z' />
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/spacer.tsx

@@ -1,11 +1,15 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function Spacer(props) {
+interface SpacerPropTypes {
+  style: Record<string, unknown>;
+}
+
+function Spacer(props: SpacerPropTypes): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.spacer')}</span>
       <svg
         className='tick'
@@ -17,10 +21,10 @@ function Spacer(props) {
       >
         <g>
           <title>{t('icons.spacer')}</title>
-          <rect fillOpacity='0' height='200' paddingtop='5' width='200' />
+          <rect fillOpacity='0' height='200' width='200' />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/icons/toggle-check.tsx

@@ -1,11 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ToggleCheck(props) {
+function ToggleCheck(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Fragment>
+    <>
       <span className='sr-only'>{t('icons.toggle')}</span>
       <svg
         className='tick'
@@ -21,8 +23,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='148.85878'
             x='65.57059'
@@ -32,8 +32,6 @@ function ToggleCheck(props) {
             fill='white'
             height='60'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(45, 66.75, 123.75)'
             width='120.66548'
             x='-42.41726'
@@ -43,8 +41,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-45, 66.75, 123.75)'
             width='128.85878'
             x='65.57059'
@@ -54,8 +50,6 @@ function ToggleCheck(props) {
             fill='black'
             height='30'
             strokeDasharray='null'
-            strokeLinecap='null'
-            strokeLinejoin='null'
             transform='rotate(-135, 66.75, 123.75)'
             width='88.85878'
             x='68.57059'
@@ -63,7 +57,7 @@ function ToggleCheck(props) {
           />
         </g>
       </svg>
-    </Fragment>
+    </>
   );
 }
 

client/src/assets/images/components/amazon-logo.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-const propTypes = {};
+function SpotifyLogo(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function SpotifyLogo(props) {
+): React.ReactNode {
   return (
     <svg
       id='amazon-logo'
@@ -68,6 +67,5 @@ function SpotifyLogo(props) {
 }
 
 SpotifyLogo.displayName = 'SpotifyLogo';
-SpotifyLogo.propTypes = propTypes;
 
 export default SpotifyLogo;

client/src/assets/images/components/apple-logo.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-const propTypes = {};
+function AppleLogo(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function AppleLogo(props) {
+): React.ReactNode {
   return (
     <svg
       id='apple-logo'
@@ -22,6 +21,5 @@ function AppleLogo(props) {
 }
 
 AppleLogo.displayName = 'AppleLogo';
-AppleLogo.propTypes = propTypes;
 
 export default AppleLogo;

client/src/assets/images/components/as-seen-in-text.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const propTypes = { fill: PropTypes.string };
+function AsSeenInText(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function AsSeenLogo(props) {
+): React.ReactNode {
   const fill = props.fill === 'dark' ? 'var(--gray-75)' : 'var(--gray-15)';
   return (
     <svg
@@ -120,7 +118,6 @@ function AsSeenLogo(props) {
   );
 }
 
-AsSeenLogo.displayName = 'AsSeenLogo';
+AsSeenInText.displayName = 'AsSeenInText';
-AsSeenLogo.propTypes = propTypes;
 
-export default AsSeenLogo;
+export default AsSeenInText;

client/src/assets/images/components/google-logo.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-const propTypes = {};
+function GoogleLogo(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function GoogleLogo(props) {
+): React.ReactNode {
   return (
     <svg
       id='google-logo'
@@ -26,6 +25,5 @@ function GoogleLogo(props) {
 }
 
 GoogleLogo.displayName = 'GoogleLogo';
-GoogleLogo.propTypes = propTypes;
 
 export default GoogleLogo;

client/src/assets/images/components/index.js

@@ -1,15 +0,0 @@
-import AppleLogo from './AppleLogo.js';
-import AmazonLogo from './AmazonLogo.js';
-import MicrosoftLogo from './MicrosoftLogo.js';
-import SpotifyLogo from './SpotifyLogo.js';
-import GoogleLogo from './GoogleLogo.js';
-import AsFeatureLogo from './AsFeatureLogo.js';
-
-export {
-  AmazonLogo,
-  AppleLogo,
-  MicrosoftLogo,
-  SpotifyLogo,
-  GoogleLogo,
-  AsFeatureLogo
-};

client/src/assets/images/components/index.tsx

@@ -0,0 +1,15 @@
+import AppleLogo from './apple-logo';
+import AmazonLogo from './amazon-logo';
+import MicrosoftLogo from './microsoft-logo';
+import SpotifyLogo from './spotify-logo';
+import GoogleLogo from './google-logo';
+import AsSeenInText from './as-seen-in-text';
+
+export {
+  AmazonLogo,
+  AppleLogo,
+  MicrosoftLogo,
+  SpotifyLogo,
+  GoogleLogo,
+  AsSeenInText
+};

client/src/assets/images/components/microsoft-logo.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-const propTypes = {};
+function MicrosoftLogo(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function MicrosoftLogo(props) {
+): React.ReactNode {
   return (
     <svg
       id='microsoft-logo'
@@ -25,6 +24,5 @@ function MicrosoftLogo(props) {
 }
 
 MicrosoftLogo.displayName = 'MicrosoftLogo';
-MicrosoftLogo.propTypes = propTypes;
 
 export default MicrosoftLogo;

client/src/assets/images/components/spotify-logo.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable max-len */
 import React from 'react';
 
-const propTypes = {};
+function SpotifyLogo(
-
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-function SpotifyLogo(props) {
+): React.ReactNode {
   return (
     <svg
       id='spotify-logo'
@@ -19,6 +18,5 @@ function SpotifyLogo(props) {
 }
 
 SpotifyLogo.displayName = 'SpotifyLogo';
-SpotifyLogo.propTypes = propTypes;
 
 export default SpotifyLogo;

client/src/client-only-routes/show-certification.tsx

@@ -1,14 +1,11 @@
-/* eslint-disable react/jsx-sort-props */
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { bindActionCreators, Dispatch } from 'redux';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid, Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
 
-import ShowProjectLinks from './ShowProjectLinks';
+import ShowProjectLinks from './show-project-links';
-import FreeCodeCampLogo from '../assets/icons/FreeCodeCampLogo';
+import FreeCodeCampLogo from '../assets/icons/FreeCodeCamp-logo';
-// eslint-disable-next-line max-len
 import DonateForm from '../components/Donation/DonateForm';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -23,62 +20,68 @@ import {
   userByNameSelector,
   fetchProfileForUser
 } from '../redux';
-import { certMap } from '../../src/resources/certAndProjectMap';
+import { certMap } from '../resources/cert-and-project-map';
 import { createFlashMessage } from '../components/Flash/redux';
-import standardErrorMessage from '../utils/standardErrorMessage';
+import standardErrorMessage from '../utils/standard-error-message';
-import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
+import reallyWeirdErrorMessage from '../utils/really-weird-error-message';
 import { langCodes } from '../../../config/i18n/all-langs';
 import envData from '../../../config/env.json';
 
-import RedirectHome from '../components/RedirectHome';
+import RedirectHome from '../components/redirect-home';
 import { Loader, Spacer } from '../components/helpers';
 import { isEmpty } from 'lodash-es';
-import { User } from '../redux/prop-types';
+import { UserType } from '../redux/prop-types';
 
-const { clientLocale } = envData;
+const { clientLocale } = envData as { clientLocale: keyof typeof langCodes };
 
 const localeCode = langCodes[clientLocale];
-
+type CertType = {
-const propTypes = {
+  username: string;
-  cert: PropTypes.shape({
+  name: string;
-    username: PropTypes.string,
+  certName: string;
-    name: PropTypes.string,
+  certTitle: string;
-    certName: PropTypes.string,
+  completionTime: number;
-    certTitle: PropTypes.string,
+  date: number;
-    completionTime: PropTypes.number,
-    date: PropTypes.number
-  }),
-  certDashedName: PropTypes.string,
-  certSlug: PropTypes.string,
-  createFlashMessage: PropTypes.func.isRequired,
-  executeGA: PropTypes.func,
-  fetchProfileForUser: PropTypes.func,
-  fetchState: PropTypes.shape({
-    pending: PropTypes.bool,
-    complete: PropTypes.bool,
-    errored: PropTypes.bool
-  }),
-  isDonating: PropTypes.bool,
-  isValidCert: PropTypes.bool,
-  location: PropTypes.shape({
-    pathname: PropTypes.string
-  }),
-  showCert: PropTypes.func.isRequired,
-  signedInUserName: PropTypes.string,
-  user: User,
-  userFetchState: PropTypes.shape({
-    complete: PropTypes.bool
-  }),
-  userFullName: PropTypes.string,
-  username: PropTypes.string
 };
+interface IShowCertificationProps {
+  cert: CertType;
+  certDashedName: string;
+  certSlug: string;
+  createFlashMessage: (payload: typeof standardErrorMessage) => void;
+  executeGA: (payload: Record<string, unknown>) => void;
+  fetchProfileForUser: (username: string) => void;
+  fetchState: {
+    pending: boolean;
+    complete: boolean;
+    errored: boolean;
+  };
+  isDonating: boolean;
+  isValidCert: boolean;
+  location: {
+    pathname: string;
+  };
+  showCert: ({
+    username,
+    certSlug
+  }: {
+    username: string;
+    certSlug: string;
+  }) => void;
+  signedInUserName: string;
+  user: UserType;
+  userFetchState: {
+    complete: boolean;
+  };
+  userFullName: string;
+  username: string;
+}
 
-const requestedUserSelector = (state, { username = '' }) =>
+const requestedUserSelector = (state: unknown, { username = '' }) =>
-  userByNameSelector(username.toLowerCase())(state);
+  userByNameSelector(username.toLowerCase())(state) as UserType;
 
 const validCertSlugs = certMap.map(cert => cert.certSlug);
 
-const mapStateToProps = (state, props) => {
+const mapStateToProps = (state: unknown, props: IShowCertificationProps) => {
   const isValidCert = validCertSlugs.some(slug => slug === props.certSlug);
   return createSelector(
     showCertSelector,
@@ -87,7 +90,14 @@ const mapStateToProps = (state, props) => {
     userFetchStateSelector,
     isDonatingSelector,
     requestedUserSelector,
-    (cert, fetchState, signedInUserName, userFetchState, isDonating, user) => ({
+    (
+      cert: CertType,
+      fetchState: IShowCertificationProps['fetchState'],
+      signedInUserName: string,
+      userFetchState: IShowCertificationProps['userFetchState'],
+      isDonating: boolean,
+      user
+    ) => ({
       cert,
       fetchState,
       isValidCert,
@@ -99,13 +109,13 @@ const mapStateToProps = (state, props) => {
   );
 };
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     { createFlashMessage, showCert, fetchProfileForUser, executeGA },
     dispatch
   );
 
-const ShowCertification = props => {
+const ShowCertification = (props: IShowCertificationProps): JSX.Element => {
   const { t } = useTranslation();
   const [isDonationSubmitted, setIsDonationSubmitted] = useState(false);
   const [isDonationDisplayed, setIsDonationDisplayed] = useState(false);
@@ -168,7 +178,11 @@ const ShowCertification = props => {
     setIsDonationClosed(true);
   };
 
-  const handleProcessing = (duration, amount, action) => {
+  const handleProcessing = (
+    duration: string,
+    amount: number,
+    action: string
+  ) => {
     props.executeGA({
       type: 'event',
       data: {
@@ -241,7 +255,7 @@ const ShowCertification = props => {
     </div>
   );
 
-  let donationSection = (
+  const donationSection = (
     <div className='donation-section'>
       {!isDonationSubmitted && (
         <Row>
@@ -253,8 +267,8 @@ const ShowCertification = props => {
       <Row>
         <Col md={8} mdOffset={2} xs={12}>
           <DonateForm
-            handleProcessing={handleProcessing}
             defaultTheme='default'
+            handleProcessing={handleProcessing}
             isMinimalForm={true}
           />
         </Col>
@@ -275,10 +289,10 @@ const ShowCertification = props => {
           block={true}
           bsSize='lg'
           bsStyle='primary'
-          target='_blank'
           href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${
             certMonth + 1
           }&certUrl=${certURL}`}
+          target='_blank'
         >
           {t('profile.add-linkedin')}
         </Button>
@@ -287,11 +301,11 @@ const ShowCertification = props => {
           block={true}
           bsSize='lg'
           bsStyle='primary'
-          target='_blank'
           href={`https://twitter.com/intent/tweet?text=${t('profile.tweet', {
             certTitle: certTitle,
             certURL: certURL
           })}`}
+          target='_blank'
         >
           {t('profile.add-twitter')}
         </Button>
@@ -312,7 +326,7 @@ const ShowCertification = props => {
             </div>
           </Col>
           <Col md={7} sm={12}>
-            <div data-cy='issue-date' className='issue-date'>
+            <div className='issue-date' data-cy='issue-date'>
               {t('certification.issued')}&nbsp;
               <strong>
                 {certDate.toLocaleString([localeCode, 'en-US'], {
@@ -327,12 +341,7 @@ const ShowCertification = props => {
 
         <main className='information'>
           <div className='information-container'>
-            <Trans
+            <Trans i18nKey='certification.fulltext' title={certTitle}>
-              user={displayName}
-              title={certTitle}
-              time={completionTime}
-              i18nKey='certification.fulltext'
-            >
               <h3>placeholder</h3>
               <h1>
                 <strong>{{ user: displayName }}</strong>
@@ -369,13 +378,16 @@ const ShowCertification = props => {
       <Spacer size={2} />
       {signedInUserName === username ? shareCertBtns : ''}
       <Spacer size={2} />
-      <ShowProjectLinks user={user} name={displayName} certName={certTitle} />
+      <ShowProjectLinks certName={certTitle} name={displayName} user={user} />
       <Spacer size={2} />
     </Grid>
   );
 };
 
 ShowCertification.displayName = 'ShowCertification';
-ShowCertification.propTypes = propTypes;
 
-export default connect(mapStateToProps, mapDispatchToProps)(ShowCertification);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+)(ShowCertification as any);

client/src/client-only-routes/show-profile-or-four-oh-four.tsx

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { isEmpty } from 'lodash-es';
 
-import Loader from '../components/helpers/Loader';
+import Loader from '../components/helpers/loader';
 import {
   userByNameSelector,
   userProfileFetchStateSelector,
@@ -13,44 +12,55 @@ import {
 import FourOhFour from '../components/FourOhFour';
 import Profile from '../components/profile/Profile';
 import { isBrowser } from '../../utils/index';
+import { UserType } from '../redux/prop-types';
 
-const propTypes = {
+interface IShowProfileOrFourOhFourProps {
-  fetchProfileForUser: PropTypes.func.isRequired,
+  fetchProfileForUser: (username: string) => void;
-  isSessionUser: PropTypes.bool,
+  fetchState: {
-  maybeUser: PropTypes.string,
+    pending: boolean;
-  requestedUser: PropTypes.shape({
+    complete: boolean;
-    username: PropTypes.string,
+    errored: boolean;
-    profileUI: PropTypes.object
-  }),
-  showLoading: PropTypes.bool
   };
+  isSessionUser: boolean;
+  maybeUser: string;
+  requestedUser: UserType;
+  showLoading: boolean;
+}
 
 const createRequestedUserSelector =
   () =>
-  (state, { maybeUser = '' }) =>
+  (state: unknown, { maybeUser = '' }) =>
-    userByNameSelector(maybeUser.toLowerCase())(state);
+    userByNameSelector(maybeUser.toLowerCase())(state) as string;
 const createIsSessionUserSelector =
   () =>
-  (state, { maybeUser = '' }) =>
+  (state: unknown, { maybeUser = '' }) =>
     maybeUser.toLowerCase() === usernameSelector(state);
 
-const makeMapStateToProps = () => (state, props) => {
+const makeMapStateToProps =
+  () => (state: unknown, props: IShowProfileOrFourOhFourProps) => {
     const requestedUserSelector = createRequestedUserSelector();
     const isSessionUserSelector = createIsSessionUserSelector();
-  const fetchState = userProfileFetchStateSelector(state, props);
+    const fetchState = userProfileFetchStateSelector(
+      state
+    ) as IShowProfileOrFourOhFourProps['fetchState'];
     return {
-    requestedUser: requestedUserSelector(state, props),
+      requestedUser: requestedUserSelector(
+        state,
+        props
+      ) as IShowProfileOrFourOhFourProps['requestedUser'],
       isSessionUser: isSessionUserSelector(state, props),
       showLoading: fetchState.pending,
       fetchState
     };
   };
 
-const mapDispatchToProps = {
+const mapDispatchToProps: {
+  fetchProfileForUser: IShowProfileOrFourOhFourProps['fetchProfileForUser'];
+} = {
   fetchProfileForUser
 };
 
-class ShowProfileOrFourOhFour extends Component {
+class ShowProfileOrFourOhFour extends Component<IShowProfileOrFourOhFourProps> {
   componentDidMount() {
     const { requestedUser, maybeUser, fetchProfileForUser } = this.props;
     if (isEmpty(requestedUser)) {
@@ -78,12 +88,15 @@ class ShowProfileOrFourOhFour extends Component {
 
     // We have a response from the API, and we have some state in the
     // store for /:maybeUser, we now handover rendering to the Profile component
+    // eslint-disable-next-line
+    // @ts-ignore TODO: sort out whether user.portfolio is an array or obj. lit.
     return <Profile isSessionUser={isSessionUser} user={requestedUser} />;
   }
 }
 
+// eslint-disable-next-line
+// @ts-ignore
 ShowProfileOrFourOhFour.displayName = 'ShowProfileOrFourOhFour';
-ShowProfileOrFourOhFour.propTypes = propTypes;
 
 export default connect(
   makeMapStateToProps,

client/src/client-only-routes/show-project-links.tsx

@@ -1,61 +1,55 @@
-/* eslint-disable react/jsx-sort-props */
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import '../components/layouts/project-links.css';
 import { maybeUrlRE } from '../utils';
 import { Spacer, Link } from '../components/helpers';
-import { projectMap, legacyProjectMap } from '../resources/certAndProjectMap';
+import {
+  projectMap,
+  legacyProjectMap
+} from '../resources/cert-and-project-map';
 import ProjectModal from '../components/SolutionViewer/ProjectModal';
 import { find, first } from 'lodash-es';
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  ChallengeFileType,
+  CompletedChallenge,
+  UserType
+} from '../redux/prop-types';
 
-const propTypes = {
+interface IShowProjectLinksProps {
-  certName: PropTypes.string,
+  certName: string;
-  name: PropTypes.string,
+  name: string;
-  user: PropTypes.shape({
+  user: UserType;
-    completedChallenges: PropTypes.arrayOf(
+}
-      PropTypes.shape({
+
-        id: PropTypes.string,
+type SolutionStateType = {
-        solution: PropTypes.string,
+  projectTitle: string;
-        githubLink: PropTypes.string,
+  files?: ChallengeFileType[] | null;
-        files: PropTypes.arrayOf(
+  solution: CompletedChallenge['solution'];
-          PropTypes.shape({
+  isOpen: boolean;
-            contents: PropTypes.string,
-            ext: PropTypes.string,
-            key: PropTypes.string,
-            name: PropTypes.string,
-            path: PropTypes.string
-          })
-        )
-      })
-    ),
-    username: PropTypes.string
-  })
 };
 
-const initSolutionState = {
+const initSolutionState: SolutionStateType = {
   projectTitle: '',
   files: null,
   solution: null,
   isOpen: false
 };
 
-const ShowProjectLinks = props => {
+const ShowProjectLinks = (props: IShowProjectLinksProps): JSX.Element => {
   const [solutionState, setSolutionState] = useState(initSolutionState);
 
   const handleSolutionModalHide = () => setSolutionState(initSolutionState);
 
   const { t } = useTranslation();
 
-  const getProjectSolution = (projectId, projectTitle) => {
+  const getProjectSolution = (projectId: string, projectTitle: string) => {
     const {
       user: { completedChallenges }
     } = props;
-
     const completedProject = find(
       completedChallenges,
       ({ id }) => projectId === id
-    );
+    ) as CompletedChallenge;
 
     if (!completedProject) {
       return null;
@@ -70,11 +64,11 @@ const ShowProjectLinks = props => {
         isOpen: true
       });
 
-    if (files && files.length) {
+    if (files?.length) {
       return (
         <button
-          onClick={onClickHandler}
           className='project-link-button-override'
+          onClick={onClickHandler}
         >
           {t('certification.project.solution')}
         </button>
@@ -83,7 +77,7 @@ const ShowProjectLinks = props => {
     if (githubLink) {
       return (
         <>
-          <a href={solution} rel='noopener noreferrer' target='_blank'>
+          <a href={solution ?? ''} rel='noopener noreferrer' target='_blank'>
             {t('certification.project.solution')}
           </a>
           ,{' '}
@@ -93,12 +87,11 @@ const ShowProjectLinks = props => {
         </>
       );
     }
-    if (maybeUrlRE.test(solution)) {
+    if (maybeUrlRE.test(solution ?? '')) {
       return (
         <a
-          block={'true'}
           className='btn-invert'
-          href={solution}
+          href={solution ?? ''}
           rel='noopener noreferrer'
           target='_blank'
         >
@@ -113,7 +106,7 @@ const ShowProjectLinks = props => {
     );
   };
 
-  const renderProjectsFor = certName => {
+  const renderProjectsFor = (certName: string) => {
     if (certName === 'Legacy Full Stack') {
       const legacyCerts = [
         { title: 'Responsive Web Design' },
@@ -124,14 +117,19 @@ const ShowProjectLinks = props => {
         { title: 'Legacy Information Security and Quality Assurance' }
       ];
       return legacyCerts.map((cert, ind) => {
+        /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+        /* eslint-disable @typescript-eslint/no-unsafe-call */
+        /* eslint-disable @typescript-eslint/no-unsafe-return */
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+        // @ts-expect-error Error expected until projectMap is typed
         const mapToUse = projectMap[cert.title] || legacyProjectMap[cert.title];
-        const { certSlug } = first(mapToUse);
+        const { certSlug } = first(mapToUse) as { certSlug: string };
         const certLocation = `/certification/${username}/${certSlug}`;
         return (
           <li key={ind}>
             <a
-              href={certLocation}
               className='btn-invert project-link'
+              href={certLocation}
               rel='noopener noreferrer'
               target='_blank'
             >
@@ -141,16 +139,22 @@ const ShowProjectLinks = props => {
         );
       });
     }
+    // @ts-expect-error Error expected until projectMap is typed
     return (projectMap[certName] || legacyProjectMap[certName]).map(
+      // @ts-expect-error Error expected until projectMap is typed
       ({ link, title, id }) => (
         <li key={id}>
-          <Link to={link} className='project-link'>
+          <Link className='project-link' to={link}>
-            {t(`certification.project.title.${title}`, title)}
+            {t(`certification.project.title.${title as string}`, title)}
           </Link>
           : {getProjectSolution(id, title)}
         </li>
       )
     );
+    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+    /* eslint-disable @typescript-eslint/no-unsafe-call */
+    /* eslint-disable @typescript-eslint/no-unsafe-return */
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
   };
 
   const {
@@ -183,16 +187,16 @@ const ShowProjectLinks = props => {
         If you suspect that any of these projects violate the{' '}
         <a
           href='https://www.freecodecamp.org/news/academic-honesty-policy/'
-          target='_blank'
           rel='noreferrer'
+          target='_blank'
         >
           academic honesty policy
         </a>
         , please{' '}
         <a
           href={`/user/${username}/report-user`}
-          target='_blank'
           rel='noreferrer'
+          target='_blank'
         >
           report this to our team
         </a>
@@ -202,7 +206,6 @@ const ShowProjectLinks = props => {
   );
 };
 
-ShowProjectLinks.propTypes = propTypes;
 ShowProjectLinks.displayName = 'ShowProjectLinks';
 
 export default ShowProjectLinks;

client/src/client-only-routes/show-settings.test.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable */
+// @ts-nocheck Likely need to not use ShallowRenderer
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 import envData from '../../../config/env.json';
 
-import { ShowSettings } from './ShowSettings';
+import { ShowSettings } from './show-settings';
 
-const { apiLocation } = envData;
+const { apiLocation } = envData as Record<string, string>;
 
 jest.mock('../analytics');
 

client/src/client-only-routes/show-settings.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid } from '@freecodecamp/react-bootstrap';
@@ -17,38 +16,40 @@ import { createFlashMessage } from '../components/Flash/redux';
 import { useTranslation } from 'react-i18next';
 
 import { Loader, Spacer } from '../components/helpers';
-import About from '../components/settings/About';
+import About from '../components/settings/about';
-import Privacy from '../components/settings/Privacy';
+import Privacy from '../components/settings/privacy';
-import Email from '../components/settings/Email';
+import Email from '../components/settings/email';
-import Internet from '../components/settings/Internet';
+import Internet from '../components/settings/internet';
-import Portfolio from '../components/settings/Portfolio';
+import Portfolio from '../components/settings/portfolio';
-import Honesty from '../components/settings/Honesty';
+import Honesty from '../components/settings/honesty';
 import Certification from '../components/settings/Certification';
-import DangerZone from '../components/settings/DangerZone';
+import { UserType } from '../redux/prop-types';
-import { User } from '../redux/prop-types';
+import DangerZone from '../components/settings/danger-zone';
 
 const { apiLocation } = envData;
 
-const propTypes = {
+// TODO: update types for actions
-  createFlashMessage: PropTypes.func.isRequired,
+interface IShowSettingsProps {
-  isSignedIn: PropTypes.bool.isRequired,
+  createFlashMessage: (paylaod: string[]) => void;
-  navigate: PropTypes.func.isRequired,
+  isSignedIn: boolean;
-  showLoading: PropTypes.bool.isRequired,
+  navigate: (location: string) => void;
-  submitNewAbout: PropTypes.func.isRequired,
+  showLoading: boolean;
-  toggleNightMode: PropTypes.func.isRequired,
+  submitNewAbout: () => void;
-  updateInternetSettings: PropTypes.func.isRequired,
+  toggleNightMode: (theme: string) => void;
-  updateIsHonest: PropTypes.func.isRequired,
+  updateInternetSettings: () => void;
-  updatePortfolio: PropTypes.func.isRequired,
+  updateIsHonest: () => void;
-  updateQuincyEmail: PropTypes.func.isRequired,
+  updatePortfolio: () => void;
-  user: User,
+  updateQuincyEmail: (isSendQuincyEmail: boolean) => void;
-  verifyCert: PropTypes.func.isRequired
+  user: UserType;
-};
+  verifyCert: () => void;
+  path?: string;
+}
 
 const mapStateToProps = createSelector(
   signInLoadingSelector,
   userSelector,
   isSignedInSelector,
-  (showLoading, user, isSignedIn) => ({
+  (showLoading: boolean, user: UserType, isSignedIn) => ({
     showLoading,
     user,
     isSignedIn
@@ -59,15 +60,16 @@ const mapDispatchToProps = {
   createFlashMessage,
   navigate,
   submitNewAbout,
-  toggleNightMode: theme => updateUserFlag({ theme }),
+  toggleNightMode: (theme: string) => updateUserFlag({ theme }),
   updateInternetSettings: updateUserFlag,
   updateIsHonest: updateUserFlag,
   updatePortfolio: updateUserFlag,
-  updateQuincyEmail: sendQuincyEmail => updateUserFlag({ sendQuincyEmail }),
+  updateQuincyEmail: (sendQuincyEmail: boolean) =>
+    updateUserFlag({ sendQuincyEmail }),
   verifyCert
 };
 
-export function ShowSettings(props) {
+export function ShowSettings(props: IShowSettingsProps): JSX.Element {
   const { t } = useTranslation();
   const {
     createFlashMessage,
@@ -127,7 +129,7 @@ export function ShowSettings(props) {
   }
 
   return (
-    <Fragment>
+    <>
       <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
       <Grid>
         <main>
@@ -164,6 +166,7 @@ export function ShowSettings(props) {
             website={website}
           />
           <Spacer />
+          {/* @ts-expect-error Portfolio types mismatch */}
           <Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
           <Spacer />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
@@ -194,11 +197,10 @@ export function ShowSettings(props) {
           <DangerZone />
         </main>
       </Grid>
-    </Fragment>
+    </>
   );
 }
 
 ShowSettings.displayName = 'ShowSettings';
-ShowSettings.propTypes = propTypes;
 
 export default connect(mapStateToProps, mapDispatchToProps)(ShowSettings);

client/src/client-only-routes/show-unsubscribed.tsx

@@ -1,19 +1,22 @@
-import React, { Fragment } from 'react';
+import React from 'react';
-import PropTypes from 'prop-types';
 import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
 import envData from '../../../config/env.json';
-import FullWidthRow from '../components/helpers/FullWidthRow';
+import FullWidthRow from '../components/helpers/full-width-row';
 import { Spacer } from '../components/helpers';
 
 const { apiLocation } = envData;
 
-function ShowUnsubscribed({ unsubscribeId }) {
+function ShowUnsubscribed({
+  unsubscribeId
+}: {
+  unsubscribeId: string;
+}): JSX.Element {
   const { t } = useTranslation();
   return (
-    <Fragment>
+    <>
       <Helmet>
         <title>{t('metaTags:youre-unsubscribed')} | freeCodeCamp.org</title>
       </Helmet>
@@ -42,13 +45,10 @@ function ShowUnsubscribed({ unsubscribeId }) {
           <Spacer size={2} />
         </main>
       </Grid>
-    </Fragment>
+    </>
   );
 }
 
 ShowUnsubscribed.displayName = 'ShowUnsubscribed';
-ShowUnsubscribed.propTypes = {
-  unsubscribeId: PropTypes.string
-};
 
 export default ShowUnsubscribed;

client/src/client-only-routes/show-user.tsx

@@ -1,5 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
@@ -12,7 +11,7 @@ import {
   Row
 } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import { Trans, withTranslation } from 'react-i18next';
+import { TFunction, Trans, withTranslation } from 'react-i18next';
 
 import Login from '../components/Header/components/Login';
 
@@ -24,24 +23,31 @@ import {
 } from '../redux';
 import { Spacer, Loader, FullWidthRow } from '../components/helpers';
 
-const propTypes = {
+interface IShowUserProps {
-  email: PropTypes.string,
+  email: string;
-  isSignedIn: PropTypes.bool,
+  isSignedIn: boolean;
-  reportUser: PropTypes.func.isRequired,
+  reportUser: (payload: {
-  t: PropTypes.func.isRequired,
+    username: string;
-  userFetchState: PropTypes.shape({
+    reportDescription: string;
-    pending: PropTypes.bool,
+  }) => void;
-    complete: PropTypes.bool,
+  t: TFunction;
-    errored: PropTypes.bool
+  userFetchState: {
-  }),
+    pending: boolean;
-  username: PropTypes.string
+    complete: boolean;
+    errored: boolean;
   };
+  username: string;
+}
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
   userFetchStateSelector,
   userSelector,
-  (isSignedIn, userFetchState, { email }) => ({
+  (
+    isSignedIn,
+    userFetchState: IShowUserProps['userFetchState'],
+    { email }: { email: string }
+  ) => ({
     isSignedIn,
     userFetchState,
     email
@@ -52,8 +58,11 @@ const mapDispatchToProps = {
   reportUser
 };
 
-class ShowUser extends Component {
+class ShowUser extends Component<IShowUserProps> {
-  constructor(props) {
+  state: {
+    textarea: string;
+  };
+  constructor(props: IShowUserProps) {
     super(props);
 
     this.state = {
@@ -63,14 +72,14 @@ class ShowUser extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleChange(e) {
+  handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
     const textarea = e.target.value.slice();
     return this.setState({
       textarea
     });
   }
 
-  handleSubmit(e) {
+  handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const { textarea: reportDescription } = this.state;
     const { username, reportUser } = this.props;
@@ -111,7 +120,7 @@ class ShowUser extends Component {
     const { textarea } = this.state;
     const placeholderText = t('report.details');
     return (
-      <Fragment>
+      <>
         <Helmet>
           <title>{t('report.portfolio')} | freeCodeCamp.org</title>
         </Helmet>
@@ -124,11 +133,12 @@ class ShowUser extends Component {
         <Row className='overflow-fix'>
           <Col sm={6} smOffset={3} xs={12}>
             <p>
-              <Trans email={email} i18nKey='report.notify-1'>
+              <Trans i18nKey='report.notify-1'>
                 <strong>{{ email }}</strong>
               </Trans>
             </p>
             <p>{t('report.notify-2')}</p>
+            {/* eslint-disable @typescript-eslint/unbound-method */}
             <form onSubmit={this.handleSubmit}>
               <FormGroup controlId='report-user-textarea'>
                 <ControlLabel>{t('report.what')}</ControlLabel>
@@ -144,15 +154,16 @@ class ShowUser extends Component {
               </Button>
               <Spacer />
             </form>
+            {/* eslint-disable @typescript-eslint/unbound-method */}
           </Col>
         </Row>
-      </Fragment>
+      </>
     );
   }
 }
 
+// @ts-expect-error Config might need to be remedied, or component transformed into F.C.
 ShowUser.displayName = 'ShowUser';
-ShowUser.propTypes = propTypes;
 
 export default withTranslation()(
   connect(mapStateToProps, mapDispatchToProps)(ShowUser)

client/src/components/AppMountNotifier.js

@@ -1,27 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-
-import { appMount } from '../redux';
-
-const mapStateToProps = () => ({});
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ appMount }, dispatch);
-
-class AppMountNotifier extends Component {
-  componentDidMount() {
-    return this.props.appMount();
-  }
-  render() {
-    return this.props.render();
-  }
-}
-
-AppMountNotifier.displayName = 'AppMountNotifier';
-AppMountNotifier.propTypes = {
-  appMount: PropTypes.func.isRequired,
-  render: PropTypes.func.isRequired
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AppMountNotifier);

client/src/components/Donation/DonateForm.js

@@ -20,7 +20,7 @@ import {
   defaultDonation,
   modalDefaultDonation
 } from '../../../../config/donation-settings';
-import Spacer from '../helpers/Spacer';
+import Spacer from '../helpers/spacer';
 import PaypalButton from './PaypalButton';
 import DonateCompletion from './DonateCompletion';
 import {

client/src/components/Donation/DonationModal.js

@@ -6,11 +6,13 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
 import { Spacer } from '../helpers';
-import Heart from '../../assets/icons/Heart';
+import Heart from '../../assets/icons/heart';
-import Cup from '../../assets/icons/Cup';
+import Cup from '../../assets/icons/cup';
 import DonateForm from './DonateForm';
 import { modalDefaultDonation } from '../../../../config/donation-settings';
 import { useTranslation } from 'react-i18next';
+import { goToAnchor } from 'react-scrollable-anchor';
+import { isLocationSuperBlock } from '../../utils/path-parsers';
 
 import {
   closeDonationModal,
@@ -43,6 +45,10 @@ const propTypes = {
   activeDonors: PropTypes.number,
   closeDonationModal: PropTypes.func.isRequired,
   executeGA: PropTypes.func,
+  location: PropTypes.shape({
+    hash: PropTypes.string,
+    pathname: PropTypes.string
+  }),
   recentlyClaimedBlock: PropTypes.string,
   show: PropTypes.bool
 };
@@ -51,6 +57,7 @@ function DonateModal({
   show,
   closeDonationModal,
   executeGA,
+  location,
   recentlyClaimedBlock
 }) {
   const [closeLabel, setCloseLabel] = React.useState(false);
@@ -98,6 +105,13 @@ function DonateModal({
     }
   };
 
+  const handleModalHide = () => {
+    // If modal is open on a SuperBlock page
+    if (isLocationSuperBlock(location)) {
+      goToAnchor('claim-cert-block');
+    }
+  };
+
   const blockDonationText = (
     <div className=' text-center block-modal-text'>
       <div className='donation-icon-container'>
@@ -131,7 +145,12 @@ function DonateModal({
   );
 
   return (
-    <Modal bsSize='lg' className='donation-modal' show={show}>
+    <Modal
+      bsSize='lg'
+      className='donation-modal'
+      onExited={handleModalHide}
+      show={show}
+    >
       <Modal.Body>
         {recentlyClaimedBlock ? blockDonationText : progressDonationText}
         <Spacer />