This application is still live at http://cs-playground-react.surge.sh, however there will be no future releases and the repository has been made readonly. In addition, some features such as code-sharing have been disabled due to server costs and low demand. For those of you who have enjoyed the app over the last few years and made pull requests, suggestions, etc. thank you! This was a fun starter project for me as I was learning to code and it will always hold a special place in my ❤️.
This is meant as a reference / review only — if you haven't already learned / solved these problems on your own, I recommend giving them a try in the editor first before looking at the solution code! If you get stuck, there are plenty of resources accessible right through the app to help you along. A full list of resources can also be found here.
This project uses CodeMirror and React-CodeMirror2 to embed an editor into the browser (the original React-Codemirror is out of date, not maintained, and does not play well with React 16). It also uses a fun little hack to run the code and hijack
console.log, creating a little REPL which outputs into a mock console. Oh, and a little script I found to help with the resizable panes!
The app is currently live here: https://cs-playground-react.surge.sh/
resetState()function in the embedded editor.
// DO NOT SAVE
// SUPPRESS TESTScomment at the bottom of the editor, to disable them again, add the
// SUPPRESS TESTScomment to any part of the file (or you can use the shortcut keys: CMD/CTRL+ALT+/, which will toggle the
// SUPPRESS TESTScomment at any time).
Infinite loop protection is enabled by default. Using JSBin's loop-protect Babel transform, CS-Playground-React will automatically break loops that take over 500ms to run and will throw an error to let you know that there is likely a problem with your code. For instances where this is not the case, leave a `// DISABLE LOOP PROTECT` comment to run your code without loop protection. Beware! If you run code that does have an infinite loop while loop protect is disabled, you will crash the browser tab, so tread lightly when disabling this feature!
Some of my solutions are less than perfect. If you come up with a better one, or want to add a new algorithm or data structure that I haven't covered, feel free to submit a PR!
The JSDoc-like documentation found throughout the editor's files are just that: JSDoc-like. These comments would not produce proper documentation if the JSDoc utility were ran on these source files. These comments, instead, loosely follow the JSDoc style, and are just meant as a recognizable reference for users, so that they can easily see how each function, parameter, class, property, and method is meant to be used. Eventually, there are plans for changing to actual JSDoc comments and corresponding markdown documentation, but this is currently not a high priority. Any new challenges, however, should be added with this style of comments.
This project was bootstrapped with Create React App.