Coding Challenge #108 - Online Coding Playground
This challenge is to build your own online coding playground.
Hi this is John with this week’s Coding Challenge.
🙏 Thank you for being a subscriber, I’m honoured to have you as a reader. 🎉
If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧
Coding Challenge #108 - Online Python Playground
This challenge is to build your own online code playground where users can write and run Python code directly in their web browser.
An online code playground is a web-based environment where developers can experiment with code without needing to install anything on their computer. Think of it like a digital sandbox, you can write code, click a button, and see the results instantly. It’s incredibly useful for learning, testing ideas quickly, or sharing code snippets with others.
If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It
Refer a friend or colleague to the newsletter. 🙏
Sign up for a paid subscription - think of it as buying me a coffee ☕️, with the bonus that you get access to a monthly AMA and 20% off any of my courses.
Buy one of my self-paced courses that walk you through a Coding Challenge.
Join one of my live courses where I personally teach you Go by building five of the coding challenges or systems software development by building a Redis clone.
The Challenge - Building Your Own Online Code Playground
You’re going to build an online code playground for Python (or another programming language of your choice). Users will be able to write code in an editor, run it with the click of a button, and see the output or errors displayed immediately. Over several steps, you’ll add features like saving code snippets, syntax highlighting, error messages with line numbers, and performance safeguards to keep the browser responsive.
Step Zero
Set up your development environment and get familiar with the technologies you’ll be using.
You’ll need to choose a tech stack that works well for building web applications with a rich code editor. You’ll be using a Python WebAssembly runtime (like Pyodide or PyScript) to execute Python code in the browser, so make sure you understand how it works before you begin.
Step 1
In this step, your goal is to execute Python code in the browser and display the output to the user.
You’ll create a simple HTML page with a code editor (a basic textarea is fine for now) and a “Run” button. When the user clicks the button, take the code from the editor, send it to the Python WASM runtime, and display whatever the code prints to standard output in an output panel below.
Testing: Write a simple Python script that prints “Hello, World!” and verify it displays correctly. Try a few more examples: print multiple lines, do some math (print(2 + 2)), and test with variables.
Step 2
In this step, your goal is to catch and display Python errors in a user-friendly way.
When code fails to run (syntax errors, runtime errors, etc.), the user should see a clear error message that tells them what went wrong and where. Include the line number and the error traceback so they can debug their code.
Testing: Deliberately write broken code, missing colons, undefined variables, division by zero, and verify that each error is clearly shown with line numbers and helpful messages.
Step 3
In this step, your goal is to replace the basic textarea with a proper code editor that highlights Python syntax.
Your users will write code more efficiently and catch mistakes faster if the syntax is color-coded. You can use an existing code editor library (like CodeMirror or Monaco Editor). The editor should support undo/redo, copy/paste, and basic keyboard shortcuts.
Testing: Type Python code into the editor and verify that keywords (like def, if, for) appear in different colours. Test undo/redo, and make sure basic shortcuts like Ctrl+Z or Cmd+Z work.
Step 4
In this step, your goal is to let users save their code snippets to the browser’s local storage and load them again later.
Users should be able to save their current code with a name, see a list of their saved snippets, and load any snippet back into the editor. They should also be able to delete saved snippets they no longer need.
Testing: Write some code, save it with a descriptive name, close the browser tab (or reload the page), and verify the code is still there when you come back. Create multiple snippets and switch between them.
Step 5
In this step, your goal is to prevent long-running code from freezing the browser and provide users with feedback about what’s happening.
Add a timeout for code execution—if code takes too long to run, stop it and show a message. Display a loading indicator while code is executing. Optionally, show memory usage warnings if code is consuming too much resources.
Testing: Write code that runs for a long time (like an infinite loop or a deep recursion). Verify it stops after a reasonable timeout and the user sees a clear message. Test that the loading indicator appears and disappears at the right times.
Step 6
In this step, your goal is to handle edge cases gracefully so your playground doesn’t break.
Handle situations where the Python WASM runtime fails to initialise, the browser doesn’t support WebAssembly, or the user’s browser runs out of localStorage space. Show helpful messages in each case so users know what’s happening.
Testing: Try disabling WebAssembly in your browser to test the fallback message. Fill up localStorage and try to save a large code snippet, and verify a clear error message appears.
Going Further
Once you’ve built the basic playground, consider adding more advanced features:
Autocomplete and code hints - Help users discover Python functions and methods as they type
Multiple files - Let users create projects with multiple Python files
Import libraries - Allow users to import common Python libraries (many are available in Pyodide)
Share snippets - Generate a link that someone else can click to load and run your code
Dark mode - Add a theme toggle so users can write code comfortably at night
Keyboard shortcuts guide - Show users what shortcuts are available
P.S. If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It
Refer a friend or colleague to the newsletter. 🙏
Sign up for a paid subscription - think of it as buying me a coffee ☕️ twice a month, with the bonus that you also get 20% off any of my courses.
Buy one of my courses that walk you through a Coding Challenge.
Subscribe to the Coding Challenges YouTube channel!
Share Your Solutions!
If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know via Bluesky or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo
Request for Feedback
I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.
You can reach me on Bluesky, LinkedIn or through SubStack
Thanks and happy coding!
John