Triple Thread

Chosen Problem Statement

We chose to tackle the problem statement one of Consumption and Environment where consumers often unintentionally support unsustainable practices due to a lack of clear, accessible, and reliable information. Our goal was to design a sustainability shopping companion to bridge this gap.

Solution Overview

This project is a web application that acts as an on-demand sustainability evaluator. A user simply pastes the URL of a product or online store they are considering into our application.

Our backend service then initiates a multi-step AI-powered pipeline to solve the problem:

1. Company Identification: The system first analyzes the URL and website data to accurately identify the company or brand the user is shopping for.

2. Sustainability Research: Using the identified company name, the system conducts real-time, targeted research on the company's latest environmental, social, and governance (ESG) initiatives, citing its sources for transparency.

3. Simple Evaluation: The research summary is then processed by an evaluation model which classifies the company's efforts into a simple, easy-to-understand rating: 'Good', 'Decent', or 'Bad'.

4. Alternative Recommendations: Finally, the system compares the company's profile with others in the same market and recommends up to three more sustainable alternative brands, providing a brief rationale for each recommendation.

The front end presents this information in an intuitive interface, with visual indicators for the sustainability score and a clear list of alternatives. This provides consumers with the actionable intelligence they need at the exact moment of decision-making, balancing comprehensive data with ultimate simplicity.

Development process

Our team adopted an agile workflow. We began by designing the full system architecture, defining the API contract between the frontend and backend, and crafting the AI prompts. The backend team focused on building the Express server and integrating the Perplexity API, creating separate endpoints for each logical step of the analysis. Concurrently, the frontend team built the user interface and component library. A key iteration was refining our prompts after initial tests, adding stricter instructions to ensure the AI's output format was consistent and reliable for parsing and display.

Technical Implementation

Our services

Frontend: A modern, responsive web application built with Vite, React, and TanStack Router for a fast and seamless user experience. We used shadcn/ui and Tailwind CSS for a clean, accessible, and aesthetically pleasing component-based design.

Backend: An API built with Express.js (running on Node.js) that handles requests from the frontend, orchestrates the AI pipeline, and serves the final analysis to the user.

AI & Data Extraction: We leverage the Perplexity Sonar Pro API as the core intelligence engine. Its advanced web-searching and reasoning capabilities are used to execute the structured prompts for company identification, sustainability research, evaluation, and recommendation generation.

Accomplishments that we're proud of

• Learned how to do web scraping
• Understood how to use prompt engineering with LLMs to get desired results

What's next

Browser Extension: The most logical next step is to build a browser extension that automatically analyzes a site in the background, providing passive, real-time feedback without the user needing to copy and paste URLs.

Data Caching: Implement a database (e.g., Redis or PostgreSQL) to cache results for popular websites. This would dramatically improve response times and reduce API costs.

Built With

• express.js
• perplexity
• react
• shadcn/ui
• tailwindcss
• tanstack
• vite