CodeSandbox

An online code editor with a focus on React. This project was bootstrapped with Create React App.

The JavaScript community has sharing as its selling point. It has the biggest open source community and every day new ideas and proposals are shared on Twitter. This is great and a really strong point, but the side effect of this is that there are a lot of tools and configurations to consider before you can start building.

CodeSandbox aims to solve this by allowing developers to simply go to a URL in their browser to start building. This not only makes it easier to get started, it also makes it easier to share. You can just share your created work by sharing the URL, others can then (without downloading) further develop on these sandboxes.

⚠️ Disclaimer ⚠️

I built CodeSandbox as a fun project when I was bored during lectures, therefore the client code is a bit of a mess. I've done some refactoring after release, but we're not there yet. It's missing:

• Tests
• Flowtype compliance
• Linting compliance
• Documentation
• Some reusability between components
• Some more things

This means it's sometimes a bit hard to navigate through the code, but no worries! I'm here to help, just open an issue and I'll help you out and create some documentation.

Don't hesitate to help make this application beautiful!

Organization

The CodeSandbox client is currently divided in to 5 parts.

• app: The editor and profile page
• sandbox: The preview pane of the editor
• embed: The embedded version of CodeSandbox (which you can embed on medium)
• common: The common parts between sandbox, embed and app
• homepage: Homepage!

This version of CodeSandbox is using the production server as source of truth, this is specified by the environment variable LOCAL_SERVER. It's not yet possible to sign in using this version, I haven't figured out how to handle this yet.

Installation

To install the project you need to have yarn and node, to start:

yarn
yarn start

Contributors

Thanks goes to these wonderful people (emoji key):

Ives van Hoorne 💬 📝 🐛 💻 🎨 📖 💡 🚇 👀 ⚠️ 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!