freeCodeCamp / freeCodeCamp/mobile
Show demo project on workshop and lab views
- Dominant language
- Dart
- Stars
- 581
- Forks
- 197
- Avg merge
- 9d 11h
- Merged PRs (30d)
- 1
Description
## 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.
Contributor guide
Assessment
This issue has not been assessed yet.