• 

  Home-Work application Thumbnail

Demo Email: [email protected] Demo Password: password

Here's the story behind the Home-Work project

About the Project: Home-Work

Inspiration

The inspiration for Home-Work stemmed directly from the evolving landscape of work, particularly the rise of hybrid work models. Many professionals now split their time between home, the office, and even travel, leading to a common, yet often overlooked, challenge: managing their wardrobe across multiple physical locations.

It became clear that a simple, intuitive solution was needed to help individuals keep track of their clothing, organize it efficiently, and make daily dressing decisions less of a chore. The idea was to create a personal digital wardrobe that adapts to a modern, flexible lifestyle—ensuring users always know where their favorite shirt or essential work attire is, regardless of their current location.

What I Learned

Building Home-Work was a comprehensive learning experience, touching upon various aspects of modern web development:

• Supabase Mastery:
  I gained deep insights into Supabase, utilizing its PostgreSQL database, Row Level Security (RLS), Supabase Storage, and Supabase Auth. Learning to configure RLS and manage user IDs effectively was a significant milestone.

• Efficient Data Management with React Query:
  Implementing TanStack Query was pivotal for managing server state, caching, and minimizing redundant network requests.

• Robust Form Handling and Validation:
  React Hook Form combined with Zod provided type-safe and reliable form validation, ensuring data integrity at the client level.

• Guest Mode Implementation:
  Designing guest mode with local storage persistence, rate limiting, and a seamless upgrade path to a full account taught me about nuanced client-side data strategies.

• Comprehensive Data Validation and Migration:
  Creating systems for data import/export with validation, versioning, and migration helped ensure trust and data integrity.

• Modern UI/UX Development:
  Tailwind CSS and shadcn/ui enabled me to build a clean, responsive interface with a focus on accessibility and usability.

How It Was Built

Home-Work is a single-page application built with modern, component-based architecture.

Frontend

• React 18 and TypeScript for strong typing and modularity
  
• Vite for blazing-fast development
  
• Tailwind CSS + shadcn/ui for styling and UI components
  
• React Hook Form with Zod for robust forms
  
• TanStack Query (React Query) for data handling
  
• React Router for navigation
  
• Lucide React for icons

Backend & Database

• Supabase as the backend
  
  • PostgreSQL database
    
  • Row Level Security (RLS) for secure data isolation
    
  • Supabase Storage for image uploads
    
  • Supabase Auth for user authentication

Development Practices

• Modular file structure
  
• Custom React hooks
  
• ESLint + Prettier for code consistency

Challenges Faced

• Supabase RLS Complexity:
  Correctly configuring policies and casting auth.uid() for a TEXT-based user ID structure, especially after migration, was challenging.

• Guest Mode Data Management:
  Creating a GuestStorage utility that mimics API behavior entirely on localStorage while implementing fair rate limits was intricate.

• Image Upload and Display:
  Handling asynchronous uploads, unique file naming, display logic, and placeholder handling required precise coordination.

• Comprehensive Data Validation:
  Validating imported guest data—checking for schema issues, orphaned data, or duplicates—needed a detailed validation/reporting system.

• User Experience for Core Features:
  Designing intuitive flows for category/location management and implementing bulk actions and filters took multiple refinements.

Despite these challenges, each one provided valuable learning opportunities, contributing to a more robust and user-friendly application.

Built With

• a11y
• bolt.new
• react
• shadcn
• supabase
• typescript