I Built a Mobile-Friendly Python Playground from Scratch — Here's What I Learned

#python #programming #webdev #beginners

By Hasan

A few weeks ago, I had a simple frustration: every online Python compiler I tried felt clunky, ugly, or just didn't work well on mobile.

So I built my own. I called it PythCode.

What is PythCode?

PythCode is a free online Python playground that runs right in your browser. No login. No install. Just open and code.

It supports:

Numpy, Pandas, Matplotlib and Seaborn out of the box
User input() — something many compilers skip
Plot Viewer — run your Matplotlib code and view your chart instantly, then export as PNG
Shareable links — copy the URL and your code is shared instantly
Download as .py — one click saves your file with the right extension
Tokyo Night, Dark and White themes — because aesthetics matter
FiraCode and 4 other fonts — because devs are picky about fonts (rightfully so)
Resizable editor and output panes

👉 Try it here: pythcode.netlify.app

The Hardest Part: User Experience

I could get the compiler working in a day. But making it feel right — that took much longer.

Every button placement, every color, every spacing decision went through multiple iterations. The UX had to feel natural, not like a tool thrown together over a weekend.

I kept asking myself: "Would I actually enjoy using this?"

If the answer was no, I changed it.

Mobile Responsiveness: Crafted with Perfection

This was the chapter I underestimated the most.

Mobile responsiveness sounds simple — make it work on small screens. But in a code editor with a split pane layout, toolbar buttons, a plot viewer modal and a console output, every single element needs individual attention.

It wasn't one big fix. It was hundreds of tiny fixes.

Every change was minor. Every change mattered. The result is a mobile experience that feels intentional, not like an afterthought — the editor scrolls horizontally and vertically, the plot viewer looks beautiful on a small screen, and the toolbar stays clean and accessible.

I'm proud of it. But I still want feedback — so please try it on your phone and tell me what breaks 🙏

The Welcome Message

One small touch I'm happy about: when you open PythCode for the first time, you're greeted with a multiline comment that explains every feature in under 15 seconds. Below it is a ready-to-run Matplotlib demo.

First impression matters. I wanted yours to be good.

"""
═══════════════════════════════════════════
  Welcome to PythCode! 🐍
  The Python Playground built for devs
═══════════════════════════════════════════

 ✨ FEATURES:
 → Tokyo Night, Dark & Light themes
 → FiraCode + 4 other fonts
 → Numpy, Pandas, Matplotlib, Seaborn ready
 → Supports user input()
 → Share code via link  (just copy URL!)
 → Download code as .py file
 → Export plots as PNG
 → Resizable editor & output pane

 📊 PLOTS:
 → After running code, click the
   "Plots" button to view your chart
 → You can save it as PNG too!
═══════════════════════════════════════════
"""