How I brought a 1991 protocol back to life in 6 hours using spec-driven development
https://modern-gopher.netlify.app/
also added a screen-recording for your reference
The Challenge
When I saw the Kiroween Hackathon's "Resurrection" category, I knew exactly what I wanted to build: a modern interface for the Gopher protocol. For those unfamiliar, Gopher was the dominant way to navigate the internet before the World Wide Web took over in the mid-90s. It's a text-based protocol from 1991 that's simpler, faster, and still has active servers running today—but accessing them requires special clients or command-line tools.
My goal? Make Gopherspace accessible to everyone through a beautiful, retro-futuristic web application.
Why Gopher?
Gopher represents a fascinating "what if" in internet history. It was cleaner, more organized, and arguably more user-friendly than early HTTP. But it lost the protocol wars to the World Wide Web. Today, there's a small but dedicated community keeping Gopherspace alive, hosting everything from personal blogs to Wikipedia mirrors.
The problem? There's no modern, user-friendly way to browse it. That's where my project comes in.
Enter Kiro: Spec-Driven Development
Rather than diving straight into code, I used Kiro's spec-driven development workflow. This was a game-changer. Here's how it worked:
Phase 1: Requirements
I started by defining what the browser needed to do. Using EARS (Easy Approach to Requirements Syntax), I created 8 major user stories with 40 acceptance criteria. For example:
User Story: As a user, I want to connect to Gopher servers and view their content, so that I can explore Gopherspace through a modern interface.
Acceptance Criteria:
WHEN a user enters a Gopher URL THEN the Web Interface SHALL establish a TCP connection to the specified server and port
WHEN the Web Interface receives a Gopher menu response THEN the Web Interface SHALL parse the menu according to RFC 1436 format
This structured approach forced me to think through every feature before writing a single line of code.
Phase 2: Design
Next, Kiro helped me create a comprehensive design document. The most interesting part? Correctness properties—formal statements about what the system should do that can be tested with property-based testing.
For example:
Property 2: Gopher menu round-trip consistency
For any valid Gopher menu structure, serializing to RFC 1436 format then parsing should produce an equivalent menu structure with all fields preserved.
I ended up with 19 of these properties. They're like unit tests on steroids—instead of testing specific examples, they verify behavior across infinite inputs.
Phase 3: Implementation Plan
Kiro generated a task list with 14 major tasks, each traceable back to specific requirements. This became my roadmap:
Set up project structure
Implement Gopher protocol handler
Build React frontend
Add bookmarks and history
Create retro UI theme
And so on...
Phase 4: Building
With the spec complete, implementation was surprisingly smooth. I knew exactly what to build and why. No scope creep, no "should I add this?" moments—just focused execution.
The Tech Stack
Backend:
Node.js + Express
Raw TCP socket connections (Gopher uses TCP, not HTTP!)
Custom RFC 1436 parser
Frontend:
React 18 + TypeScript
Vite for blazing-fast builds
Pure CSS for that retro aesthetic
Special Sauce:
Web Audio API for retro computer sounds
Service Workers for PWA/offline support
LocalStorage for bookmarks and history
The Features
- Full Gopher Protocol Support
The browser handles all major Gopher item types:
Text files (type 0)
Directories (type 1)
Search servers (type 7)
Binary files (types 9, g)
HTML links (type h)
And more!
- Three Retro Terminal Themes
I added a theme switcher with three authentic terminal color schemes:
Green phosphor (classic terminal)
Amber (warm 80s vibes)
White (high contrast monochrome)
Every UI element—buttons, text, borders, even the loading spinner—adapts to the selected theme. It's like having three different vintage computers in one app.
- Authentic Retro Sounds
Boot-up sound when you first open the app (like an old PC powering on)
Modem sound when connecting to servers (that classic dial-up nostalgia)
These were created using the Web Audio API—no audio files needed!
- Modern Conveniences
Despite the retro aesthetic, it has modern features:
Bookmark management with localStorage
Navigation history (last 50 sites)
Back button navigation
Search functionality
PWA support (install it like a native app!)
Responsive design (works on mobile)
- The UI
The interface honors Gopher's history while feeling modern:
CRT-style scanlines
Glow effects on interactive elements
Smooth animations
ASCII art logo
Monospace fonts throughout
What I Learned
- Spec-Driven Development Works
I was skeptical at first—90 minutes of planning before writing code? But it paid off massively. I never got stuck wondering "what should I build next?" The spec was my north star.
- Correctness Properties Are Powerful
Property-based testing catches bugs that unit tests miss. For example, my "menu round-trip" property found an edge case with empty selectors that I never would have thought to test manually.
- Constraints Breed Creativity
The Gopher protocol is incredibly simple compared to HTTP. This constraint forced me to focus on UX and aesthetics rather than complex features. Sometimes less is more.
- Retro Can Be Modern
The retro aesthetic isn't just nostalgia—it's functional. The high-contrast colors, simple layouts, and clear typography make the app highly usable. Plus, it's just fun!
Try It Yourself
The project is open source and ready to run:
GitHub: https://github.com/pooja-bhavani/Kiroween-Challenge
Try these Gopher URLs:
gopher://gopher.floodgap.com - Most popular Gopher server
gopher://gopherpedia.com - Wikipedia on Gopher!
gopher://gopher.quux.org - Classic Gopher content
The Bigger Picture
This project isn't just about Gopher—it's about preserving internet history and making it accessible. The early internet had a charm and simplicity we've lost. Projects like this remind us that "dead" technologies often have valuable lessons to teach.
Plus, it's a testament to what you can build in a weekend with the right tools and approach. Spec-driven development with Kiro turned what could have been a chaotic hackathon scramble into a structured, enjoyable building experience.
What's Next?
I'm considering adding:
Gopher+ protocol support
Custom theme creator
Browser extension version
Gopher server hosting capabilities
But for now, I'm just excited to share this with the world and see people explore Gopherspace again.
Conclusion
Building the Gopher Browser taught me that:
Old technologies deserve modern interfaces
Spec-driven development is worth the upfront investment
Retro aesthetics can be both beautiful and functional
You can build something meaningful in just 6 hours
If you're interested in internet history, retro computing, or just want to see what the web looked like before the web, give it a try. And if you're building something complex, consider using specs—your future self will thank you.
Technical Deep Dive (For the Curious)
How Gopher Works
Gopher is beautifully simple:
Client connects to server via TCP (usually port 70)
Client sends: selector\r\n
Server responds with either:
A menu (tab-delimited lines)
Plain text content
Connection closes
That's it! No headers, no cookies, no JavaScript. Just pure content.
The Parsing Challenge
Gopher menus are tab-delimited:
Type + Display + TAB + Selector + TAB + Host + TAB + Port
For example:
0About this server /about.txt gopher.example.com 70
1Documents /docs gopher.example.com 70
My parser had to handle:
Different line endings (CRLF vs LF)
Missing fields
Invalid item types
Empty selectors
Special characters
The round-trip property test caught several edge cases I missed!
The Audio Challenge
Creating retro sounds without audio files was fun. The boot-up sound uses:
Low frequency beep (100 Hz)
Rising tone (100 Hz → 800 Hz)
High frequency beep (1200 Hz)
All synthesized in real-time with the Web Audio API!
The Theme System
CSS variables made theme switching trivial:
.app.theme-green {
--primary-color: #00ff00;
--bg-color: #000;
}
.app.theme-amber {
--primary-color: #ffb000;
--bg-color: #000;
}
Every component uses var(--primary-color) instead of hardcoded colors. Change the class, change the theme!
GitHub: https://github.com/pooja-bhavani/Kiroween-Challenge
Built with: Kiro, React, Node.js, TypeScript, and lots of ☕
Top comments (0)