Villacation - Reusable Component Library

Overview

A frontend for a vacation rental platform where the main goal was a reusable component library rather than one-off pages. I defined a token-based design system on Tailwind CSS v4 (neutral, primary, secondary, and tertiary color scales, semantic badge colors, and a typography scale) and built variant-driven primitives on shadcn/ui and Radix with class-variance-authority, such as a Button with 10 variants, 7 sizes, and a pill shape, and a Badge with 9 color variants. On top of them sit form fields with built-in labels and error states, and domain components for properties, rooms, products, articles, and profile sections, split into presentational components and client-side containers. Living documentation pages for buttons, badges, and typography keep the system visible, and the same components compose the home, rooms, payment, and profile pages, including a React Hook Form payment flow and a wishlist backed by a favorites provider.

What I Built

• Defined a token-based design system on Tailwind CSS v4 with color scales, semantic tokens, and a typography scale
• Built variant-driven primitives with class-variance-authority, including a Button with 10 variants, 7 sizes, and a pill shape, and a Badge with 9 color variants
• Created reusable form fields (input, select, radio) with built-in labels and error states, wired to React Hook Form
• Composed domain components for properties, rooms, products, articles, and profile sections, separated into presentational components and client containers
• Documented the system with living pages for buttons, badges, and typography
• Reused the same components across the home, rooms, payment, and profile pages, lazy-loading the room filter with a skeleton fallback

Tech Stack