Building PlantDex: An AI-Assisted MVP Journey with Vue 3, Supabase & Pinia

From Seed to Seedling – An AI-First MVP Story

The journey of creating PlantDex, our intuitive plant identification and cataloging application, has been an enjoyable exploration into the power of an "AI-First" development philosophy. From its initial conception to a feature-rich Minimum Viable Product (MVP), nearly every line of code was generated by my AI collaborator (Google Gemini, guided by a comprehensive System Instruction), transforming my role into that of an architect, prompter, and meticulous validator. This post chronicles that journey, highlighting the core technologies – Vue 3, Supabase, and Pinia – and the AI-assisted process that brought PlantDex to life.

The vision for PlantDex was clear: a user-friendly platform for plant enthusiasts to catalog their collections, identify new specimens with AI assistance, and manage their plant data seamlessly in the cloud. Achieving this required a modern tech stack and a development approach that could deliver rapid iteration and robust functionality.

The Tech Stack: Laying Fertile Ground for Growth

The foundation of PlantDex was built upon a carefully selected set of modern technologies, all implemented by our AI development assistant:

• Vue 3 (Composition API & TypeScript): For a reactive, performant, and type-safe frontend. The Composition API, especially with script setup, allowed for clean and modular component logic.
• Pinia: As Vue's official state management library, Pinia provided a simple yet powerful way to manage global application state, particularly for user authentication (authStore) and the plant collection (plantStore).
• Supabase (BaaS): This was the cornerstone of our backend, providing a complete suite of services:
  • Authentication: Secure user sign-up, login, password recovery, and session management.
  • PostgreSQL Database: For storing all user and plant data, protected by Row Level Security (RLS).
  • Storage: For securely storing user-uploaded plant photos, again with RLS policies.
  • Edge Functions (Deno): Utilized for secure, server-side operations like data import.
• Vite: For a lightning-fast development server and optimized builds.
• Tailwind CSS: For rapid, utility-first UI development (and our recent light-theme overhaul!).
• Google Gemini API: For the core AI features – plant identification, information retrieval, and tag suggestions.

The Development Journey: An AI-Orchestrated Symphony

Our development process was meticulously planned and executed in phases, with the AI as the primary implementer, guided by detailed prompts and our overarching System Instruction.

Phase 1: Core Backend & Authentication with Supabase & Pinia

The first critical step was establishing user accounts and data persistence. This involved:

1. Setting up the Supabase Project: Defining the plants table schema, including columns for all plant attributes (name, notes, photos JSONB, tags array, etc.) and setting up RLS policies to ensure users could only access their own data.
2. Pinia Store for Authentication (authStore): The AI generated a comprehensive store to handle user registration, login, logout, password reset, and listen to Supabase's onAuthStateChange events. This centralized all auth logic.
3. Auth Pages & Route Guards: Vue components for Login, Signup, Forgot Password, and Update Password were created, along with Vue Router guards to protect authenticated routes.

Phase 2: Plant Data Management – The plantStore & CRUD

With users able to sign in, the next step was managing their plant data:

1. Supabase Data Access Layer: A modular set of composables (under src/composables/supabase/plant-data/) was created by the AI to handle direct CRUD (Create, Read, Update, Delete) operations with the Supabase plants table. This layer also managed transformations between frontend camelCase and database snake_case.
2. Pinia Store for Plants (plantStore): This store became the reactive heart of the plant catalog, managing the array of user's plants, loading states, error handling, and search functionality. Its actions call the Supabase data access layer.
3. Core Pages (PlantListPage, AddPlantPage): The AI developed these pages to list plants from the plantStore and add new ones, ensuring data was saved correctly to Supabase.

Phase 3: Feature Enrichment – Photos, AI, and Details

This phase brought PlantDex to life with its core value propositions:

• Supabase Storage for Photos: Integration for uploading plant photos to Supabase Storage, associating them with plant records, and displaying them. RLS policies were crucial here too. The useSupabaseStorage.ts composable centralized storage interactions.
• PlantDetailPage.vue & Modular Composables: This complex page was architected by the AI into a main orchestrator (usePlantDetail.ts) that leverages sub-composables for loading data (usePlantLoader.ts), saving updates (usePlantSaver.ts), managing photos (usePlantPhotoManagement.ts), and handling AI features (usePlantAIFeatures.ts). UI interactions were further managed by page-specific composables (usePlantDetailForms.ts, etc.).
• Google Gemini Integration: Composables like usePlantIdentification.ts, usePlantInformation.ts, and usePlantTagging.ts were created to interact with the Gemini API for AI-powered features, including handling image data (fetching from Supabase Storage if needed).
• Bulk Upload & Data Management: Features for bulk uploading plants (with auto-identification) and exporting/importing user data (the latter using a Supabase Edge Function for security and server-side validation) were added.

Phase 4: UI Refinement & Theming

Most recently, we undertook a significant theming effort (as documented in our preceding interactions) to transition PlantDex from a dark theme to the current light, plant-inspired aesthetic. This involved systematically updating global styles, Tailwind configuration, and nearly every component in the application, again with the AI generating the necessary class changes and style adjustments.

Key Learnings & The Power of AI-First Development

• The System Instruction is Paramount: Our detailed System Instruction, defining the AI's role, constraints, and coding standards, was the bedrock of this project's success. It ensured consistency and high-quality output from the AI.
• Supabase is a Powerhouse BaaS: Its comprehensive suite of services, ease of use, and excellent JavaScript client library made it an ideal choice for rapidly building a full-stack application. RLS is a critical security feature.
• Pinia for Clean State Management: Pinia made managing global and domain-specific state straightforward and type-safe.
• Modularity Scales, Even with AI: Breaking down the application into small, focused components and composables, even when an AI is writing the code, is essential for maintainability and reasoning about the system. The AI itself often suggested or naturally produced modular structures when guided by good prompting.
• Human as Orchestrator: My role shifted from line-by-line coding to defining requirements, architecting flows, prompting with precision, and validating the AI's output. This is a highly leveraged and efficient way to build.
• Iterative Refinement is Still Key: While the AI often got things right on the first try, iterative prompting, providing feedback, and asking for revisions were crucial for complex features or when initial outputs needed adjustment.

The "PlantDex MVP" – A Healthy Seedling

The result of this AI-assisted journey is the PlantDex MVP you see today (as in the header image of this post). It's a testament to how quickly a robust, feature-rich application can be developed when leveraging modern tools and a well-guided AI collaborator. While there are always more features to add and refinements to make (like enhanced import strategies or more advanced filtering), PlantDex now stands as a solid, functional, and aesthetically pleasing application, ready for users and further growth.

This project has solidified my conviction: the future of much software development will involve a deep, synergistic partnership between human architects and highly capable AI implementers. The key is learning how to "prompt" and "guide" effectively.