Description

On web version:

• In workshops, we show a preview modal on step 1: https://www.freecodecamp.org/learn/full-stack-developer/workshop-cafe-menu/step-1
• In labs, we have an example project to give campers an idea of what they'll build: https://www.freecodecamp.org/learn/full-stack-developer/lab-business-card/design-a-business-card

/learn client implementation:

• The "Build an app that is functionally similar to..." text isn't available through curriculum data. This is inserted in the /learn client, so we need to implement something similar on our side:
  • https://github.com/freeCodeCamp/freeCodeCamp/blob/9b666dc60fd81cb10fe874ac7158534e28745470/client/src/templates/Challenges/components/side-panel.tsx
• The ProjectPreviewModal takes challenge data and displays the demo/preview
  • https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/templates/Challenges/components/project-preview-modal.tsx

I think we can use challenge.solutions code and pass it to the ProjectPreview widget.

As for the UI/UX, I'm not so sure. We already have the instructions in a drawer so another modal/popup on top can be overwhelming. Maybe we go with a fullscreen Dialog or BottomSheet, it's still a popup but if it takes up the entire screen then there is only one widget in view and the view is less cluttered?

I thought about having a button to trigger the demo appearance. But this is just a demo/example of how the project would look at the end, not the result of campers' code, so I don't think it should stay permanently on the UI.