DEV Community: Prabakaran

Plant Care AI - Snap, Identify, Thrive.

Prabakaran — Tue, 06 Oct 2026 16:00:27 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

PlantCare AI — Turn Screen Time into Soil Time 🌿

What I Built

Modern life keeps us tethered to glowing rectangles. We spend hours typing into terminal prompts, doom-scrolling social feeds, and sitting under sterile fluorescent lighting. PlantCare AI was designed with a simple philosophy: use intelligent technology as a catalyst to get people off their screens and into the natural world.

PlantCare AI is an intelligent botanical companion that empowers anyone—from novice apartment dwellers to seasoned urban gardeners—to care for living green plants, step into their gardens, touch actual soil, and build a flourishing indoor or outdoor plant sanctuary.

How It Gets People "Touching Grass"

Physical Sensory Engagement: Rather than an abstract digital tracker, PlantCare AI guides users through physical, tactile plant care routines—testing soil moisture with their fingertips 2 inches deep, inspecting the undersides of leaves, pruning dead foliage, wiping dust off foliage, and feeling root ball texture.
Real-World Camera Exploration: Users step away from their desk, grab their phone, walk to balconies, windowsills, gardens, or neighborhood parks, and point their camera at real botanical specimens for instant species identification.
Plant Doctor Symptom Diagnostics: When a plant shows yellowing leaves, drooping stems, or pests, users physically inspect the plant's stems and root ball, log observed physical symptoms, and perform concrete rescue protocols (aerating soil, bottom-watering, pruning rotted roots).
Pet & Household Safety: Gives pet owners actionable knowledge to keep dogs and cats safe while bringing real nature indoors.

Demo

Experience the live application here:

GitHub: PlantCare AI on Google AI Studio Cloud Run

Key Features in the Demo

Interactive Plant Sanctuary (Dashboard): View your physical plants with custom nicknames (Monty, Grace, Spike), current room locations, health indicators (Thriving, Needs Care, In Treatment), and dynamic moisture meters.
Direct Device Camera AI Scanner: Point your smartphone or laptop webcam directly at any plant to identify botanical species, confidence scores, care difficulty, and native habitats.
Plant Profile & Care Guides: Foot-candle lighting advice, soak-and-dry watering protocols, temperature/humidity tolerance, and ASPCA pet safety ratings.
Plant Doctor Diagnostic Wizard: Select leaf or root symptoms (spider mites, yellowing, fungal mold, root rot) to receive emergency triage and multi-week rehabilitation regimens.
Botanical Encyclopedia & Care Hub: In-depth horticultural guides on winter dormancy, lighting orientation, and natural pest remedies.

Code

The application is built with a modern TypeScript, React, Vite, and Express stack:

Source Code Entry Points:
- src/App.tsx: Central state hub, schedule calculations, and responsive layout.
- src/components/ScanIdentify.tsx: Direct camera capture (getUserMedia) and AI vision analysis.
- src/components/DiagnosticTool.tsx: Interactive symptom checker and pathology solver.
- src/components/PlantProfileModal.tsx: Comprehensive botanical care cards and care history timeline.
- src/components/Dashboard.tsx: Plant grid with dynamic watering reminders and room filters.
- server.ts: Server-side proxy handling botanical vision and diagnostic prompts via @google/genai.

How I Built It

PlantCare AI combines modern web standards, direct camera hardware access, and generative AI reasoning into a cohesive, responsive experience:

AI Vision & Botanical Intelligence:
- Integrated the modern @google/genai TypeScript SDK using gemini-3.8-flash on the server backend to analyze leaf margins, stem structures, and pathology symptoms from image uploads and camera frames.
- Structured JSON schema validation (responseSchema with enums and strongly-typed care properties) ensures consistent, deterministic data for watering days, light tolerances, and pet toxicity.
- Built-in offline fallback engine containing rich botanical data ensures that even without an active network connection or API quota, users can always identify species and diagnose plant health issues.
Hardware Camera Integration:
- Implemented real-time HTML5 video streaming (navigator.mediaDevices.getUserMedia) with environment-facing camera support, targeting reticles, scanline animations, and instantaneous canvas snapshot capture.
Dynamic Care Math Engine:
- Developed a calendar-aware schedule calculator (src/utils/careCalculations.ts) that calculates days elapsed since last soaking, flags overdue cycles, and renders smooth visual countdown meters.
Lush Botanical Design System:
- Styled with Tailwind CSS using a deep emerald, sage, and teal glassmorphic theme.
- Clean typographic pairing: Fraunces editorial serif for botanical headers paired with Plus Jakarta Sans for clean, accessible mobile UI controls.
- Zero-pill metadata design discipline and touch targets optimized for mobile browser ergonomics.

