Solution diff-ing inside codedamn labs

Yesterday we rolled out an update for codedamn labs. For readers who are not aware what codedamn labs is, it is a full-fledged development environment that can be setup inside your browser in a few seconds. You get your own linux container in the cloud connected to the frontend with a simple VSCode-like UI. Try out a playground for free here.

We use the same infrastructure inside our courses and learning paths like full-stack web developer learning path. This helps our content creators build truly hands-on and interactive courses for people to learn by building. Here’s what a standard lab might look like:

Here, you have to create a simple object in JavaScript and assign certain properties to it. Earlier, if somebody gets stuck on a lab like this, they had to take help from the discord community we have, but that’s not very convenient. If you’re in a learning state, you want to learn quickly and move ahead.

Therefore, starting today, we would be rolling out a Stuck? Check Solution button on labs gradually over the next few weeks covering all these labs. Once clicked, it changes the editor in the center to a diff editor. Try out this lab to check it out.

How does it work?

Before understanding how the flow works, let’s understand a few things about codedamn architecture.

We use Monaco as the editor on desktops. It is a basic version of VSCode with much less power and features, but nonetheless it is an amazing editor. Once the Solution view button is clicked, we download the full verified solution in the form of a ZIP file from our S3 bucket.

The verified solution is the solution added by the creator of the lab.

We have to download the full zip file because the labs could be multi-file as well. For example, in a lab where you have to setup a database and API routes, you might have to do work in multiple files. We store your code as a ZIP archive on S3 bucket (and the verified solution too)

Once that is downloaded, we keep the ZIP file in memory, and switch the default editor to diff editor provided by Monaco. This editor accepts two models – the original model and the modified model.

The original model is marked as read-only by Monaco, and this is what we want for the creator solution. It wouldn’t make sense for user to modify the creator model because that filesystem (the one we downloaded as ZIP on button click) is not synced with the docker container on backend.

The modified model, however, is the real model of the user that the user can modify while watching the source code. Users can peek into the solution, compare the diff with solution, and continue with their work.

We hope that this would create an amazing interactive learning experience for the users using codedamn.

If you have any feedbacks, please feel free to send using the contact form.