Platzi Coding Playground

As an engineer at Platzi, my focus was on revolutionizing online education through innovative product creation and delivery methods. My aim was to enhance the learning experience for students; therefore, I worked in Platzi’s Coding Playground, an interactive platform that helps students improve their JavaScript, SQL, and Python skills through challenges directly in the browser. 

In this project, I had the opportunity to create the whole user experience; therefore, I created a simple UI with gamification that allows the students to resolve challenges with a system of 3 lives, and eventually, when the students lose their lives, a button will reveal the solution, and the way to validate the student answer is to run unit tests in that environment.

Running Python in the browser

I used Pyodide, a WebAssembly-based Python distribution, to facilitate Python execution in the browser. I contributed to creating a custom runner to enable the Python ecosystem, which includes common libraries such as Pandas, numpy, py-test and more. With this, the students can practice without leaving the platform.

SQL with WebAssembly

To run SQL in the browser, we reuse Pyodide, the runner created above, and using sqlite3 with Python, we can run SQL challenges directly in the browser and execute SQL instructions such as INSERT, SELECT, JOIN, UPDATES, etc. In some cases, the challenges are pre-loaded with a dataset so that the student can use this data and build queries to solve the challenge. Finally, to check the student’s answer, the app runs unit tests to validate the expected data.

JavaScript with Sandpack

To run JavaScript in the browser safely, I used Sandpack by Condesanbox. Sandpack is a component toolkit for creating live-running code editing experiences and allows you to run a whole JavaScript ecosystem, including libraries, in this same environment the unit tests are run with Jest to validate that the student answer was correct.

The Stack

The app uses NextJS/React and Tailwind CSS for the frontend, and Pyodide and Sandpack to run Python, SQL, and JavaScript safely in the browser.