ECO'CLICKO

Turn screen time into green time

Comment

Inspiration

The Story of Eco Mentor: From Inspiration to Interaction Inspiration: Bridging Two Worlds My journey began at the intersection of two observations:

The Problem: My younger cousin was mindlessly scrolling through short videos, a passive consumer of digital content. Meanwhile, conversations about climate change and sustainability felt overwhelming and pessimistic, especially for a child.

The Opportunity: I saw the emergence of powerful, conversational AI like GPT-3.5-turbo. It wasn't just a chatbot; it was a potential teacher, a patient mentor capable of explaining complex topics simply.

I was inspired by a simple question: What if we could harness children's screen engagement and redirect it towards positive planetary impact? Instead of passive consumption, could we create active learning? This led to the core vision for Eco Mentor: an AI-powered virtual tutor that makes learning about sustainability not a chore, but an adventure.What I Learned: The Solo Founder's Journey Building Eco Mentor was a profound learning experience:

The Art of the Prompt ($f(prompt)$): I learned that working with AI is less about coding a rigid rules engine and more about orchestrating probability. The AI's output is a function of a meticulously crafted prompt, $R = f(p, c)$, where the response $R$ is a function of the initial prompt $p$ and the conversation context $c$. Designing this $p$ to be consistently educational, safe, and engaging was the most crucial challenge.

Minimum Viable Product (MVP) Scope: With limited time, I had to ruthlessly prioritize. The core loop had to be Chat → Quest → Reward. Every feature was judged against this loop. This meant saying "no" to many cool ideas (like AR) to perfect the essential user experience first.

The "Kid-Friendly" UI Paradigm: Designing for children is uniquely challenging. It requires large, tactile buttons, minimal text, immediate feedback, and a guiding character. I learned that usability for a 8-year-old is vastly different from usability for an adult.

How I Built It: The Tech Stack I built Eco Mentor as a full-stack web application to ensure quick iteration and easy access. Architecture: Frontend (React + Vite) → Backend (Node.js + Express) → OpenAI API ↑ ↓ └────── Firebase Firestore ───┘ (User Progress & Badges) Frontend: I used React with a modern Vite setup to create a responsive, single-page application. The UI is built with a component library for a clean, professional look, featuring a central chat interface, a progress sidebar for badges, and large, colorful buttons.

Backend: A simple Node.js and Express server acts as a secure relay. It receives messages from the frontend, appends the carefully engineered system prompt to provide context and personality, and forwards the request to the OpenAI API.

AI & Logic: The brain is GPT-3.5-turbo (a cost-effective and powerful choice for an MVP). The system prompt defines the Eco Mentor persona: "You are Eco, a friendly and enthusiastic eco-mentor for children aged 8-12...". It also contains instructions to generate short, actionable eco-quests and to award specific badge names upon completion.

Database: Google Firebase Firestore stores anonymous user sessions. It tracks completed quests and unlocks digital badges, which are displayed in the UI to provide a sense of accomplishment.

Challenges Faced Hallucination and Safety ($\nabla Safety$): The biggest challenge was ensuring the AI provides 100% accurate and safe information. A model suggesting something like "you can water plants with soda" would be a disaster. I mitigated this through iterative prompt engineering, using techniques like role-playing and explicit instructions within the prompt's boundary conditions: $"Always be factually correct and suggest safe, child-appropriate activities."$

State Management in a Stateless Chat: The AI API is stateless. To maintain context like user progress and previous quests, I had to implement a context-tracking system on my backend. This involved carefully managing the conversation history array sent with each API request, which can become expensive with many users ($C_{cost} \propto \sum tokens$).

The "Cool-Down" Problem: Initially, the AI was over-eager, offering a new quest after every message. I had to build simple logic on the backend to detect when a quest was completed (e.g., by looking for keywords like "done" or "finished") and only then trigger the badge-awarding and new-quest generation mechanism. Building Eco Mentor validated my hypothesis: that AI can be a powerful force for good, transforming education from a monologue into a dialogue and empowering the next generation to be heroes for their planet.

Built With

Share this project:

Updates