Why Does Open Innovation Matter?

Open innovation and open-source ecosystems are the foundation of accessible environmental and botanical education:

Democratizing Botanical Knowledge: Horticultural expertise has historically been locked in expensive textbooks or proprietary agricultural tools. Open AI models and open-source frameworks make advanced plant care, pest diagnosis, and sustainable cultivation accessible to anyone with a smartphone and a potted plant.
Local & Privacy-Preserving Care: Plant owners should not need to send their private photos to walled gardens or pay recurring subscriptions just to know if a houseplant is poisonous to their puppy. Open development allows for offline-capable, transparent care engines.
Collective Stewardship of Living Ecosystems: Open-source tooling allows communities of gardeners, urban farmers, and community organizers to share native species datasets, regional frost dates, and eco-friendly organic remedies without platform gatekeeping.

My Agent Session

Built collaboratively using Google AI Studio Build agent workflows.
Architecture: Express full-stack server mounting Vite middlewares, @google/genai SDK integration, and responsive mobile-first React frontend.

Prize Categories

Touch Grass Challenge (Week 1): Directly inspires users to step away from digital screens, physically check soil moisture, step outdoors, and cultivate living green plants.
Most Impactful Use of AI: Applying computer vision and multimodal reasoning to practical everyday living—protecting pets from plant toxicity and preventing houseplant mortality.

Study Craft - A clean and simple study builder app designed to organize, focus, and test.

Prabakaran — Fri, 02 Oct 2026 15:56:26 +0000

Hacktoberfest Weekend Challenge: Build for a Friend Submission 🤝

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

🧳 What I Built

I built StudyCraft, a clean, distraction-free study companion designed for my friend Maya, a biology student who was struggling with study burnout, endless exam anxiety, and the bloat of modern study tools.

Maya was tired of existing flashcard and quiz apps that hit her with paywalls after 20 cards, bombard her with unsolicited ads in the middle of review sessions, and require messy account setups. Most importantly, she was constantly tab-switching between an external Pomodoro timer website, a flashcard site, and her course notes, breaking her deep study flow.

StudyCraft solves this by unifying the entire study routine into one calm, local-first workspace:

Custom Study Set Builder: Create subject decks with terms, definitions, and hints in seconds. Includes a Quick Batch Import feature that lets Maya copy-paste 30 lecture terms at once using simple delimiters (Term | Definition), saving hours of manual data entry.
Companion Pomodoro Clock: A customizable focus timer (25/5/15 intervals or custom minute blocks) with a subtle radial countdown and synthesized Web Audio chime alerts. Crucially, the timer remains pinned in the top navigation as a companion ticker, allowing Maya to review flashcards or take quizzes without pausing her Pomodoro session.
Tactile 3D Flashcards: Realistic flip cards with spaced self-assessment ratings (Again, Hard, Good, Easy), full keyboard navigation (Space to flip, 1-4 to rate), card starring, and offline text-to-speech pronunciation.
Self-Testing Practice Quiz: Students can test themselves with custom multiple-choice questions or click Auto-Generate Quiz from Cards, which instantly generates 4-choice tests with plausible distractors from their own deck, providing explanations for every answer.
Zero Login Friction & 100% Privacy: All cards, streaks, mastery ratings, and high scores are persisted locally in the browser, with instant one-click JSON backup and restore.

🌐 Demo

🚀 Live Demo: StudyCraft
💻 Source Code: StudyCraft

Key Workflows

