GreenLens

Inspiration

The financial sector is undergoing a massive shift toward "Greener Lending." However, as we looked into the industry, we found a significant gap: Sustainability-Linked Loans (SLLs) often rely on fragmented spreadsheets, manual reporting, and opaque calculation methods. We were inspired to build GreenLens to bridge this gap—transforming complex ESG loan documents into structured, actionable data that both lenders and borrowers can trust.

What it does

GreenLens is a comprehensive ESG Compliance Tracker designed for the LMA (Loan Market Association) ecosystem. It allows lenders to:

• Monitor Portfolios: Track real-time ESG performance across diverse industries.
• Automate Financial Adjustments: Dynamically calculate margin adjustments based on Sustainability Performance Targets (SPTs).
• Verify Data: Manage a transparent verification workflow for environmental metrics.
• Generate Reports: Produce investor-ready ESG Compliance Certificates and Portfolio Summaries with one click.

How I built it

The project is built as a high-performance React SPA (Single Page Application) using Vite.

• Frontend: React with a custom-built, premium sustainability-themed design system using Vanilla CSS.
• Logic: A robust calculation engine in JavaScript that handles ESG scoring and debt margin adjustments.
• Visualization: Recharts and Chart.js for tracking portfolio carbon intensity and KPI trends.
• Reporting: Integration of jsPDF and html2canvas for client-side document generation.
• Persistence: Custom hooks using localStorage for data persistence with export/import capabilities.

The core financial logic follows the principle: $$M_{effective} = M_{base} + \frac{1}{n} \sum_{i=1}^{n} \Delta m_i$$ Where $M_{base}$ is the base margin, $n$ is the number of KPIs, and $\Delta m_i$ is the adjustment (penalty or reward) defined for each specific target achievement.

Challenges I ran into

• Data Standardization: ESG metrics vary wildly between industries (e.g., CO2 emissions for steel vs. water usage for agriculture). Designing a flexible data model that could handle these disparate KPIs was a significant hurdle.
• PDF Rendering: Generating high-quality, high-fidelity certificates directly in the browser required fine-tuning the balance between DOM complexity and canvas rendering performance.
• Financial Accuracy: Implementing the margin adjustment logic required ensuring that rounding and baseline comparisons perfectly matched the LMA-style commercial terms.

Accomplishments that I'm proud of

• Dynamic Calculation Engine: Successfully built a system that automatically flags "At-Risk" borrowers based on predictive trend analysis.
• Design Aesthetic: Created a "Wow-factor" UI that feels premium, professional, and aligned with modern sustainability branding.
• Seamless Integration: Moving from a simple dashboard to a full-featured reporting suite including individual certificates and portfolio-wide annual summaries.

What I learned

• ESG Frameworks: Gained deep insights into how Sustainability Performance Targets (SPTs) are structured in modern loan agreements.
• Client-Side Data Management: Enhanced my skills in managing complex state and persistent storage without a heavy backend dependency for the MVP phase.
• Vector Graphics & Visualization: Learned how to effectively use SVG and Canvas together to present complex risk data in an intuitive way.

What's next for GreenLens

• OCR Integration: Applying AI to automatically extract loan terms and ESG clauses from PDF legal documents.
• Blockchain Verification: Utilizing decentralized ledgers to provide immutable "Proof of Sustainability" for verified KPIs.
• Real-Time API Swapping: Replacing simulated data with live feeds from OpenWeather, CarbonIntensity.org.uk, and Yahoo Finance ESG scores.

Built With

• html2canvas
• javascript
• react.js
• recharts
• vite