Technical Exploration
A technical exploration into real-time data processing and state management using Vanilla JavaScript.
Vanilla JS
Product Design
UI Engineering
Unitfy is a logic-driven utility designed for instantaneous data transformation. Built to bridge the gap between static UI design and functional frontend execution, the tool enables real-time calculations across multiple measurement systems with zero latency.
UI/UX Evolution: Beyond Aesthetics
While the core logic started in the Scrimba curriculum, I pushed the project toward a full UX refactor. The original design presented a significant cognitive load by converting all metrics simultaneously without user selection. Unitfy solves this by introducing a category-based navigation (Weight, Volume, Distance), reducing decision fatigue and placing the user back in control
Centralized Logic & DOM manipulation
What appears to be a simple interaction clicking a tab to update unit text and input values revealed significant complexity from an engineering perspective. Without the crutch of a framework, I had to architect a centralized Vanilla JavaScript engine to manage application state and handle multiple mathematical conversion formulas.
The primary technical hurdle was implementing reliable DOM manipulation. Every input event triggers a precisely calculated sequence: capturing the raw number, applying the correct metric conversion logic, and instantaneously reflecting the new state in the UI without latency.
Throughout this process, I used AI not as a shortcut for code, but as a technical mentor. Instead of requesting final solutions, I leveraged AI to debug logic bottlenecks and explore cleaner architectural patterns. This collaborative approach allowed me to focus deeply on the 'why' behind the code, ensuring I fundamentally understood every line before implementation.
A New Perspective on Digital Craft
Building Unitfy from the ground up completely shifted my approach to product design. Translating a static layout into functional code taught me the actual technical weight behind every visual decision. I realized that a simple user interaction something we often take for granted as a mere state change in a prototype is actually a complex orchestration of event listeners, underlying logic, and real-time DOM updates.
This ongoing journey into frontend development doesn't pull me away from design; it gives me a critical new skill: technical empathy. By understanding the how behind the implementation, I am now equipped to create solutions that are not only user-centric and aesthetically pleasing but highly feasible for engineering teams to build.
I am a firm believer in continuous learning. As I keep experimenting in The Lab and expanding my technical toolkit, my ultimate goal is to bridge the communication gap between design and development. I want to move past simply asking "what should this look like?" to collaboratively solving "how can we build this better together?" treating code not as a barrier, but as just another medium to build exceptional human experiences.
Logic-Driven Design
Successfully translated a static UI concept into a functional JavaScript utility, demonstrating the ability to architect interfaces that maintain visual integrity while handling real-time data execution.
User-Centric UX Refinement
Re-engineered the conversion flow to reduce cognitive load. By introducing category-based selection, I moved away from a confusing linear layout to a system that respects the user's mental model and simplifies decision-making.