freeCodeCamp / freeCodeCamp/mobile

Show demo project on workshop and lab views

Open
#1,564 0 comments 0 reactions 1 assignee Claimed by @huyenltnguyen View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.