ForestTwin: Digital Twin Carbon Asset Dashboard

A high-performance B2B SaaS Digital Twin platform for corporate ESG portfolios.

View Live Demo • View Source • TechTide AI

---

🌲 What is ForestTwin?

ForestTwin transforms standard carbon offset reporting into a live, interactive data experience. Built by TechTide AI and Alex Cinovoj, this platform replaces static PDF reports with a highly accurate 3D digital replica of your specific forest assets.

Core Capabilities

• Interactive 3D Digital Twin: Built with React Three Fiber, featuring dynamic mesh properties that react to live health scores, seasonal changes, and environmental risks.
• Real-Time Data Overlays: A Framer Motion-powered Heads-Up Display (HUD) provides live metrics on carbon sequestration rates, canopy density, and total biomass.
• Scenario Simulation Engine: An interactive control panel allowing stakeholders to model temperature increases, drought severity, and deforestation rates to project carbon yields.
• Verifiable Carbon Ledger: A tabular view representing the verifiable carbon credit ledger to ensure transparent, audit-ready ESG reporting.
• Automated Alert Feed: Real-time environmental alerts for deforestation, fire risks, and drought conditions.

🛠 Tech Stack & Architecture

The application is built on a modern Next.js 16 App Router architecture with a focus on high-performance 3D rendering and an accessible, reduced-motion-compliant glassmorphism UI.

Architecture Overview

graph TD
    A[Client Browser] -->|Next.js App Router| B(Dashboard UI)
    B --> C{State Management}
    
    subgraph Frontend Components
        C -->|useForestTelemetry| D[3D Digital Twin Canvas]
        C -->|useCarbonLedger| E[Carbon Ledger Table]
        C --> F[Scenario Simulator]
        C --> G[Metric Cards & Alert Feed]
    end
    
    subgraph 3D Pipeline
        D -->|React Three Fiber| H[Forest Mesh Generation]
        H --> I[Dynamic Lighting & Materials]
        I --> J[DataHUD Overlay]
    end
    
    subgraph Data Layer
        C -.->|Fetch| K[API Routes]
        K --> L[Mock Telemetry Service]
        K --> M[Mock Ledger Service]
    end

Loading

Design System (Indigo/Slate)

ForestTwin utilizes a strict Indigo & Slate design token system implemented via Tailwind CSS and shadcn/ui. All interactive elements follow a unified interaction spec:

• Spring-physics transitions via Framer Motion.
• Strict touch target compliance (≥44px).
• Uniform .focus-ring and active scale micro-interactions across the UI.

🤖 AI Search & Agents (AICL)

This repository is optimized for autonomous AI Agents (ChatGPT, Perplexity, Claude, Copilot).

• llms.txt: A machine-readable Markdown context file is located at /llms.txt outlining the product structure for AI systems.
• pricing.md: Transparent SaaS tiers formatted for AI agent evaluations are hosted at /pricing.md.
• robots.txt: Explicitly permits AI crawlers (GPTBot, PerplexityBot, etc.) to index and cite the platform.

🚀 Quick Start & Deployment

Prerequisites

• Node.js v20+
• npm or pnpm

Local Development

1. Clone the repository:

   git clone https://github.com/TechTideOhio/SustainableFW.git
   cd SustainableFW

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Netlify Deployment

This repository is pre-configured for seamless deployment on Netlify using native Next.js Runtime integration.

• Build command: npm run build
• Publish directory: .next

No manual configuration is required. The netlify.toml file acts as the configuration block.

---

Built with ❤️ by TechTide AI

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide and Code of Conduct before submitting a pull request.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Built with 🌲 by TechTide AI