EcoSuggest

Seamless integration of ESG with promising functionality <3

Comment

What Inspired Us

Look around today, and the reality of climate change is impossible to ignore—rising urban heat islands, unexpected flash floods, and expanding droughts. Yet, what we often see is a sense of complacency and selfishness; people and corporations prioritize short-term comfort over long-term ecological balance. We wanted to disrupt this inertia. We were inspired by a simple question: What if we could take the abstract, overwhelming data of environmental degradation and hand it to an ESG analyst as a blueprint for immediate action? AI and its booming capabilities have made complex problem-solving easier than ever before. We realized we could leverage artificial intelligence not just for automation, but as a force multiplier for environmental sustainability.

How We Built It

We engineered EcoSuggest to be a premium, enterprise-grade SaaS application designed for instant, high-impact data visualization and solution generation. The Frontend Foundation

  • We wanted a blazing-fast user experience, so we built the dashboard as a highly responsive single-file user interface utilizing Tailwind CSS.
  • To capture the true complexity of local ecosystems, we built an exhaustive Input Matrix covering 20+ variables including Soil pH, Biodiversity Scores, Groundwater levels, and Climate Risk indexes.
  • We integrated Chart.js to map a side-by-side multidimensional comparison of current ecosystem vulnerabilities versus projected improvements.
  • We added html2pdf.js to allow analysts to instantly export their data-driven proposals into polished, corporate-ready PDF documents.

The Hybrid Backend Architecture To make the application robust, we structured the project across multiple directories, separating our client-side interface from our serverless backend. The frontend handles real-time formula calculations and UI gauge animations, while a secure Supabase directory houses our cloud deployment workflows.

Challenges We Faced (The Pivot to Multi-Model)

Building this prototype wasn't without its hurdles. Our biggest roadblock came down to web security and handling API keys. Originally, we were quite confused about how to safely pass our LLM keys from a pure frontend application without exposing them to the browser's inspect element tool. We knew hardcoding a secret key in public frontend repository code would completely break security guidelines and invite API abuse. This confusion forced us to completely rethink our architecture and pivot to a Multi-Model / Hybrid Connectivity Strategy:

  • Local Simulation Mode: We built a robust JavaScript rule-matching dictionary directly into the frontend. If no keys are present, the app instantly spins up a realistic, pre-configured data simulation—perfect for offline demos.
  • OpenRouter Direct Mode: We implemented a "Bring Your Own Key" (BYOK) system using browser localStorage for analysts who want to connect their own keys directly.
  • Supabase Edge Function Mode: To solve our backend security dilemma, we built a serverless infrastructure. The frontend sends a secure request using a generic Supabase Anon Key, and the serverless TypeScript edge function safely injects our hidden API key on the backend to chat with the LLM.

What We Learned

This hackathon was an incredible masterclass for our team. Beyond learning how to map complex climate data metrics to botanical solutions, we walked away with deep technical insights:

  • De-coupling Architecture: We learned that a single-page UI can easily be transformed into a secure, enterprise-grade full-stack application by offloading sensitive API routing to serverless edge computing.
  • The Power of the Free Tier: Integrating OpenRouter's free tier (openrouter/free) taught us how to design AI-agnostic applications that cost $0 to host and run, making technology accessible for grassroots environmental projects.
  • Error Handling & Resiliency: Designing the fallback simulation engine taught us how to build apps that gracefully degrade when network connections fail or API rate-limits are reached, ensuring our project is always demo-ready.

Future Roadmap & Impact

EcoSuggest proves that data-driven climate tech doesn't have to be slow or gate-kept behind expensive corporate software. By putting intelligent, automated afforestation and infrastructure planning at someone's fingertips, we hope to turn environmental data into immediate, physical action.

Built With

Share this project:

Updates