A modern web application that allows users to browse plants from a Shopify store and visualize how they would look in their actual rooms using Google's Gemini Flash 2.5 (Nano Banana) AI image generation.

• 🌿 Plant Catalog: Browse and filter plants from Shopify Storefront API
• 🔍 Advanced Filtering: Filter by price, light requirements, size, care level, and more
• 🛒 Multi-Selection: Select up to 10 plants to visualize together
• 📸 Room Upload: Upload a photo of your actual room
• 🎨 AI Visualization: Generate realistic visualizations using Gemini Flash 2.5
• ✨ Iterative Refinement: Refine your visualization with natural language prompts
• 💰 Price Summary: See total cost and care requirements for your selection

Built following the PLANT principles:

• Performant by Default: Vite, React Query, React Hook Form
• Logic in Hooks: All business logic encapsulated in custom hooks
• Atomic & Composable: shadcn/ui components with Tailwind CSS
• Never Trust, Always Type: TypeScript with Zod schemas
• Thin Client, Thick Server: React Query for server state management

1. Clone the repository

2. Install dependencies:

   npm install

3. Create a .env file with your API keys:

   VITE_SHOPIFY_STOREFRONT_API_TOKEN=your_shopify_token_here
   VITE_SHOPIFY_STORE_DOMAIN=your_shopify_domain_here
   VITE_GEMINI_API_KEY=your_gemini_api_key_here

4. Start the development server:

   npm run dev

1. Browse Plants: Visit the homepage to see available plants
2. Filter Products: Use the filter sidebar to narrow down your selection
3. Select Plants: Click on plants to add them to your selection (max 10)
4. Upload Room: Navigate to the visualize page and upload a room photo
5. Generate: Configure your preferences and generate the visualization
6. Refine: Use natural language to adjust the visualization

• Shopify Storefront API: Requires a private storefront access token
• Google Gemini API: Requires access to Gemini Flash 2.5 model

src/
├── components/          # UI components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions and API clients
├── types/              # TypeScript types and Zod schemas
└── routes/             # TanStack Router pages

• All data fetching is handled through React Query
• Form state is managed with React Hook Form
• Type safety is enforced with Zod schemas
• Components are kept pure and logic-free
• All business logic lives in custom hooks