CY TO YC

A new way to build sustainably

Inspiration

Every physical project—whether it's a medical device, a skyscraper, or an aerospace component—starts with materials. But choosing the right material is a remarkably slow and fragmented process. Engineers and architects want to make sustainable choices, but they are held back by scattered databases and opaque carbon data.

What it does

Materia is an AI-powered material browser platform. Users describe their project constraints in natural language e.g., "I need a lightweight, biocompatible material for a clinical prosthetic"), and our AI streams back structured material recommendations categorized into three profiles:

Best Overall: Balanced performance, cost, and ecology.

Ecological: Lowest carbon footprint.

Economic: Best cost-efficiency ratio.

How we built it

We built Materia as a high-performance, modern web application:

Frontend & UI: React 18, TypeScript, and Vite. We used Lovable extensively to rapidly prototype and generate our UI, relying on shadcn/ui and Tailwind CSS for styling, and Framer Motion for fluid animations.

Interactive Visuals: We integrated Three.js (React Three Fiber + Drei) for interactive 3D material previews on hover, Leaflet for mapping supply chains, and Recharts for our dashboard analytics.

Backend & AI: Supabase powers our backend (PostgreSQL). When a user submits a prompt, a Supabase Edge Function processes the AI inference and streams the response back to the client using Server-Sent Events (SSE).

State Management: Handled via TanStack React Query to keep dashboard data and chat history perfectly synced.

Challenges we ran into

treaming Structured AI Data: Streaming natural language is easy, but streaming structured data (like specific composite scores, CO₂ stats, and material categories) via Server-Sent Events (SSE) while rendering UI cards in real-time required us to build a robust custom stream parser.

Integrating 3D in React: Getting Three.js to render performantly inside a complex React component tree (specifically triggering on hover in the Materials Library) required careful state management and memoization to prevent frame drops.

Data Normalization: Standardizing LCA (Life Cycle Assessment) data across entirely different fields (Architecture vs. Medicine) to create a unified, fair "Ecology Score /10" took significant product and design thinking.

Accomplishments that we're proud of

The UX/UI: Taking highly technical, usually boring engineering data and presenting it in a beautiful, animated, and accessible interface (including a built-in Text-to-Speech engine).

What we learned

We learned how to leverage Lovable to effectively 10x our frontend development speed, allowing us to focus on complex integrations like maps and 3D scenes.