playground integration

[shrilakshmishastry]

Hey, @EmmaDawsonDev and team great work 👏
I highly appreciate the work!!! I am looking forward to being part of this amazing journey.

Feature request

Present
The initiative taken to explain each pattern with code examples and demos is amazing. Currently, the code, demo, and styling are isolated. What I meant by isolation is, let's look at the below page breadcrumbs.

Here we start with an introduction, show a demo then give code and the styling.

Feature

a playground where users can interact with code and look at live demos. For example in react.dev they give code editor to live demo.

can I get the chance to work on this feature ?

[github-actions]

Hello @shrilakshmishastry, thanks for raising an issue in this project. The maintainers of this project are volunteers so please be understanding if it takes time before you get a response. We still appreciate your help with raising issues!

[EmmaDawsonDev]

This is a nice idea. So far I have considered adding codepen embeds for this, but I haven't got around to it yet. What's your opinion on codepen vs a custom component for this?

[shrilakshmishastry]

Here I am writing different options available . https://hexagonal-tachometer-98d.notion.site/integrate-playground-771ec7f59f7646949c5d3bd8bc9e3719?pvs=4

According to me both have their pros and cons.

To embed codepen , you need to maintain account and get embed link from there.
On the other hand Custom component gives flexibility of keeping code in same codebase but may lack initially the functionality that is provided by codepen or codesandbox

[shrilakshmishastry]

Hi @EmmaDawsonDev 👋
I figured out this https://sandpack.codesandbox.io/docs/advanced-usage looks good for our usecase.

[shrilakshmishastry]

I was going through React dev blogs and got inspired by the challenge section they have. We can also have something like that and user can test their reading.

What are your thoughts ?