01. The Problem
In real-world applications, especially when working across multiple APIs, data structures are often inconsistent, deeply nested, and difficult to work with. Before building UI components, developers must manually clean, reshape, and align this data, a repetitive and error-prone process. This slows down development and introduces potential inconsistencies across projects. The goal was to eliminate this bottleneck by automating data transformation and standardising outputs.
02. Approach
The core priority was building a robust, recursive data pipeline that could handle arbitrarily complex JSON structures — merging multiple payloads, standardising naming conventions, and surfacing every change it made so developers could trust the output.
To make the tool feel immediate, every transformation was designed to run entirely in the browser with zero server dependency. Output updates on each keystroke, keeping the feedback loop tight and the experience closer to a native IDE than a web form.
Rather than asking developers to write TypeScript interfaces manually, the tool introspects the normalised data at runtime and generates a fully accurate type definition — handling nested objects, arrays, and nullable fields automatically.
The generated TypeScript interface is injected directly into a React Query hook scaffold, producing a complete, ready-to-use data layer. The developer copies one file and ships — no boilerplate, no manual wiring.
Every key renamed, every duplicate resolved, and every structural decision made by the engine is surfaced in the UI. A live statistics bar and expandable diff log replace the silent black box with a fully observable process developers can verify and trust.
Demo Video
03. Solution
The API Data Normaliser compresses what used to be hours of manual groundwork into seconds. It takes raw, inconsistent JSON from multiple sources and returns a clean, typed, implementation-ready data layer — no boilerplate, no context switching, no guesswork.
Automatically aligns mismatched API structures — regardless of source or naming convention — into a single, consistent shape the frontend can rely on.
Generates accurate TypeScript interfaces directly from live data, eliminating the need to hand-author types against documentation that may already be stale.
Delivers a fully typed React Query hook with the inferred interface already injected, moving the developer from exploration to implementation without touching boilerplate.
Surfaces every transformation decision in real time — renamed keys, resolved duplicates, structural changes — so developers verify the output with confidence rather than on blind trust.