[React-Challenge] How we can Implement React Challengee

[Roshan-Horo]

Objective

We have following points as an objective/goals, it's can add/update overtime

• We can create a challenge ( how we can create a challenge is not defined yet )
• people can take the challenge

Technical Requirement

Minimum Requirement as of now,

• Code Editor & it's preview
• Can Run Test on the code

Initial layout design

We can Imagine rough design layout of the react challenge is like this where we have :

• Challenge Description : All information related to challenge.
• Final Results ( image/screenshot ) : A demo about the final result.

We can collapse these two options ( challenge description & final results ) , so that we got more room for coding, which has

• Editor ( Coding & preview ) : A code editor and a preview section.
• Test Results : Show the results of the test cases.

Different Ways to add Code Editor

We can differentiate code editors based on where it can run our code so we have

• Server code editor : these can run our code on their platform/server and gives client/embed for embedding on the site using sandbox link. e.g : cloud sandbox. ( we can run any language C/C++, java, javascript, any modern framework ( Next.js, Sveltkit ), etc.
  

• Browser code editor : these can run our code on Browser. we have lot more variation and also through new technology like web containers. These can be following types example

1.Browser Sandbox: This can run javascript/react on the browser through embedding and sandbox link ( which works for platforms like Medium, Reddit, Trello, and Notion ). [docs link]: https://codesandbox.io/docs/learn/sandboxes/embedding?tab=browser-sandboxes

2. Sandpack from sandbox : This can run javascript/react on the browser through npm package i.e @codesandbox/sandpack-react, and can show console, file explorer and other configs also. New react docs site uses this for it's challenge part , you can check it out [here]: https://react.dev/learn/reacting-to-input-with-state#challenges

Simple sandpack example

Can be configured based on the needs

It has an option for test result if you have test cases, but it's really slow and not working in my demo

3. Nodebox from sandbox and WebContainer from stackblitz : These can run node on the browser and support other npm dependencies out of the box . Still learning about this and how we can use it. [nodebox]: https://sandpack.codesandbox.io/docs/advanced-usage/nodebox , [webcontainer]: https://webcontainers.io/

Problems/Stuck

We need three things to be good - Code Editor, Preview and testing for the code. We get the Editor and Preview from the sandpack as
it fits really well in our case but we didn't get that level of testing ( like unit testing through jest or react testing library ) in sandpack.
I'm checking other options to integrate better testing.

Reference links

can checkout the demo app of all these above example using github repo

[debjit]

This is a custom codebase, and I am working on implementing this on my other projects, so this will be fun.
https://www.freecodecamp.org/news/build-and-deploy-a-leetcode-clone-with-react-next-js-typescript-tailwind-css-firebase/

[debjit]

We can use any opensource alternative for this one, like nhost, appwrite, superbase.