DEV Community

Cover image for I Built a Browser-Based Terminal with 102 Developer Tools
Arthur F
Arthur F

Posted on

I Built a Browser-Based Terminal with 102 Developer Tools

The Idea

I wanted a single place to run quick developer tasks — subnet calculations, Base64 encoding, DNS lookups, hash generation —
without installing anything or signing up for yet another SaaS tool.

So I built administrator.sh, a browser-based terminal with 102 commands. It looks and feels lik
e an actual terminal, complete with CRT scanline effects, six color themes, and the satisfying glow of green-on-black text.

administrator.sh terminal screenshot

What's Inside

The 102 commands span five categories:

Network Tools
dns, whois, rdns, ping, traceroute, headers, ssl, port, subnet, cidr, asn, mac, myip, geo, cur
l
, http

These are the tools I reach for daily. Type dns example.com and get A, AAAA, MX, NS, TXT records instantly. ssl example.
com
shows certificate details, expiry date, and chain info. headers fetches and displays HTTP response headers.

Encoding & Dev Utilities
base64, hash, json, urlencode, regex, jwt, uuid, password, chmod, cron, timestamp, calc, diff, l
orem
, ascii, case, sort, reverse, number, color, workdays

The ones I use most: json validates and pretty-prints JSON. regex tests patterns with match highlighting. cron transl
ates cron expressions to plain English ("every 15 minutes on weekdays").

BBS-Style Social Features
chat, irc, board, msg, who, bulletin

This is where it gets fun. There's a real-time chat room, an mIRC-style chat interface, a message board, direct messaging b
etween users, and a who command that shows who's online right now. It's basically a modern BBS running inside a terminal.

Games
adventure, battleship, blackjack, chess, connect4, hangman, minesweeper, snake, tictactoe, wordle, hac
knet

Yes, there's a text adventure game. And multiplayer Battleship. And a hacking simulation. Because every good terminal needs
games.

System & Account
login, register, account, 2fa, apikey, notifications, support, theme, crt, help, history, clear

Users can optionally create accounts for persistent features (saved preferences, message history, 2FA). But most tools work
without any signup at all.

The Tech Stack

I deliberately kept this simple — no React, no Vue, no Next.js:

  • Backend: Flask (Python) with SQLAlchemy + MySQL — 5,400 lines in a single app.py
  • Frontend: Vanilla JavaScript, 102 command files bundled with esbuild into one terminal.bundle.js
  • CSS: Custom properties for theming, no preprocessor
  • Server: Gunicorn with gevent (single worker, 1000 concurrent connections)
  • Infra: Nginx reverse proxy, Cloudflare Worker for geographic routing

Why No Framework?

A terminal is fundamentally a text input and text output. The "UI" is:

<main id="terminal"></main>
Enter fullscreen mode Exit fullscreen mode

That's it. Everything else is JavaScript appending lines of text. A framework would add complexity with zero benefit here.

The Command Architecture

Each command is a self-contained module:

// static/js/commands/hash.js
export default {
  name: "hash",
  description: "Generates a SHA-256 hash of the input.",
  usage: "hash <text>",
  category: "encoding",

  run({ print, arg, createPrompt, handleCommand }) {
    if (!arg) {
      print("Usage: hash <text>");
      return createPrompt(handleCommand);
    }

    const encoder = new TextEncoder();
    const data = encoder.encode(arg);

    crypto.subtle.digest("SHA-256", data).then(buffer => {
      const hashArray = Array.from(new Uint8Array(buffer));
      const hashHex = hashArray.map(b =>
        b.toString(16).padStart(2, "0")
      ).join("");
      print("SHA-256: " + hashHex);
      createPrompt(handleCommand);
    });
  }
};
Enter fullscreen mode Exit fullscreen mode

Every command gets the same context object: print to output text, arg for user input, createPrompt to show the next p
rompt, and handleCommand to process the next command. Adding a new command means creating one file and adding one import.

No WebSockets

Real-time features (chat, who's online, DMs) all use polling. Chat polls every 2 seconds, visitor count every 10 seconds. I
t's simple, reliable, and works behind any proxy or firewall. With gevent handling concurrency, a single worker handles 100
0+ simultaneous connections without breaking a sweat.

Standalone Tool Pages

Recently I added standalone tool pages at administrator.sh/tools/ — Google-indexable HTM
L pages for each tool. Same logic, but with proper forms instead of a command-line interface:

Each tool page loads a single ~5KB standalone JS file. All processing happens client-side — your data never leaves your bro
wser.

Things I Learned Building This

1. Polling is underrated. WebSockets add complexity (connection management, reconnection logic, proxy configuration). P
olling at 2-second intervals is indistinguishable from real-time for chat, and it just works everywhere.

2. One file per command scales well. At 102 commands, the codebase is still easy to navigate. Each command is isolated,
testable, and can be worked on independently. The esbuild step bundles everything into one file in under 100ms.

3. In-memory state is fine for ephemeral data. Chat messages, online status, and board posts live in Python dicts. They
clear on restart, which is actually a feature — no moderation overhead, no data retention concerns. Persistent data (accou
nts, preferences) goes to MySQL.

4. CSS custom properties make theming trivial. Six themes with zero JavaScript theme logic — just swap a class on <bod
y>
and every color updates through CSS variables.

5. gevent is magic for I/O-bound Python. A single Gunicorn worker with gevent handles 1000 concurrent connections. The
monkey-patching means standard threading.Lock and threading.Thread just work as greenlet-safe equivalents.

Try It

Head to administrator.sh and type help to see all 102 commands. Or check out the standalone
tools
if you prefer a traditional UI.

A few commands to start with:

  • dns google.com — DNS lookup
  • subnet 192.168.1.50 192.168.1.0/24 — subnet check
  • json {"name":"test"} — format JSON
  • who — see who else is online
  • chat — join the chat room
  • adventure — play a text adventure
  • theme — change the color scheme
  • crt — toggle CRT scanline effects

Everything runs in your browser. No signup, no install, no tracking.

Top comments (0)