Everyone Can Commit. Bringing Code to The Whole Team

Navigating your way through GitHub and into your local development setup might seem a trivial task if you are a developer. After all, this is core to the development workflow.

However, the same is likely not true for members with other skills like Product, Design and Marketing.

As teams seek to accelerate their development workflow, making the codebase more accessible for non-coders can make a world of difference.

From day one, we at CodeSandbox have made our codebase within reach of every single team member. Let’s explore exactly how we do it by looking at three different perspectives from our colleagues in Product, Design and Marketing.

A Product Manager’s Perspective

Every product manager I know is on a constant hunt for the best set of tools that will help them keep tabs on their teams' work, manage communication with team members and stakeholders and track insights from their releases.

It has been a relief to find the answer to so many of my product management needs within CodeSandbox. In fact, after working within CodeSandbox with my team for over a year, I find it difficult to imagine doing my work without its support.

By keeping a few essential flows within the structure of the CodeSandbox developer environment, I find my work with my team to be faster, smoother, and well, just nicer.

Faster turnaround on feedback, ideas and testing

If I have a recommendation for small changes in the UI, I can simply open a branch, search for a component using the Inspect tool and make changes that I can then share with the team.

If it is something simple like a language or small design change, I can open a PR right away and ask for a review.

If my idea is more of a conversation point or if the change requires a certain level of complexity to implement, I can invite a designer and/or engineer to join me in the branch to discuss options and move things around in real time.

Additionally, tracking the work of engineers and helping them out with questions and testing is so much easier with CodeSandbox.

If an engineer is blocked by an edge case that needs clarification or needs an extra pair of eyes on QA, I can open their branch, walk through the scenario in question and provide feedback immediately.

Smoother transitions from questions to insights

Easy Event Tracking

Not every PM implements their own event tracking, but if you are the type that likes to dig into the code, CodeSandbox makes this incredibly easy.

Once a feature has been created or edited, I will search for it in the codebase and add my event and push up a PR for a review.

I don’t need to configure the codebase on my machine or think about how it is running, I simply find my code snippet, add my event and then wait for the insights to stream in.

Reducing complexity around testing ideas with users can make all the difference when making decisions.

Rapid Prototyping and User Testing

If I want to validate the usability of a flow with users. I can work with my team to spin up a quick implementation of the flow on a development branch and then take the branch preview into a user interview and collect feedback. I don’t need to worry about deploying the prototype or generating fake data (since in our case, the dev environment already uses fake data for testing). It’s as easy as creating designs, writing up the code and talking to users.

A Nicer Experience

The ultimate goal for me as a PM is to create a team dynamic where team members feel empowered to explore ideas and test out proposals.

With CodeSandbox, I can work with my team and with users with unmatched speed and ease. Because of that, we can focus on work that drives at the heart of our goals.

A Designer’s Perspective

Currently, work on CodeSandbox is extremely collaborative between teams.

No matter what position you occupy in the company, everyone can simply open a PR to improve the product or our website.

Creating interfaces collaboratively

Every day, more designers become interested in code and how each part of the interface is built. Design work has always been a multidisciplinary job, so a good designer has to understand how the platform they are designing works.

With CodeSandbox, designers can simply open a link and instantly see how the experience-building process is going, or even check the details of the interface.

Using Inspect, the designer can find a component in the preview window and make some tests or adjustments without having to create a request for the developers. After that, it’s just a matter of opening a pull request.

Also, through Inspect, designers can even take their first steps to understand how the interface is developed and learn more about the underlying code.

Content is a crucial part of a good experience.

Good designers understand how fundamental it is to simplify the user’s actions and decisions.

Collaborating with a content team using CodeSandbox is much simpler. Making the decision for a good title or call to action in real time greatly increases productivity, even allowing the designer to make suggestions collaboratively.

It is also very practical to test how the text looks in different breakpoints—much simpler than what static design tools provide.

Fixing, tweaking and testing the right way

More than a code collaboration tool, CodeSandbox becomes a content management tool that is very useful for copywriters and branding teams.

Imagine that the designer wants to see how a new image of a banner will behave, or how that blog post cover image will look like. It’s as simple as dragging and replacing an image right in the CodeSandbox editor, updating the preview and seeing the final result.

Now imagine that the designer identified an incorrect alignment. Just use Inspect, identify that specific piece of code, adjust it and open a PR.

A Marketer’s Perspective

“I miss the good old days when I could just open a WordPress page and update it!”

Having worked in software development companies for the last 6 years, this is a thought that often crossed my mind.

Unless you happen to be a marketer that knows how to code, there is this big chasm between the Marketing function and the codebase.

Looking back at my journey after 6 months at CodeSandbox, those days seem long behind. I honestly don’t have any dev tooling installed on my laptop right now except VS Code. No Node.js, no git bash (I’m on Windows 🙃)… nothing.

But in the last month alone, I made 42 contributions to the different CodeSandbox repos on GitHub, exclusively by using CodeSandbox’s cloud development platform. Being able to contribute to the codebase is now just another asset in my toolchain.

Iterating quickly and autonomously

Imagine this: while navigating your company’s website, you found a broken image. It breaks the user flow, which could harm your website’s conversion rate.

It should be an easy enough fix, especially since you have the URL of the proper image. So you open a ticket for it on your company’s issue tracking tool and… the wait begins. This is a constant reality for marketers.

CodeSandbox completely changed this for me, and my workflow is extremely simple!

I just have to open a GitHub repo on CodeSandbox and start typing. Then, I get some nice git controls that allow me to commit changes and open a PR. Done.

Getting help or feedback in seconds

And so another screenshot-jammed Slack thread begins. “Just finished the first draft - can you check and give me some feedback?”

Getting feedback and iterating on work is core to the Marketing function—more so when you are making changes that could impact the user experience.

But if you’re working with something more complex than a Google Doc, you might end up in a never-ending stream of Slack messages or screen-sharing calls.

Live collaboration, which is a unique CodeSandbox feature, has saved me hours of tedious work.

I can just share a URL with a colleague to have them join me on a live session to help me figure out how to do something—or the other way around! Just look at how I helped out Carlos, from our Mobile team, to update some misplaced website copy in just under 5 seconds. It’s really like Google Docs for code!

Second nature

If “making a commit” or “opening a PR” might once have sounded like gibberish, with CodeSandbox it just became a familiar flow, not unlike what I have experienced in content management systems.

I believe CodeSandbox can dramatically accelerate innovation and collaboration between marketers and developers, which is key when you’re moving from iteration to iteration.

You know that feeling when you first switched from an old laptop to a new model with a super fast SSD? Yep, there’s no going back from that.

Making the codebase more accessible

At CodeSandbox, we’re all about accessibility and empowerment.

We want to bring code beyond the development team and empower everyone to contribute.

Even if you have never touched git, you should be able to make simple changes and get a preview of development work without having to jump through a series of hoops.

If this sounds like it could make your life easier, start a 14-day Team Pro trial for free to check if it’s a good fit for you and your team.