DEV Community: Prabakaran

The Haunted AI Mirror

Prabakaran — Tue, 27 Oct 2026 06:12:01 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

The Haunted Mirror transforms any standard webcam and microphone into an eerie, sentient Victorian Gothic mirror from 1888.

Inspired by 19th-century spiritualist seances, Edgar Allan Poe, and Mary Shelley's gothic literature, the mirror does not merely reflect your physical image—it perceives your emotional state, classifies your psychological aura, watches your subtle expressions, and listens to your spoken incantations.

Key experience features:

Real-Time Spectral Vision (60fps Canvas Shaders): The webcam video is channeled through custom canvas shader passes featuring antique silvering decay, oxidized glass spots, drifting ectoplasm fog, chromatic aberration fringes, and eerie afterimage motion trails.
Soul Ember Sparks: Pinpoints the viewer's gaze and renders burning spectral embers directly in the pupils with trailing ethereal flame wisps.
Victorian Gothic Poetic Riddles: Using multimodal AI perception (gemini-3.8-flash), the mirror gazes upon the viewer's face and composes bespoke 2-to-4 line gothic rhyming prophecies reflecting their detected mood (Melancholic Disquiet, Haunted Skepticism, Somber Yearning) and spoken words.
Spoken Phantom Voice (AI Speech): The mirror recites each prophecy aloud in an unsettling phantom voice (gemini-3.8-flash-lite-tts with the Charon / Fenrir voice models), accompanied by a procedural Web Audio dark ambient drone and resonant funeral bell tolls.
Spoken Incantations: Through the Web Speech API, viewers can whisper questions directly to the mirror ("Mirror, mirror, who walks beside me?" or "What omen awaits my soul before midnight?").
The Book of Omens (Grimoire): An antique leather-bound journal that preserves cursed polaroid portraits, timestamps, and prophecies with audio playback and parchment download capabilities.
Interactive Candle Sconces: Snuffing or rekindling the brass sconces alters the parlor's physical lighting and the mirror's shader darkness.

Demo

Live Application: The Haunted Mirror on Render
GitHub Source: Source

Code

The application is built with a modern TypeScript full-stack architecture:

Frontend: React 19, Tailwind CSS v4, Lucide Icons, Canvas 2D Shader Engine, Web Audio API, Web Speech API
Backend: Express on Node.js, Google GenAI SDK (@google/genai)
Repository: GitHub Repository / Codebase

How I Built It

1. Multimodal Vision & Psychological Classification

Instead of conventional emotion recognition libraries that output rigid, clinical labels like "happy" or "sad", the mirror sends snapshot frames alongside the user's spoken words to gemini-3.8-flash with structured JSON output schema. The model acts as an ancient spirit trapped in the silvered glass, evaluating lighting, micro-expressions, head tilt, and spoken words to synthesize:

