FlatFam Build Story

Inspiration

• Poor communication decreasing quality of life living in flats
• Use a calm palette (creams, sage, rounded shells) to lower friction so housekeeping feels light.

What We Learned

• Next.js + Tailwind enable rapid iteration without sacrificing consistency.
• Designing mobile-first simplifies component APIs and reduces layout edge cases.
• Clear auth variants (header vs hero) cut friction at the top of the funnel.

How We Built It

• Stack: Next.js, Tailwind, Supabase auth, reusable React components with variant props.
• Pages: Landing with a live “Working Model” preview wired to the /model simulator; themed auth flows; model tabs for chores, inventory, finance, and events.
• Patterns: Shared tokens for radii, borders, shadows, and typography; data-driven cards mapping highlights/events for flexible content.

Challenges

• Balancing warmth with clarity—gradients and shadows had to stay readable.
• Removing unbuilt features (matching/compatibility) without breaking layout or narrative.
• Scaling enlarged brand assets cleanly across breakpoints.

A Bit of Math

Design “breathing room” as a simple ratio: [ \text{BreathingRoom} = \frac{\text{white space area}}{\text{content area}} ] Keeping this high helps the interface feel calm even as features grow.

Built With

• next.js
• sql
• supabase
• tailwind
• typescript