Explore Curated Starter Decks: Jump straight into pre-built decks (Cell Biology & Organelles, World History & Revolutions, or Computer Science Essentials).
Build or Import in Seconds: Click New Study Set, type terms individually or open Quick Batch Import to paste lecture notes, and hit Auto-Generate Quiz from Cards.
Launch Pomodoro Flow: Start the 25-minute focus clock. Switch tabs to Flashcards or Practice Quiz—the timer keeps ticking quietly in the navbar with instant pause/play controls.
Master Active Recall: Review cards with smooth 3D flip animation, rate your confidence, and celebrate deck completion with confetti and a targeted breakdown of cards that need practice.

Code

The project is built as a modern, high-performance React + TypeScript SPA styled with Tailwind CSS:

Frontend Framework: React 19 + TypeScript
Styling & Design System: Tailwind CSS v4 with bespoke typography pairing (Fraunces serif headings, Plus Jakarta Sans body, and JetBrains Mono tabular numerals)
Audio Synthesizer: Pure Web Audio API oscillator synthesis for pleasant, offline-ready bell chimes and feedback (no bulky external MP3 dependencies)
Visuals & Delight: 3D CSS perspective card flips and canvas-confetti celebrations upon quiz completion and deck mastery

You can view the full repository files in the project workspace:

/src/App.tsx — Main application controller and background Pomodoro ticker
/src/components/PomodoroTimer.tsx — Radial progress countdown, presets, and fullscreen focus mode
/src/components/FlashcardStudy.tsx — 3D interactive flashcard engine with keyboard shortcuts and TTS
/src/components/QuizView.tsx — Dynamic multiple-choice exam interface with instant explanations
/src/components/StudySetBuilder.tsx — Deck manager with batch paste parser and auto-distractor generator
/src/components/Dashboard.tsx — Study streak counter, deck library, and metrics overview
/src/utils/audio.ts — Web Audio API harmonic chime synthesizer
/src/utils/storage.ts — LocalStorage state synchronization and import/export utilities

How I Built It

To develop StudyCraft rapidly and maintain an uncompromising standard of code quality and aesthetic polish, I built this application using the Google AI Studio Agent harness with Gemini 2.5/Gemini Pro models.

The agent session followed an execute-first, design-conscious methodology:

Domain-Native Architecture: Instead of defaulting to generic AI card templates or purple gradients, we followed strict UI/UX constitutions: warm stone background palettes, unboxed metadata separated by typographic dots (·), single-elevation cards, and accessible touch targets.
Automated Distractor Synthesis Engine: Built a pure TypeScript algorithmic generator in src/utils/storage.ts that dynamically transforms any flashcard set into balanced multiple-choice questions with randomized distractors from neighboring concepts.
Resilient Offline Audio: Rather than relying on third-party audio CDNs that fail in restricted school or university Wi-Fi networks, we implemented custom sine/triangle oscillator chains using the browser's native AudioContext.
Instant Build Verification: Validated the entire project with automated TypeScript typechecks (tsc --noEmit) and Vite compilation tools to ensure zero runtime regressions.

Why Does Open Innovation Matter?

Open innovation and open-source tooling fundamentally democratize learning:

Empowering the Learner, Not the Algorithm: Closed, commercial study apps are engineered around ad impressions, daily active user traps, and artificial subscription paywalls. Open innovation allows developers to build software that respects the user's attention, giving students like Maya an ad-free, clutter-free utility that exists purely to help them learn.
Local-First Data Ownership: In closed platforms, if a service changes its pricing tier or shuts down, a student's months of carefully written study decks disappear. With open standards and simple JSON schemas, students own their data permanently. They can back it up, migrate it, or print it anytime.
Extensibility & Accessibility: Using open web technologies (Web Audio API, SpeechSynthesis, CSS 3D transforms) proves that production-grade educational software can run anywhere—on a Chromebook, an old tablet, or a phone—without demanding high-end hardware or expensive software licenses.

Prize Categories

Primary: Hacktoberfest Weekend Challenge: Build for a Friend
Tags: #webdev, #react, #productivity, #opensource, #education