UI Anatomy
A premium UX research showcase website and admin management system analyzing real-world product interfaces.
Our Role
Full-Stack Developer, UX Researcher, Database Administrator
Technologies & Frameworks
Next.js 16 (App Router)React 19SupabaseTailwindCSS 4TypeScript 5ReactMarkdownremark-gfmEmailJS
Project Overview
UI Anatomy is a premium UX research and analysis platform focused on dissecting the user experience and behavioral psychology of popular digital products (e.g., Duolingo, Spotify, Notion, Calm, and LinkedIn). The website functions as an educational library containing deep-dive case studies on user onboarding, engagement retention, monetization strategies, and ethical design patterns (including growth hacks and dark patterns).
The Challenge & Problem
- Standard product design case studies are often superficial, lack technical context, or are scattered across disparate static blogs. Content creators and researchers also lack an easy-to-use content management system (CMS) that gives them complete visual control over long-form markdown formatting, tables, and psychological analysis matrices without needing to redeploy code.
The Engineering Solution
- Developed a bespoke full-stack Next.js web application integrated directly with Supabase. For readers, the application delivers a premium, distraction-free typographic reading experience optimized for technical analysis. For administrators, it offers a secure, integrated workspace to write and manage case studies using standard Markdown, update database records dynamically, and manage subscribers—all styled cohesively within a modern, custom glassmorphic layout.
Key Architecture & Features
Interactive Case Study Explorer
- A lightning-fast, client-side searchable catalog with custom multi-tag filtering (e.g., Onboarding, Retention, Gamification, Ethics) to browse studies instantly.
Typographically Optimized Markdown Reader
- Detailed case study pages designed for readability (max-width of 70ch, 1.8 line-height) that compile Markdown documents into custom-styled HTML tables, lists, alerts, and inline code blocks.
Secure Admin Panel & Dashboard
- A protected space /admin displaying project metrics (total case studies, tag counts, and published rates) along with subscriber lists and CRUD tools.
Dynamic Content Management Form
- A rich, validated case study editor interface featuring Markdown preview support, tag tagging arrays, and slug generation.
Automated Email Subscription
- A footer newsletter form integrated directly with EmailJS to capture user interest and grow a community of UX practitioners.