Dual View

Next.jsTypeScriptFramer MotionShadcnTailwind CSSVercel

Project Overview

• Delivered a side-by-side analysis tool empowering developers to contrast website UI layouts seamlessly. • Automated performance heuristics scoring sites directly on responsiveness and accessibility constraints. • Packaged it in a sleek, developer-centric interface for everyday rapid use.

System Architecture

• Designed entirely on the Next.js runtime aiming for maximum optimization and edge speed. • Utilized intelligent iframing and scaling calculations via native web APIs. • Framer Motion applied for fluid split-screen divider dragging and UI scaling.

Architecture Diagrams

Architecture Diagram

Key Engineering Decisions

• Kept the entire system strictly client-side for rapid feedback without costly server trips. • Avoided heavy external UI frameworks by opting purely for Shadcn and Tailwind to keep the core script extremely lightweight. • Resolved massive cross-origin (CORS) complexity loops through specific edge proxies when analyzing external live links.