EcoGraph is a premium sustainability platform that uses Structured Content to solve one of the most complex problems in climate tech: Recursive Carbon Accounting.
Most carbon accounting tools today are "flat." They look at a company's direct emissions or their immediate tier-1 suppliers. But true sustainability is deep—it’s a graph. We were inspired by the challenge of traversing multi-level supply chains (Bill of Materials) to calculate the true environmental cost of a product. We wanted to build the "Google Maps for Carbon"—a tool that lets you zoom from a finished product down to the specific raw materials and suppliers that make it up.
EcoGraph maps the entire DNA of a product's supply chain. It provides:
- Recursive Carbon Analysis: Automatically traverses N-levels of sub-components to aggregate a total CO2e footprint.
- Visual Supply Chain Explorer: An interactive, node-based map that visualizes the entire hierarchy of materials and components.
- "What-If" Simulation Engine: A high-fidelity sandbox where engineers can swap materials or suppliers and see the projected impact reduction for the entire product line instantly.
- AI Supply Chain Optimizer: A smart engine that identifies "Carbon Hotspots" and suggests certified alternatives within the same material category.
- Regulatory Compliance Dashboard: An automated CSRD/ESRS audit system that flags products with expired supplier certifications or missing verification data.
- Content Lake: Sanity.io (Graph-Relational Content Lake). Its reference fields and GROQ query language made recursive tree traversal incredibly efficient.
- Frontend: Next.js 15 (App Router, React Server Components) for a blazing-fast, SEO-friendly experience.
- Animations: Framer Motion for premium, cinematic UI transitions and interactive data visualizations.
- Recursive Logic: Custom GROQ engines that perform hierarchical data aggregation in a single query.
- Development: Built with the Sanity MCP Server, allowing for rapid AI-assisted schema modeling and relational data management.
- Recursive Aggregation: Calculating a final footprint requires summing values across deeply nested trees. We had to optimize our queries to handle deep component hierarchies without performance degradation.
- Dynamic Simulations: Creating a "What-If" sandbox that recalculates the entire tree's footprint in real-time as a user swaps materials was a significant state-management challenge.
- Complexity into Clarity: Turning complex, abstract carbon data into a premium, digestible UI that procurement teams and engineers can actually use.
- The Recursive Engine: We built a system that handles multi-level supply chains with millisecond response times.
- Premium Visual Language: A "Eco-Tech" aesthetic that moves away from boring spreadsheets and into a high-performance dashboard.
- Structured Impact: Successfully demonstrating how Structured Content (via Sanity) isn't just for blogs—it's a critical tool for solving global logistics and sustainability problems.
- Graph > Relational: For complex hierarchies like supply chains, a graph-relational approach is far superior to traditional flat databases.
- Data is Design: The way content is structured directly impacts the features you can build. Without specific relationships between Materials, Suppliers, and Components, our "AI Optimizer" wouldn't be possible.
- Live IoT Integration: Connecting factory-floor sensors directly to the Sanity Content Lake for real-time emission tracking.
- Cost-Carbon Equilibrium: Adding financial modeling to help teams balance sustainability goals with budget constraints.
- Geospatial Tracking: Visualizing the physical flow of goods across the globe to factor in logistics-based carbon footprints.
The project features a highly relational schema:
- Product: The final assembly, referencing Top-Level Components.
- Component: Recursively references Sub-Components and a specific Material.
- Material: Categorized and references a Supplier with specific carbon factors.
- Supplier: Tracks certification status, audit IDs, and expiry dates.
Follow these steps to get the project running locally:
- Clone the Repo:
git clone https://github.com/yourusername/ecograph.git cd ecograph - Install Dependencies:
- Root (Studio):
npm install - Web (Frontend):
cd web && npm install
- Root (Studio):
- Run the Sanity Studio (Root):
The Studio will be available at http://localhost:3333
npm run dev
- Run the Next.js Frontend (Web):
The Frontend will be available at http://localhost:3000
cd web npm run dev
The project uses a public Sanity project ID (zjavug2a) by default for demonstration. For production use, create a .env.local file in the web directory with your own Sanity credentials.
Developed for the Sanity + AI Hackathon.