The Journey of CodeSandbox Projects

Rate this content
Bookmark

CodeSandbox Projects is the new version of CodeSandbox that enables the workflow of CodeSandbox today, but for projects of any size. During this talk, Ives will share the story of how Projects was created, and how we made it technically possible to build Projects.

Ives van Hoorne
Ives van Hoorne
25 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Code Sandbox is an online code editor that started as a component editor. It has evolved and now has 30 million sandboxes. The creators emphasize the importance of seeking external feedback and doing fast releases. They also highlight the power of having true fans and the value of user feedback. Code Sandbox is expanding to support big projects and integrating with GitHub. It offers collaboration features, the ability to use your own code editor, and native apps for iPad and iPhone. The challenges lie in running everything in a virtual machine and enabling fast dev servers. Code Sandbox is also exploring the possibility of running other technologies like Deno, Bun, and Ruby on Rails. The talk concludes with a demo of running a Minecraft server on Code Sandbox.

1. Introduction to Code Sandbox

Short description:

Hello, everyone. This is my first time speaking at React events. I'm here to talk about Code Sandbox. We now have a kind of celebration. Since yesterday we have hit the 30 million sandboxes on Code Sandbox. During this talk, I want to talk about the story of how Code Sandbox got started and what we have learned along the way.

Hello, everyone. This is my first time that I'm speaking at React events. I've been attending before, but now I'm speaking here and I'm very happy that I can now stand here.

I want to give a warning. This is the first time I've started to use Keynote for this presentation, so I'm pretty enthusiastic with animations.

My name is Yves Van Horne, but my name is pretty hard to pronounce, even in the Netherlands. So you can also call me Yves, you can call me Ives. My friends have trouble with my name, too. They call me Flip. If you want to call me Flip, that's fine as well. My Twitter handle is Compute Ives, or Compute Yves, it doesn't matter.

I'm here to talk about Code Sandbox. First I want to quickly check who of you know Code Sandbox? Okay, this is great. I'm still going to give a demo, because that is just something I like to do. This is Code Sandbox. Essentially, you have code and you have a preview. The great thing about it is you can make changes to that code. You will immediately see it in the preview. The better thing is you get a URL that you can share with other people and then they can play with that code and they can get started with it. Well, they can learn about your ideas.

We now have a kind of celebration. I think since yesterday we have hit the 30 million sandboxes on Code Sandbox. That was something that when we started Code Sandbox we never expected. That was not in our wildest dreams. People have built crazy stuff. All that Mario Kart there, that's not JavaScript. It's just CSS and it's working. You can move your kart around and everything. Any way, during this talk, I want to talk about the story of how Code Sandbox got started. How it started as a little student project and how it grew and grew and grew and what we have learned along the way because my goal really with this talk is if any of you has an idea and might want to work on that idea, I want to talk about the learnings we had so that you might use this as well.

2. The Story of Code Sandbox

Short description:

At the end, I have a bit of a technical part of the talk on how we make the latest version of Code Sandbox work. Let's go back six years and a bit. I was working at an auction website, converting our Ruby on Rails pages to React. While on vacation in St. Ives, I got questions from coworkers about code snippets. I didn't have my laptop, so I couldn't execute the code. This led me to think about having a development environment always available. Instead of pursuing the idea immediately, I started studying at the university. As I attended more lectures, including Java, I decided to start a side project. I saw Code Sandbox on my idea board and created the first version, React Sandbox, focused on components.

And at the end, I have a bit of a technical part of the talk as well on how we make the latest version of Code Sandbox work.

So, let's go back six years and a bit. I was working at an auction website. We were converting our Ruby on Rails pages to React. And, at some point, I was on vacation to a beautiful place called St. Ives. And we went there because my name was in it. That was really the only reason. And, while I was there, I got questions from my coworkers about pieces of code. I got like snippets on Slack. I had to decipher what was going on. And I saw, well, this piece of code is not working because I think it might be this. But it was frustrating. I didn't have my laptop with me so I couldn't execute the code.

And, so, at that point, I was thinking, what if I have my development environment always available? Would that make it easier? Like, would I be able to put it in the browser, for example? And, of course, like many ideas, I didn't do anything with the idea. Instead, I started studying at the university. And at first, that was very nice. And over time, we started to get lectures. More and more lectures. And they were interesting. But then we started getting Java lectures. First one was fine. Second one was also fine. But after the third one, I thought, OK, maybe it's time to also start a side project. Maybe.

And, so, I went to my idea board. I saw Code Sandbox in there and started to open Sketch and create the first version called React Sandbox. And it was very focused on components. Like this in here. It should be a component in the...

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Build a Collaborative Notion-Like Product in 2H
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
Witek Socha
Witek Socha
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.