GOPHER BROWSER

• 

Inspiration

Before the World Wide Web, there was Gopher a simpler, faster protocol from 1991 that once dominated the internet. It lost the protocol wars to HTTP, but hundreds of Gopher servers still run today, hosting unique content from personal blogs to Wikipedia mirrors. The problem? There's no modern, user-friendly way to access them.

When I saw Kiroween's "Resurrection" category, I knew I had to bring Gopher back to life. I wanted to build a bridge between 1991 and 2024, honoring the protocol's history while making Gopherspace accessible to everyone through a beautiful, retro-futuristic web interface.

What it does

Gopher Browser is a modern web application that lets you explore Gopherspace with style:

Full Gopher Protocol Support - Browse directories, read text files, search servers, and handle all RFC 1436 item types Three Retro Terminal Themes - Switch between green phosphor, amber, and white monochrome terminal aesthetics Authentic Retro Sounds - Computer boot-up sound on launch, modem dial-up sounds when connecting Modern Features - Bookmarks with localStorage, navigation history (last 50 sites), back button, search functionality Progressive Web App - Install it like a native app, works offline with cached content Responsive Design - Works beautifully on desktop, tablet, and mobile The entire UI adapts to your chosen theme—buttons, text, borders, loading spinners, everything glows in your selected terminal color.

How we built it

I used Kiro's spec-driven development workflow, which transformed how I approached the project:

Phase 1: Requirements

Created 8 user stories with 40 EARS-compliant acceptance criteria Defined clear, testable requirements for every feature

Phase 2: Design

Developed comprehensive architecture with component diagrams Defined 19 correctness properties for property-based testing Each property validates behavior across infinite inputs, not just specific examples Phase 3: Tasks (15 min)

Generated 14 implementation tasks with complete traceability Every task mapped back to specific requirements Phase 4: Implementation (4 hours)

Built Node.js backend with raw TCP socket connections for Gopher protocol Created custom RFC 1436 parser for menu format Built React frontend with TypeScript Implemented three theme system using CSS variables Added Web Audio API for retro computer sounds Made it a PWA with service workers Tech Stack:

Backend: Node.js + Express + TypeScript (raw TCP sockets) Frontend: React 18 + TypeScript + Vite Testing: Vitest + fast-check for property-based testing PWA: Service Workers + Workbox

Challenges we ran into

TCP in the Browser - Browsers can't make raw TCP connections for security reasons. Solution: Built a Node.js proxy server that handles TCP connections and exposes an HTTP API.

Parsing RFC 1436 - Gopher menus are tab-delimited with inconsistent formatting across servers. Solution: Built a robust parser handling different line endings, missing fields, and edge cases. Property-based testing caught bugs I never would have found manually.

Theme Switching - Needed every UI element to change color dynamically. Solution: CSS variables (--primary-color, --bg-color) throughout the codebase. Change the class, change the entire theme instantly.

Browser Audio Restrictions - Browsers block autoplay audio. Solution: Play sounds on first user interaction, then modem sounds play on each navigation.

Making Retro Look Good - Retro can easily look cheap. Solution: Used authentic terminal color schemes, subtle CRT scanlines, smooth animations, and careful typography. The result feels genuinely retro without being a parody.

Accomplishments that we're proud of

Built a complete, polished app in 6 hours using spec-driven development Three fully-functional terminal themes with every UI element adapting dynamically Authentic retro sounds created entirely with Web Audio API (no audio files!) 19 correctness properties defined and ready for property-based testing Actually useful - not just a tech demo, but a real tool for exploring Gopherspace

What we learned

Spec-Driven Development Works - Spending 90 minutes planning before coding felt counterintuitive, but it paid off massively. I never got stuck wondering "what next?" The spec was my roadmap.

Correctness Properties > Unit Tests - Property-based testing is powerful. Instead of testing specific examples, I defined universal rules that validate behavior across infinite inputs. This caught edge cases I never would have thought to test.

Constraints Breed Creativity - Gopher's simplicity (just TCP + text) forced me to focus on UX and aesthetics rather than complex features. Sometimes less is more.

Retro Can Be Functional - The high-contrast colors, monospace fonts, and simple layouts aren't just nostalgic—they're highly usable and accessible.

Web Audio API is Amazing - Created authentic computer sounds (boot-up beep, modem dial-up) entirely with code using oscillators and frequency ramps.

What's next for GOPHER BROWSER

Gopher+ protocol support - Extended Gopher protocol with additional features Custom theme creator - Let users design their own terminal color schemes Browser extension version - Make it even more accessible Full-text search - Search across all visited pages Gopher server hosting - Let users host their own Gopher content Export bookmarks - Save bookmarks to HTML or other formats

Keyboard shortcuts - Power user features for faster navigation

Built With

• audio
• github
• gopher-protocol
• kiro
• node.js
• react
• typescript
• vitest
• web