Legaxy UX Reviver

Bringing Dead APIs Back to Life with a Modern UI with Zero Legacy Backend Changes - All in 60 seconds!

Comment

Legacy UX Reviver

Inspiration

Every company has that internal tool. The one built in 2010 that looks like it was designed to punish employees. Comic Sans headers. Scrolling marquee tags. "Best viewed in Internet Explorer 6.0" footers.

The backend API works fine - the data is there, the logic is solid. But the UI? A crime against humanity.

We've both worked at companies where HR spent 4 hours on tasks that should take 10 minutes because the tools were so painful to use. The obvious solution is a rewrite, but:

  • Rewrites cost $100K+
  • They take 6-12 months
  • Nobody wants to own that project

We thought: what if you could just... generate a new frontend?

Point at the existing API, click a button, get a modern React dashboard. No backend changes. No migration risk. Just a beautiful new face on the same reliable backend.

That's Legacy UX Reviver - a tool that resurrects dead UIs by generating modern frontends from legacy API specs.

What it does

You give us your API (REST or SOAP), and we give you a complete, deployable React admin portal.

The Flow

1. Analyze your API

You can:

  • Paste an OpenAPI/Swagger spec
  • Upload a WSDL file
  • Connect to a live endpoint with auth
  • Just paste a sample JSON/XML response

We support 8 different input methods because legacy APIs come in all shapes.

2. Review & Customize Schema

Our analyzer extracts resources, fields, and operations. It detects field types automatically (dates, emails, URLs, booleans) and identifies primary keys.

Don't like EMP_FNAME? Rename it to "First Name." Want to hide sensitive fields? Toggle them off. Need to disable delete operations? One click.

3. Customize the UI

  • Pick your theme (light, dark, or spooky 🎃)
  • Choose an accent color
  • Enable features like bulk actions and CSV export

4. Deploy

Three options:

  • Preview instantly in browser
  • Download complete project (React + Node.js proxy)
  • Deploy to Vercel with one click

What You Get

The generated portal includes:

  • 📊 Dashboard with stats and charts
  • 📋 Data grids with search/sort/filter
  • 🔍 Detail views
  • ✏️ Create/edit forms
  • ☑️ Bulk operations (select, delete, export)
  • 📥 CSV export

It connects to your legacy API through a smart proxy that handles:

  • CORS (legacy APIs never have the right headers)
  • Authentication (Bearer, API Key, Basic, WSSE)
  • Field name mapping (EMP_FNAME ↔ firstName)
  • Response unwrapping (nested data → flat arrays)

Zero backend changes required. Your legacy API stays exactly as it is.

How we built it

Built entirely with Kiro, using spec-driven development for complex parts and vibe coding for rapid iteration.

Tech Stack

Frontend:

  • React 19 + TypeScript
  • Vite 7
  • Tailwind CSS 4
  • Radix UI primitives
  • Spooky theme (analyzer) + Modern theme (generated portals)

Backend:

  • FastAPI + Python 3.11
  • 8 analyzers (OpenAPI, WSDL, JSON/XML inference, live endpoint probing)
  • Normalized ResourceSchema output

Smart Proxy:

  • Solves CORS
  • Injects authentication
  • Maps field names bidirectionally
  • Unwraps nested responses

Project Generation:

  • Template system outputs complete, working projects
  • React + Vite frontend
  • Express proxy server
  • Pre-populated config files
  • Startup scripts (Mac/Windows)

How Kiro Helped

  • Specs kept 8 analyzers producing identical output formats
  • Steering docs encoded our dual-theme system (path-based theme inference)
  • Hooks ran 219 tests on every analyzer change
  • Context7 MCP provided current docs for React 19 and Tailwind 4

Challenges we ran into

Type Inference Hell

We needed to look at JSON values and guess types. Is "2024-01-15" a string or a date? Is "123" a string or number?

Every fix broke something else. We finally wrote a proper spec with property-based tests using Hypothesis, which generated thousands of random inputs and found edge cases we'd never catch manually:

  • Digit strings losing precision when parsed as numbers
  • Unicode characters crashing our email regex
  • Malformed date strings causing parser failures

SOAP/WSDL Complexity

WSDL files are XML describing XML, with namespaces everywhere. Our parser kept choking until we added preprocessing to strip namespaces.

WSSE authentication was another rabbit hole - nonce generation, password digests, timestamp formatting. We'd never implemented it before, but Kiro pulled from Context7 and generated a working implementation first try.

Dual-Theme Confusion

Early on, Kiro would generate portal components with skull icons, or analyzer components with clean styling.

Solution: path-based theme rules in steering docs. Anything in Analyzer* files → spooky theme. Everything else → modern.

BaseUrl Coordination

The OpenAPI spec contains the server URL, which needs to flow through:

  1. Analyzer (extract)
  2. Frontend state (capture)
  3. localStorage (persist)
  4. Generated proxy config (inject)

We specced out the data flow explicitly. Kiro implemented all 5 files correctly with data passing through as designed.

Accomplishments that we're proud of

✅ Generated projects actually work Users download a ZIP, run ./start.sh, and have a working modern UI connected to their legacy API. Not scaffolding - production code.

✅ 219 passing tests Including property-based tests that generate random inputs. Caught 3 regressions where fixing one analyzer broke another.

✅ 8 input methods OpenAPI (JSON/YAML/URL), live REST endpoint, JSON sample, WSDL (file/URL), live SOAP endpoint, XML sample. Whatever format your legacy API docs exist in, we handle it.

✅ Smart proxy with 4 auth modes Bearer, API Key, Basic, WSSE - plus field mapping and response unwrapping. All without touching the legacy backend.

✅ One-click Vercel deployment API spec → deployed portal in under 60 seconds.

✅ The spooky theme It's Kiroween - we committed to the bit. Floating ghost animations, skull icons, purple gradients. The analyzer looks haunted; the generated portals are clean and professional.

What we learned

Spec-driven dev shines for interfaces

Our 8 analyzers all produce identical output because the spec defined the contract. Vibe coding is faster for exploration, but specs prevent drift.

Property-based testing finds hidden bugs

Hypothesis caught unicode edge cases, precision loss, and malformed inputs we'd never think to test manually.

Steering compounds over time

Every correction ("put that file here, not there") became a steering rule. By week 3, Kiro just knew our conventions.

Front-loading context pays off

Early conversations: long and detailed. Late conversations: one-liners.

"Add WSSE auth to the proxy" was enough - Kiro knew where auth logic lived, what patterns to follow, what interface to implement.

Hooks build trust in AI-generated code

When tests run on every save, you can be bolder. "Refactor this entire service" becomes low-risk when regressions get caught automatically.

What's next for Legacy UX Reviver

🔮 GraphQL support We handle REST and SOAP. GraphQL's introspection query gives us everything needed to generate a schema.

⚡ Real-time sync WebSocket support so multiple users see changes live.

🧩 Custom component injection Let power users drop in custom React components that receive resource data.

🔐 OAuth passthrough Support OAuth flows where users authenticate directly with the legacy system.

☁️ Hosted SaaS version Spin up portals without any deployment - just point at your API and go.

The dream: Companies stop suffering with terrible internal tools. They point Legacy UX Reviver at their API, generate a modern portal, and their employees actually enjoy using the software they're required to use every day.

💀👻 Built for Kiroween 2025 🎃⚡

Built With

Share this project:

Updates