Expression Classification: Evocative Victorian taxonomy ("Shadowed Enigma", "Pale Sorrow", "Haunted Inquest")
Aura Color: Dynamic hex tint (#5eead4 for ectoplasmic cold, #991b1b for cursed crimson)
Prophecy Verse: Custom gothic poetic riddles directed at the mortal
Hidden Omen: A chilling cautionary warning

2. Spectral Speech Synthesis

Spoken prophecies are generated using gemini-3.8-flash-lite-tts with the low-latency unary WAV output format, styled as a slow, haunting Victorian spectral whisper. The 24kHz audio stream is played seamlessly alongside a client-side procedural Web Audio synthesizer that generates continuous 55Hz binaural sub-bass hum and wind drafts without loading external audio files.

3. Procedural Shader Pipeline on Canvas

To achieve the 1888 antique glass aesthetic without heavy GPU libraries, the video feed is processed every animation frame through layered 2D canvas composite operations:

Ghost Trails: An off-screen canvas feedback loop (destination-out with low alpha) creates ethereal motion blur.
Chromatic Aberration: Horizontal RGB channel split passes simulate aged glass lens distortion.
Ectoplasm Particles: Drifting radial gradient mist clouds that oscillate using trigonometric phase shifts.
Silver Decay: Oxidized border tarnish and cracked glass overlays.

Why Does Open Innovation Matter?

Open innovation in AI bridges the gap between cold machine learning benchmarks and deeply emotive, human storytelling.

Multimodal Accessibility: Combining open SDKs, web standards (Web Audio, Web Speech, Canvas 2D), and accessible multimodal models allows developers to build rich, sensory digital art that runs inside any browser without proprietary hardware or walled-garden runtimes.
Creative Agency & Custom Schemas: Through structured JSON schema outputs, open generative models can be steered to adopt authentic historical personas—like a 19th-century Victorian specter—rather than sterile chatbot interfaces.
Decentralized Deployments: Using standard open-source tools like Vite, Express, and Docker, projects like this can be deployed anywhere from local laptops to Render and container clouds without platform lock-in.

My Agent Session

This application was architected and built in Google AI Studio Build using the modern @google/genai TypeScript SDK, complete with planning mode clarification, full-stack Express architecture, and verified canvas shaders.

The Spirit of It

"Thou seek'st the shade that shares thy breath,

Enshrined in glass and kin to death;

A twin born not of flesh nor clay,

That waits to steal thy name away."

There is an uncanny moment when you first click "Commune with Mirror" in a dim room: the canvas desaturates your face into antique silver, spectral flame embers ignite in your pupils, a low funeral bell tolls through your speakers, and a phantom voice speaks a poem written about the exact sorrow or curiosity showing in your eyes. It ceases to be an AI demo—it becomes a ghost in the machine.

Prize Categories

Primary Track: Ghost in the Machine (Halloween / Supernatural AI)
Best Use of Multimodal AI: Real-time webcam perception + speech recognition + generative poetry + TTS voice
Best Visual / Creative Experience: Custom antique canvas shaders, candlelight physics, and Victorian parlor UI

Walk and Relax - Ready for relaxation, walking workouts, and bedtime viewing.

Prabakaran — Tue, 20 Oct 2026 06:00:44 +0000

Walk&Relax — Hacktoberfest DEV.to Submission

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

Walk&Relax is an all-in-one relaxation, mindful walking, and bedtime sanctuary web application.

Modern wellness routines often force you to juggle three separate subscription-heavy apps:

A sound machine app for sleep or study background noise.
A fitness app to count steps and calories burned during evening walks.
A bedside alarm or nightstand clock app with a sleep timer.

Walk&Relax replaces all three with a unified, lightweight, zero-subscription web application:

Procedural Nature Sound Mixer: 100% offline procedural Web Audio synthesis for rain, forest wind, bird calls, mountain streams, crackling campfires, night crickets, ocean swells, thunder, brown noise, and 432Hz delta sleep resonance. No external MP3 downloads, no buffering, and no streaming drops.
Hands-Free Walking Pedometer & Calorie Counter: Leverages mobile device accelerometer hardware (DeviceMotionEvent) to detect steps in pocket or in hand with calibrated MET (Metabolic Equivalent of Task) calorie burn formulas based on your body weight and stride length. Also includes an indoor treadmill/cadence pace mode (90, 115, 135 SPM).
Bedtime Sleep Timer with Logarithmic Audio Fade: Set a timer for 15, 30, 45, 60, or 90 minutes. In the final minutes of playback, the audio gracefully and smoothly fades to silence without abrupt cuts that might jolt you awake.
Ultra-Dim OLED Bedtime Clock: Pure #000000 pitch-black background with warm candle-amber or soft moonlight typography, adjustable display dimmer slider (down to 15% luminance), and auto-hiding controls to prevent nightstand eye strain. Includes a guided 4-7-8 breathing pacer to help you drift off.

Who gets to be a little lazier because of it?
Anyone who wants to relax without fumbling through menus, managing multiple app subscriptions, or waking up at 2 AM to manually turn off their sound machine. You set your timer, slip your phone into your pocket for an evening stroll or place it on your nightstand, and let Walk&Relax quietly handle pacing, tracking, dimming, and fading out.

Demo

Live Application: walk-and-relax
Render Deployment: Deployable with 1-click via the included render.yaml blueprint.

Code

The complete source code is open-source and structured for easy local development or static hosting on Render:

Repository: walk-and-relax
Key Architectures:
- src/audio/soundEngine.ts: Web Audio API graph synthesizers (BiquadFilter, BufferSource, GainNode, OscillatorNode).
- src/hooks/usePedometer.ts: Real-time mobile motion sensor listener with magnitude peak detection.
- src/hooks/useSleepTimer.ts: Countdown timer with automated audio gain interpolation curve.
- src/components/BedtimeClock.tsx: Fullscreen OLED bedside nightstand clock with 4-7-8 relaxation guide.
- render.yaml & .npmrc: Automated 1-click Render blueprint with SPA routing and peer dependency safety.

How I Built It

Walk&Relax was architected using an AI-assisted engineering workflow within Google AI Studio Build:

Procedural Web Audio Graph (Zero Audio Files):
Instead of bundling large, fragile MP3 audio files or relying on external cloud CDN streams that can fail offline, the audio engine generates soundwaves on the fly using the browser's native AudioContext:
- Rain & Stream: Dual pink noise buffers with highpass/lowpass biquad filters and randomized droplet oscillator impulse clicks.
- Forest Wind: Brown noise filtered with a slow 0.12Hz Low-Frequency Oscillator (LFO) creating dynamic gust swells.
- Woodland Birds: Frequency-modulated sine oscillator bursts sweeping between 2,200Hz and 3,600Hz at natural intervals.
- Campfire: Warm lowpass noise paired with periodic triangle wave crackles and ember pops.
- Summer Crickets: 4,600Hz sine tone modulated by an 18Hz tremolo oscillator.
- 432Hz Delta Sleep: Harmonic binaural tone generator offset by 2.5Hz to stimulate delta wave sleep induction.
Mobile Motion & Accelerometer Engine:
- Analyzes real-time 3D acceleration vectors $\sqrt{x^2 + y^2 + z^2}$ via devicemotion.
- Filters out micro-jitters with a lowpass filter and 260ms minimum refractory window to accurately isolate legitimate footsteps.
- Computes calories burned using the scientific MET formula ($kcal = \text{MET} \times 3.5 \times \text{weight} / 200 \times \text{minutes}$).
Frontend Stack & Styling:
- React 19 & TypeScript: Strict type safety and state hooks.
- Tailwind CSS v4 (@tailwindcss/vite): Clean dark-mode aesthetics, custom OLED black layouts, and zero-pill typographic discipline.
- Lucide React & Motion: High-contrast, tactile iconography and smooth transitions.
- Render.com Blueprint: Complete Infrastructure-as-Code render.yaml with SPA rewrite rules (/* -> /index.html) and Node 20 runtime locking.

Why Does Open Innovation Matter?

Open innovation and open-standard web technologies are the foundation of what makes an application like Walk&Relax possible:

No Paywalls or Closed Ecosystem Locks: Most ambient sound and step-tracking apps lock basic features (custom sound mixing, sleep timers, dark OLED modes) behind recurring monthly subscriptions. By utilizing standard, open Web Audio and device motion APIs, we deliver a superior, private experience that runs directly on any device without account walls or trackers.
Privacy First & Local Storage: Walk&Relax stores all your activity logs and preferences in local browser storage. Your fitness and sleep data never leaves your device and is never harvested by third-party ad networks.
Zero Heavy Infrastructure Footprint: Open procedural audio synthesis requires virtually zero bandwidth after the initial page load (only a few kilobytes of HTML/JS), compared to closed streaming platforms that continuously consume server bandwidth and battery life.

My Agent Session

This application was planned, designed, implemented, and refined end-to-end with the Google AI Studio Build assistant:

Planning Mode: Formulated an architectural implementation plan specifying procedural sound design, pedometer algorithms, and OLED UI ergonomics.
Execution: Built the complete procedural audio engine, pedometer motion filters, and bedtime view.
Refinement: Configured non-intrusive muted page loads, synchronized the app title to Walk&Relax, and resolved npm peer dependency resolutions for Render.com deployment.

The Lazy Payoff

"Slow and Steady" is about conserving energy and doing more with less effort:

Saved Time & Context Switching: Instead of opening Spotify for rain sounds, opening a fitness tracker to count a walk, and setting an alarm app sleep timer, you launch Walk&Relax with one tap.
Zero-Wake Bedtime Routine: The automated sleep timer fades the volume logarithmically over the final minutes of your countdown. You don't have to stay awake or reach over in the dark to turn off a blaring speaker—your audio gently dissipates, leaving you in peaceful silence.
No Account Hassle: Zero sign-ups, zero passwords, and zero credit cards. Open the URL, press play, and start relaxing.

Prize Categories

Slow and Steady (Grand Prize)
Best Open-Source AI Agent Application

The Hobby Group Organizer — Helps small communities coordinate meetups, track attendance, split costs, and remind members about upcoming events.

Prabakaran — Tue, 13 Oct 2026 09:02:12 +0000

The Hobby Group Organizer

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

The Hobby Group Organizer is a web application designed for grassroots hobby communities, social clubs, recreational sports groups, and creative circles (such as board game guilds, urban sketching collectives, book clubs, and trail running groups).

The Problem It Solves

Organizing small in-person gatherings is fragmented across multiple disjointed tools:

Meetup announcements get buried in noisy chat apps (WhatsApp, Discord, Signal, Telegram).
RSVP counts are inaccurate because members say "maybe" or forget to show up.
Event day attendance tracking is chaotic or nonexistent.
Splitting shared costs (private room bookings, food & drinks, park permits, communal art supplies) requires awkward manual calculations and multiple peer-to-peer payment reminders.
Supply checklists ("who is bringing the game expansion?", "who is bringing folding chairs?") are lost in endless message threads.

Who Would Pay For It (The Side Hustle Angle)

Community Organizers & Micro-Event Hosts: Organizers currently paying $15–$30/month for clunky platforms (like Meetup.com Pro) that spam their members with ads and paywalls.
Co-Op Communities & Social Clubs: Guilds and clubs happy to pay a small monthly subscription ($5–$9/mo) or pay-per-event fee for automated cost-settlement, calendar sync, and frictionless broadcast generation.
Venues & Board Game Cafes: Local game cafes, art studios, and running shops that sponsor community meetups and need an integrated event attendance, check-in, and table-spend ledger.

Demo

🚀 Live Application (Production / Preview): The Hobby Group Organizer
💻 Source Code: the-hobby-group-organizer
Deploy to Render.com: Fully pre-configured with render.yaml blueprint and Express production server (server.ts). See RENDER_DEPLOYMENT.md.

Code

The application is structured as a modern, modular React 19 SPA powered by Vite, Tailwind CSS v4, and a standalone Express production server:

├── /index.html                         # Entry HTML with typography & SEO metadata
├── /server.ts                          # Production Express server with SPA fallback & /healthz
├── /render.yaml                        # Render.com Blueprint spec for 1-click deployment
├── /RENDER_DEPLOYMENT.md               # Step-by-step deployment guide for Render.com
├── /metadata.json                      # Application capabilities and profile
├── /package.json                       # Scripts: dev, build (Vite + esbuild), start
├── /src
│   ├── /assets/images/                 # Curated photography assets for hobby communities
│   ├── /components
│   │   ├── Header.tsx                  # Strict 3-zone Top Bar with profile switcher & CTA
│   │   ├── GroupHero.tsx               # Community banner, metadata & community switcher
│   │   ├── MeetupDetailModal.tsx       # Event command hub (Agenda, RSVP, Costs, Gear, Reminders)
│   │   ├── CreateMeetupModal.tsx       # Meetup creation with capacity & bring-lists
│   │   ├── CreateGroupModal.tsx        # New community creation modal
│   │   ├── AddExpenseModal.tsx         # Expense logging & split participants modal
│   │   ├── AddItemModal.tsx            # Supplies and bring-list checklist modal
│   │   ├── AddMemberModal.tsx          # Member directory invitation modal
│   │   └── /views
│   │       ├── OverviewView.tsx        # Next meetup spotlight, countdown, 4-KPIs, balance cards
│   │       ├── MeetupsView.tsx         # Filterable event schedule (Grid & List views)
│   │       ├── MembersView.tsx         # Attendance stats, session streaks & arrival console
│   │       ├── FinancesView.tsx        # Master cost splitter, debt simplification, receipts
│   │       └── RemindersView.tsx       # WhatsApp/Discord broadcast studio & alert queue
│   ├── /context
│   │   └── AppContext.tsx              # Persistent local storage state with reactive CRUD
│   ├── /data
│   │   └── mockData.ts                 # Rich realistic seed communities (Games, Art, Trails)
│   ├── /types
│   │   └── index.ts                    # Strong TypeScript models
│   └── /utils
│       ├── debtSettlement.ts           # Greedy debt simplification algorithm
│       ├── calendar.ts                 # .ics iCalendar file generator & export
│       ├── broadcastTemplates.ts       # WhatsApp, Discord, and Email message generator
│       └── csvExport.ts                # Attendance and financial ledger CSV export

How I Built It

1. Technology Stack

Frontend Framework: React 19 with functional components, hooks, and strict TypeScript.
Styling: Tailwind CSS v4 (@import "tailwindcss";) adhering to the Universal Frontend Design Constitution (60-30-10 color allocation, zero-pill metadata typography, and tabular figures for numbers).
Icons & Visuals: lucide-react icons paired with authentic documentary photography assets.
Production Server: Express 4 with ESM bundling via esbuild for instant startup on Node 20 / Render.com.

2. Algorithmic Debt Simplification (`src/utils/debtSettlement.ts`)

Instead of forcing every member to pay every other member individually (creating $N \times (N-1)$ transactions), the app calculates each member's net position:
$$\text{Net Balance} = \text{Total Paid} - \text{Fair Share}$$
It then runs a greedy settlement pairing between creditors (owed money) and debtors (who owe money) to resolve all community balances in the minimum number of transactions possible.

3. Native Calendar Export (`src/utils/calendar.ts`)

Generates RFC 5545 compliant .ics iCalendar blobs dynamically in the browser, enabling members to add gatherings to their device calendars without requiring third-party cloud API logins or tokens.

4. Cross-Platform Broadcast Studio (`src/utils/broadcastTemplates.ts`)

Converts structured meetup data, attendee rosters, and bring-lists into platform-formatted text with native markdown support:

WhatsApp: Formatted with *bold* headings, bullet points, and direct whatsapp:// / api.whatsapp.com deep links.
Discord: Formatted with **markdown**, blockquotes, and code tags.
Email/SMS: Plain text summaries ready for instant distribution.

Why Does Open Innovation Matter?

Freedom From Platform Tax & Lock-In:
Commercial gathering platforms (e.g. Meetup.com, Eventbrite) charge organizers steep monthly subscription fees and monetize community data. Open innovation demonstrates that local groups can own their schedules, rosters, and financial records entirely for free or run self-hosted instances on platforms like Render.com.
Open Standards Over Proprietary Silos:
By using open web standards like .ics (iCalendar), standard CSV exports, and universal web messaging links (WhatsApp / mailto), the application integrates with tools people already use daily without requiring everyone to install another app or create another password.
Offline-First & Sovereign Data:
All records persist locally in the user's browser, giving community leaders total data privacy and zero dependence on cloud outages or subscription expirations.

My Agent Session

This application was engineered using Google AI Studio Build.

Architectural Highlights

Followed strict design principles: zero-pill metadata rules, tabular numerals for currency and dates (font-mono tabular-nums), and single-elevation depth.
Created multi-community workflows with realistic seed data representing three distinct hobby demographics:
1. The Tabletop Guild (board games, teach agendas, room fees, pizza splits).
2. Metro Urban Sketchers (plein air watercolor, paper supply pools, coffee shop stops).
3. Pine Ridge Trail Crew (trail running loops, park day passes, carpool notes).
Verified full-stack compilation (npm run build), TypeScript type checking (tsc --noEmit), and production readiness for Render.com.

My First User

User Profile: Alex Chen, Lead Organizer of The Tabletop Guild (a 6-person Saturday board game club in downtown).

"Before this, we used a messy WhatsApp group chat to ask who was coming, and whoever bought pizza or booked the backroom had to manually text everyone on Venmo. With The Hobby Group Organizer, I copy the 24-hour WhatsApp reminder in one click, look at the suggested debt settlement table at the end of the night, and everyone knows exactly who to pay. We exported our attendance sheet to CSV to see who our most consistent players are."

Alex successfully coordinated a test session of Ark Nova & Dune: Imperium, tracked 5 RSVPs, split a $45.00 room fee and $38.50 pizza order, and resolved the debt down to 2 simple transfers.

Prize Categories

Side Hustle: A complete, monetizable SaaS/tool for community leaders, micro-meetup hosts, and local social clubs looking to replace high-fee subscription services.
Open-Source Productivity Tool: Practical utility solving attendance coordination, shared expense simplification, and cross-channel event broadcasts in a single, cohesive workflow.

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

DEV Community: Prabakaran

The Haunted AI Mirror

What I Built

Demo

Code

How I Built It

1. Multimodal Vision & Psychological Classification

2. Spectral Speech Synthesis

3. Procedural Shader Pipeline on Canvas

Why Does Open Innovation Matter?

My Agent Session

The Spirit of It

Prize Categories

Walk and Relax - Ready for relaxation, walking workouts, and bedtime viewing.

Walk&Relax — Hacktoberfest DEV.to Submission

What I Built

Demo

Code

How I Built It

Why Does Open Innovation Matter?

My Agent Session

The Lazy Payoff

Prize Categories

The Hobby Group Organizer — Helps small communities coordinate meetups, track attendance, split costs, and remind members about upcoming events.

The Hobby Group Organizer

What I Built

The Problem It Solves

Who Would Pay For It (The Side Hustle Angle)

Demo

Code

How I Built It

1. Technology Stack

2. Algorithmic Debt Simplification (src/utils/debtSettlement.ts)

3. Native Calendar Export (src/utils/calendar.ts)

4. Cross-Platform Broadcast Studio (src/utils/broadcastTemplates.ts)

Why Does Open Innovation Matter?

My Agent Session

Architectural Highlights

My First User

Prize Categories

Plant Care AI - Snap, Identify, Thrive.

PlantCare AI — Turn Screen Time into Soil Time 🌿

What I Built

How It Gets People "Touching Grass"

Demo

Key Features in the Demo

Code

How I Built It

Why Does Open Innovation Matter?

My Agent Session

Prize Categories

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

🧳 What I Built

🌐 Demo

Key Workflows

Code

How I Built It

Why Does Open Innovation Matter?

Prize Categories

2. Algorithmic Debt Simplification (`src/utils/debtSettlement.ts`)

3. Native Calendar Export (`src/utils/calendar.ts`)

4. Cross-Platform Broadcast Studio (`src/utils/broadcastTemplates.ts`)