DEV Community

Cover image for CodeSandBox to the rescue for github changes
Harshith Venkatesh
Harshith Venkatesh

Posted on

CodeSandBox to the rescue for github changes

Most of the developers are familiar with GitHub, which indeed is an amazing platform that provides hosting for software development and version control using Git.

There are so many amazing projects that are present in GitHub that always inspires us, and in few we observe there is a collaboration of many coders as a whole who join together to build an amazing product and they would love to involve more people to contribute to their work, we usually call it an open-source project which means anybody is free to use, study, modify, and distribute your project for any purpose. These permissions are enforced through an open-source license.

I have been contributing to Real Dev Squad, an open-source project filled with amazing people, Here, on many occasions, I have got a chance to review the code and work on some issues. The problem with these which I faced was showcasing my work or suggesting some changes to others. I used to find it difficult to clone the repo and run it locally. I believe many might have faced similar problems.

While looking for the alternatives, I came across this wonderful
online editor ๐Ÿ˜CODESANDBOX๐Ÿ˜

CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps or components, on any device with a web browser.

On exploring code sandbox I realized, I can easily share my changes on issues and work on suggestions on code review and share my thoughts with my fellow developers through this.


So, here I am sharing my thoughts and steps you can do to open a Github repo in code sandbox to tweak and work on it on the web browser itself ๐Ÿ˜.

  1. Login(through Gmail, Github, etc.,) to Code Sandbox if we need to view the repo changes.
    Alt Text

  2. On click of creating a sandbox, we will be provided with multiple official templates of react, vue, Angular, Vanilla, etc.,
    Head over to Import Project.
    Alt Text

  3. Head over to GitHub repo which you want to work on, suggest some changes, or the PR you are working on (picture for example purpose only)
    Alt Text

  4. Paste the link from the GitHub repo on Import from Github section and import the repo.
    Alt Text

  5. The code is ready to be played with, shared with other coders to ask for suggestions and it can be easily be forked by others to share their inputs.
    Alt Text

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here ๐Ÿคทโ€โ™‚๏ธ. Source of images except screenshots are googled๐Ÿ˜…

Happy Codingย :)

Top comments (1)

harshi7016 profile image
Harshith Venkatesh

Open to constructive feedback guys :D