MindGarden

Plant thoughts. Get art. Watch them grow.

Comment

Project description — Features & functionality

MindGarden is an AI-powered reflective journal that turns your thoughts into a living visual garden. Here’s what it does:

  • Plant a thought: You type whatever is on your mind (no form fields—just free text). The app sends it to Gemini for analysis and generation.
  • AI reflection & imagery: Gemini produces a short poetic reflection, assigns a category (idea, todo, feeling, goal, memory), emotion and topic tags, and generates a unique botanical illustration for that thought. Each thought is mapped to a plant “species” (e.g. goal → Sunflower, feeling → Cherry Blossom) so the art stays thematically consistent.
  • Visual garden: Thoughts appear as plants on floating islands in a Konva-based canvas with zoom and pan. Multiple islands appear as your garden grows (12 plant slots per island). You can switch to a list view where thoughts are grouped by category.
  • Watering (updates): You can add updates to any thought over time. Gemini responds with an acknowledgment and can advance the thought through four growth stages (seed → sprout → bloom → mature). When the stage changes, a new AI-generated image is created so the plant “grows” visually.
  • Next steps: For each thought, Gemini can suggest an actionable next step—something to do, something to clarify, or something to reflect on—shown in the reflection modal.
  • Mood-based music: Gemini suggests a song that fits the thought’s mood. The app looks up the track via the Spotify API and shows an embedded player plus the AI’s reasoning in the reflection view. Music is optional; thoughts save even if Spotify isn’t configured.
  • Storage: Data is stored locally (IndexedDB) by default. Optional Supabase configuration enables cloud sync across devices. Settings (including Supabase URL/key) can be changed in the app.

Gemini tools we used

We used the Google Gemini API via the @google/genai SDK with two models:

  1. gemini-3-flash-preview (text / multimodal)

    • Thought analysis: Structured output for emotion, intensity, category, topic, reflection text, next step (text + type + confidence), and song suggestion (search query + reasoning).
    • Watering (updates): Analysis of the user’s update in context of the original thought and history; returns acknowledgment, new growth stage, and optional next step.
    • All prompts and response shapes are defined in our geminiService so we get consistent JSON for the UI.

  2. gemini-3-pro-image-preview (image generation)

    • Botanical art: We generate a unique plant image when a thought is first planted (seed stage) and again when it advances to a new stage (sprout, bloom, mature). Prompts use category-specific species and stage descriptions (e.g. Sunflower for goals, Cherry Blossom for feelings) and emotional tone.
    • Generated images are optionally passed through client-side background removal (@imgly/background-removal) so plants render with transparency on the canvas.

We did not use a separate “Imagen” product name in code; image generation is done via the Gemini API with gemini-3-pro-image-preview.

Built with

Languages & frameworks: JavaScript/TypeScript, React 19, Vite
UI & styling: TailwindCSS, Framer Motion, Lucide React, Konva / react-konva
AI: Google Gemini API (@google/genai) — gemini-3-flash-preview (text, structured output, song suggestions), gemini-3-pro-image-preview (botanical image generation)
APIs & services: Spotify Web API (mood-based music recommendations)
Databases & storage: Supabase (PostgreSQL, optional cloud sync), IndexedDB via idb-keyval (local fallback)
Other: react-hot-toast, @imgly/background-removal (optional transparency), Google Fonts (Playfair Display, Outfit)

Inspiration

We wanted journaling to feel less like a graveyard of notes and more like a place where ideas actually grow. Most apps treat thoughts as static entries—you write, you forget. We were inspired by the metaphor of a garden: what if every thought you planted could become something visible, something that changes as you return to it? We combined that with Gemini’s ability to understand nuance and generate images, and the idea for MindGarden was born—a journal where your thoughts become living botanical art and evolve from seed to maturity as you reflect.

What it does

MindGarden is an AI-powered reflective journal that turns your thoughts into a visual garden. You plant a thought by typing it (category is inferred by Gemini—idea, goal, feeling, memory, or todo). Gemini 3 Flash analyzes the text and returns a poetic reflection, emotion and topic tags, optional next steps, and a song suggestion (query + reasoning). A Gemini image model generates a unique botanical illustration, which is then optionally processed for transparency. That thought appears as a plant on a Konva canvas of floating islands (zoom and pan supported). You water any thought by adding updates; Gemini responds and can advance it through four growth stages (seed → sprout → bloom → mature), with new AI-generated botanical art when the stage changes. Next steps (do / clarify / reflect) and mood-based music (Spotify embed + AI reasoning) are shown in the reflection modal. You can switch between garden view (canvas) and list view (thoughts grouped by category). Data is stored locally (IndexedDB) by default or in the cloud with Supabase.

