diff --git a/src/pages/developing/react-tutorial/faq.mdx b/src/pages/developing/react-tutorial/faq.mdx
new file mode 100644
index 00000000000..eb5e3908c80
--- /dev/null
+++ b/src/pages/developing/react-tutorial/faq.mdx
@@ -0,0 +1,82 @@
+---
+title: FAQs
+description:
+ Welcome to Carbon! This tutorial will guide you in creating a React app with
+ the Carbon Design System.
+tabs:
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
+---
+
+### I am getting an error that says `failed to find manifest for cf`. What do I do?
+
+- The 5th step assumes your spaces are in the US South region. To successfully
+ deploy, you might need to update the region code (e.g.
+ `api.[REGION].cf.cloud.ibm.com`) to the region where your spaces were created,
+ or create a space in the US South region.
+
+- If you don't have an org, create one
+ [here](https://cloud.ibm.com/account/cloud-foundry).
+ - In the top nav go to Manage > Account > Account resources > Cloud Foundry
+ orgs
+ - The name you give it doesn't matter, just take note of the region you
+ select, and use that region's API endpoint (e.g.
+ `api.[REGION].cf.cloud.ibm.com`)
+ - Find regions and endpoints
+ [here](https://cloud.ibm.com/docs/cloud-foundry-public?topic=cloud-foundry-public-endpoints).
+
+### I am getting an error that says `yarn lockfile missing`. How do I fix this?
+
+- This error can occur when the `yarn.lock` file is either missing or differs
+ from the one used in the tutorial step. To fix this, you can go to the Github
+ branch for the step you are on, find the `yarn.lock` file, and copy that file
+ into your working directory. You may need to delete your `node_modules` folder
+ and run `yarn` afterwards.
+
+### I am getting a `yarn offline cache` error. How do I fix this?
+
+- Try running
+ `rm -rf .yarn-offline-mirror node_modules && yarn cache clean && yarn install`
+ and push up any changes. If this still does not work, ensure your `yarn.lock`
+ file matches the one at the start of the tutorial step
+
+### When will my PR be reviewed?
+
+- If your PR is passing, it will automatically get approved and closed by a bot.
+ After it's closed, you can move on to the next step.
+
+- If your PR is failing, try out the troubleshooting tips on this page first to
+ fix it. If it's still failing, reach out for help in our slack channel
+ `#carbon-react` or tag `@carbon-design-system/developers` in a comment on your
+ PR for help.
+
+### When will I get the badge?
+
+- After you've completed the tutorial, as well as the form and badge survey
+ mentioned
+ [here](https://carbondesignsystem.com/developing/react-tutorial/wrapping-up#badge-process),
+ our badge issuer will approve your badge. This is a manual job done by one
+ person. Please be patient if it takes a while to review as we have lots of
+ people go thru our tutorial badging process.
+
+- Badge issuer contact: matt.rosno@ibm.com.
+
+- For questions related to your Acclaim badge earner account and profile, as
+ well as issues related to claiming your badge after receiving a notification,
+ go to http://support.youracclaim.com for account issues.
+
+### Other troubleshooting tips
+
+- We updated the `react-scripts` dependency to `v5.0.1`. Pull from `upstream`
+ and run `yarn` or `npm install` to update your remote branch.
+- You no longer need the `.env` with the updated `react-scripts` dependency. If
+ you are up to date, you can delete that file (previously at the root level).
+- Run `yarn format` and commit any changes made.
diff --git a/src/pages/developing/react-tutorial/overview.mdx b/src/pages/developing/react-tutorial/overview.mdx
index 914f694f83a..9d040077b64 100644
--- a/src/pages/developing/react-tutorial/overview.mdx
+++ b/src/pages/developing/react-tutorial/overview.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx
index 1e5ec6dc87c..de16e38bd93 100644
--- a/src/pages/developing/react-tutorial/step-1.mdx
+++ b/src/pages/developing/react-tutorial/step-1.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx
index 07491b1d35e..7838ae98c48 100644
--- a/src/pages/developing/react-tutorial/step-2.mdx
+++ b/src/pages/developing/react-tutorial/step-2.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/step-3.mdx b/src/pages/developing/react-tutorial/step-3.mdx
index d1e12779a0c..914b730bf42 100644
--- a/src/pages/developing/react-tutorial/step-3.mdx
+++ b/src/pages/developing/react-tutorial/step-3.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx
index 8e5d6704766..6996bfcd8c4 100644
--- a/src/pages/developing/react-tutorial/step-4.mdx
+++ b/src/pages/developing/react-tutorial/step-4.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/step-5.mdx b/src/pages/developing/react-tutorial/step-5.mdx
index 8a33dac7ee7..68866bce6ef 100644
--- a/src/pages/developing/react-tutorial/step-5.mdx
+++ b/src/pages/developing/react-tutorial/step-5.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
import Preview from 'components/Preview';
diff --git a/src/pages/developing/react-tutorial/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx
index 33cba4c4639..67838b9581f 100644
--- a/src/pages/developing/react-tutorial/wrapping-up.mdx
+++ b/src/pages/developing/react-tutorial/wrapping-up.mdx
@@ -4,7 +4,16 @@ description:
Welcome to Carbon! This tutorial will guide you in creating a React app with
the Carbon Design System.
tabs:
- ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']
+ [
+ 'Overview',
+ 'Step 1',
+ 'Step 2',
+ 'Step 3',
+ 'Step 4',
+ 'Step 5',
+ 'Wrapping up',
+ 'FAQ',
+ ]
---
diff --git a/src/styles/_page.scss b/src/styles/_page.scss
index d5d44ec3c70..405a80e55af 100644
--- a/src/styles/_page.scss
+++ b/src/styles/_page.scss
@@ -90,3 +90,10 @@ section[role='tabpanel'] [class*='--col'] + [class*='--col'] {
.tab--columns_label {
margin-bottom: 0.5rem;
}
+
+.tutorial-faq-header-code code {
+ background-color: $ui-03;
+ font-size: 1.25rem;
+ padding: 0 0.5rem;
+ border-radius: 0.25rem;
+}