Back
Katherine Peng
November 2025
Data to View Tool — My First End-to-End Build 🚀
Breaking My Own Boundary
For years, I’ve designed complex systems — but always stopped at the “handoff” stage. This time, I wanted to go beyond mockups and see how far I could take an idea on my own.
So I set myself a challenge: design, build, and launch a live tool — solo — in one week.
The Spark
If you’ve ever opened a JSON file, you know the pain — walls of nested data that make zero sense unless you’re an engineer.
As designers, we constantly deal with APIs, yet we rarely see what we’re designing for. Every project requires multiple dev syncs just to understand what data powers which UI element.
So I decided to fix that.
The Idea
A simple but surprisingly powerful tool:
Drop in a JSON file → Instantly visualise it as a clean, structured table or card.
No setup, no code, no developer needed.
Perfect for designers, PMs, or anyone who wants to understand data quickly without diving into code.
The Build
Design: Started in Figma — minimal, clean, and focused purely on usability.
Code: Used Cursor, my new favourite AI-powered coding partner. It helped me translate design components into React in hours, not days.
Launch: Deployed to Vercel, fully live, fully functional.
From blank canvas to public link — one week.
The Outcome
This tiny tool solves a real problem:
It saves hours of back-and-forth between design and dev, speeds up data understanding, and brings non-technical teammates into the conversation.
It’s not just a JSON viewer — it’s a bridge between creativity and logic.
👩🏻💻 Try It Yourself
I’d love to hear your thoughts, ideas, or wild use cases — this is my first live mini product, and I’m just getting started.
Why It Matters to me
For me, this marks a shift:
I’m no longer just designing products — I’m building them.
With AI tools like Cursor, the gap between imagination and execution is shrinking fast.
And this is just the beginning. 😉
