🌿 About the Project: MyEcoGuide

🚀 Inspiration

In a world facing climate urgency, I often wondered — why do most people want to help the environment, but still don't?
The problem isn't motivation — it’s personalization. Generic tips like “use less water” or “switch off lights” don’t resonate when people don’t know their actual impact.

That’s when the idea struck:
What if AI could understand your daily routine and give you crystal-clear, personalized conservation actions — with real impact data?

And so, MyEcoGuide was born — a lightweight, fully client-side AI-powered web app that helps users reduce their electricity, water, paper, and carbon footprint based on their routine.

🛠️ How I Built It

• Frontend: Designed using Typescript and tailwind
• AI Integration: I used OpenRouter AI API to process user inputs (country + routine) and generate 5–7 actionable, relevant, and data-backed conservation tips in markdown format.
• Markdown Rendering: The AI’s markdown output is rendered dynamically to create a beautiful and structured conservation report.
• Graphing: Used Chart.js to visualize daily, weekly, and monthly impact in terms of liters, kWh, CO₂, and paper saved.
• PDF Export: Integrated jsPDF and html2canvas so users can download and share their personal eco-report.
• Hosting: No backend — deployed as a 100% static site for speed, privacy, and simplicity.

📚 What I Learned

• How to build a zero-backend, fully functional AI-integrated app using only the frontend stack.
• How to communicate with OpenRouter APIs and handle structured markdown responses.
• Learned advanced JavaScript techniques for parsing dynamic content, chart rendering, and PDF generation on the client side.
• Most importantly, I learned how a well-designed interface can turn AI into action — giving people clarity, motivation, and measurable goals.

⚔️ Challenges Faced

• Prompt Engineering: Crafting a prompt that generated clean, well-formatted, and data-rich markdown from the AI — without errors — took several iterations.
• API Rate & Latency: Ensuring smooth user experience despite asynchronous API calls and rate limitations.
• Graph Data Extraction: Mapping AI’s qualitative markdown outputs to quantifiable chart inputs required smart parsing and fallback logic.
• Frontend-Only Constraint: Building everything without any server or backend logic made authentication, data handling, and PDF generation more challenging — but also taught me valuable optimization techniques.

🌱 Why This Matters

MyEcoGuide doesn’t just give you random tips — it turns your lifestyle into a climate solution, tailored just for you.
Every tip is small, doable, and backed by real numbers — helping users track their impact, stay motivated, and feel part of something bigger.

It’s a project that merges AI, sustainability, personalization, and data visualization — with zero backend, maximum simplicity, and real-world value.

✨ I built this project solo with a single belief: When people see the difference they make, they’re more likely to make a difference.

Built With

• openrouter
• tailwind
• typescript
• vercel