How we built it

We built the frontend with React 19, TypeScript, and Vite, styled with TailwindCSS and Framer Motion. The garden is a Konva canvas: island backgrounds and plant sprites are drawn in world space, with a custom camera hook for zoom (wheel) and pan (drag). Slot layout and multi-island expansion are handled in useIslandLayout (12 slots per island; new islands when full). For AI we use the Google Gemini API via @google/genai: gemini-3-flash-preview for all text (structured output for analysis, reflection, next steps, and song suggestion), and gemini-3-pro-image-preview for botanical image generation when planting and when a thought advances in stage. Our geminiService defines the prompts and response schemas so we get consistent JSON. Generated images are optionally run through @imgly/background-removal for transparency. When Gemini returns a song suggestion, we call the Spotify Web API (client credentials, token cache) to resolve the track and attach it to the thought; the MusicPlayer component shows the embed and reasoning. Storage is hybrid (Supabase or IndexedDB via storageService). The app is responsive and works on desktop and mobile.

Challenges we ran into

  • Orchestrating multiple Gemini calls (analysis + image generation) while keeping the planting flow fast and handling failures gracefully—we had to design the flow so that if image generation failed, the thought still saved with a fallback visual.
  • Structuring Gemini outputs so we could reliably get reflections, emotions, topics, next steps, and optional song suggestions in one pass—we iterated on prompts and response schemas to keep the UX consistent.
  • Placement and layout for plants across multiple islands with a fixed slot system, including reusing slots when thoughts are deleted so the garden doesn’t have awkward gaps.
  • Integrating Spotify without breaking the core flow: we made music optional so thoughts save even when Spotify isn’t configured or a track isn’t found, and we had to handle token refresh and API errors cleanly.

Accomplishments that we're proud of

  • A complete loop: plant → see as art → water → grow, with real stage progression and new AI art when thoughts advance.
  • Dual use of Gemini: we use gemini-3-flash-preview for rich text (reflections, updates, next steps, song suggestions) and gemini-3-pro-image-preview for generative botanical imagery, so each thought feels unique and personal.
  • A product that feels like one concept: the garden metaphor is consistent from UI copy to growth stages to “watering,” so it doesn’t feel like a generic journal with AI bolted on.
  • Privacy and flexibility: local-first storage with optional Supabase sync so users can choose between offline-only and cross-device.
  • Music layer: mood-based song recommendations driven by Gemini and played via Spotify, adding an extra dimension to reflection without cluttering the core experience.

What we learned

  • Metaphors matter: framing journaling as “planting” and “watering” made the product easier to explain and made users more likely to return and update thoughts.
  • Structured AI outputs are worth the upfront prompt and schema work—they made the rest of the app (stages, tags, next steps, music) much simpler to build.
  • Graceful degradation (fallback images, optional music, local vs. cloud storage) kept the app usable under API limits, network issues, or missing config.
  • Using two Gemini models together (Flash for text and structured output, Pro Image for botanical art) opened a lot of design space; combining analysis with generative art in a single flow felt like the right fit for a reflective journal.

What's next for MindGarden

  • User Authentication: allow users to sign in and create an account using Google Authentication easily.
  • Mobile App Compatibility: make our website into an app which allows your MindGarden to be accessed from anywhere using your smartphone.
  • Smarter growth logic: refine when thoughts advance (e.g. based on update depth, number of waterings, or user intent) and explore more varied progression.
  • Richer garden interactions: zoom/pan, custom island themes, and maybe seasonal or time-of-day visual tweaks.
  • Export and sharing: export a thought (or the whole garden) as an image or PDF, and optional shareable links for a single thought with permission controls.
  • Reminders and nudges: optional “water your garden” reminders or surfacing thoughts that haven’t been updated in a while.
  • More personalization: user preferences for reflection tone (e.g. more poetic vs. more direct) and for music (genre or mood filters).
  • Community or templates: shared “seed packs” (prompt bundles for goals, gratitude, etc.) or read-only public gardens for inspiration.

Built With

Share this project:

Updates