"Can you add a way to track which Assembler modules I've built?" A question from a user in Discord. Building all 114 modules that the Assembler facility can produce is a significant milestone in EVE Frontier—a personal goal for completionists. They wanted checkboxes, progress tracking, and material totals.
We shipped it in under an hour. From first prompt to production deployment. This is a story about how previous investments in architecture, data pipelines, and vibe coding workflows compound to make rapid feature development possible.
The User Request
The ask was clear:
- Show all 114 modules the Assembler can build
- Checkboxes to mark modules as "built"
- Progress counter (X/114 completed)
- Total materials needed for remaining modules
- Persistence across browser sessions
- Search and sort functionality
This sounds like a lot, but the key insight is: we've built all these patterns before.
Why One Hour Was Possible
The speed came from three factors working together:
1. Existing Data Extraction Pipelines
The Assembler's module list already existed in our game data extractions. We use the eve-frontier-tools pipeline to extract blueprint data from the game client. The blueprint_data_v4.json file contains every blueprint in the game, including the 114 Assembler modules (Facility ID 88068).
A simple Python script filtered the data:
assembler_modules = [
bp for bp in blueprints
if bp.get('facilityId') == 88068
]
# Result: 114 modules with names, inputs, run times
No new extraction needed. The data was already there, waiting to be sliced differently.
2. Established UI Patterns
The EF-Map frontend already has:
- PanelDrawer components for slide-out panels
- Rail management system for experimental features
- localStorage persistence patterns used in routing, bookmarks, and activity tracking
- Theme-consistent CSS variables (orange accents, dark backgrounds)
- Checkbox styling matching our design language
We didn't design a new component from scratch. We followed the existing patterns established in components like Activity Tracker and Scout Optimizer.
3. Voice-to-Prompt Workflow
Using transcription for prompts allows describing complex requirements quickly. A five-minute voice transcription can convey what would take 15 minutes to type—and more importantly, captures the nuance of what's wanted without the friction of writing it out.
"I want a panel with checkboxes for each module, sorted alphabetically by default. When they check one off, it should persist. Show progress at the top—how many they've built out of 114. And calculate the total materials needed for the ones they haven't checked yet."
That single description contained enough for the LLM to scaffold the entire component structure.
The One-Hour Timeline
Created Python script to extract Assembler modules from existing blueprint data. Output: assembler_modules.json with 114 entries including names, inputs, and build times.
Generated ModuleMission.tsx and ModuleMission.css following existing panel patterns. Checkbox list, search input, sort dropdown, progress bar, material totals.
Added rail item definition, experimental feature flag, PanelDrawer wiring in App.tsx. Same pattern as every other experimental panel.
TypeScript compiled, Vite built, deployed to Cloudflare Pages preview. First visual test.
User feedback: colors should use theme accent (orange) not cyan. Updated 7 CSS rules to use var(--accent).
Some module names showed as "Type XXXXX" placeholders. Created fix script to populate proper names from game data. Fixed 258 material names and 2 module names.
User requested "incomplete first" sort option. Added incomplete-first sort mode to surface unchecked modules at top of list.
Native select dropdown looked jarring with light grey background. Applied dark theme styling to match P2PRouting dropdowns.
Committed changes, pushed to remote, deployed to production on Cloudflare Pages.
The Final Feature
Module Mission Panel Capabilities
- 114 Assembler modules displayed with checkboxes
- Progress tracking: X/114 modules built with visual progress bar
- Material totals: Aggregate materials needed for remaining modules
- Time remaining: Total build time for unchecked modules
- Search: Filter modules by name
- Sort options: Name, Time (shortest/longest), To-do first
- Persistence: Checkbox state saved in localStorage
- Bulk actions: Complete All / Reset All buttons
What Made This Fast
Compounding Investments
- Data pipelines: Game data already extracted, just needed filtering
- Component patterns: Panel, rail, persistence patterns reused
- CSS variables: Theme colors applied via
var(--accent), not hardcoded - TypeScript types: Existing patterns for module/input structures
- Deployment automation: Single command deploys to Cloudflare
- Preview branches: Test changes without affecting production
Every previous feature we've built—Scout Optimizer, Activity Tracker, Tribe Marks—established patterns that made this one faster. The first experimental panel took days. This one took an hour.
The Iteration Loop
Notice that the timeline includes three rounds of refinement after the initial deploy:
- Style fixes (cyan → orange accent)
- Data fixes (placeholder names → real names)
- UX enhancement (sort by incomplete first)
This is the vibe coding workflow in action. Deploy fast, get feedback, iterate. Each cycle was under 10 minutes because:
- TypeScript catches errors before deploy
- Vite builds in under 7 seconds
- Wrangler deploys in under 10 seconds
- Preview URLs let us verify without touching production
Lessons for Rapid Development
Invest in Patterns
The time spent establishing good patterns for panels, persistence, and styling pays dividends on every subsequent feature. Don't copy-paste—create reusable patterns.
Keep Data Accessible
Having game data already extracted and queryable meant zero time spent on data acquisition. The extraction scripts we built months ago continue to enable new features.
Voice Prompts Beat Typing
For complex feature requests, voice transcription captures intent faster and more completely than typing. Five minutes of talking conveys more context than five minutes of typing.
Deploy Early, Iterate Often
The first deploy happened at the 25-minute mark. Everything after that was refinement based on actually seeing and using the feature. Don't wait for perfect—deploy and improve.
Related Articles
- Smart Assembly Size Filtering: 45 Minutes — Similar rapid development story
- Vibe Coding at Scale — The methodology behind LLM-assisted development
- Scout Optimizer — Another experimental panel that established patterns
- Activity Tracker — The persistence patterns we reused