Sustainable Urban

Sustainable Urban turns your daily household habits into gamified sustainability tracke.

Comment

Inspiration

Living in a city, it's easy to feel disconnected from your environmental impact. Most sustainability apps either overwhelm you with data or give vague, generic tips that don't apply to your actual life. We wanted to build something that makes sustainability personal

What it does

SustainableUrban is a full-stack household sustainability tracker built for urban households. Users can:

  • Log food waste with carbon estimates by food category
  • Track electricity, gas, and water usage and see their CO2 impact
  • Get a personalized AI coaching report that analyzes their last 30 days and gives actionable advice
  • Plan eco-friendly routes comparing fast drive, eco drive, bike, and walk with real fuel cost and emissions calculations
  • Challenge friends to Carbon Duels — a weekly competition where lowest CO2 wins eco-coins
  • Build a living city that grows as you log more actions
  • Log from anywhere using a Chrome Extension that works on grocery and delivery sites like Amazon, Instacart, and DoorDash

How we built it

The stack is split between a Next.js frontend and a serverless backend, deployed on Vercel.

Frontend: Built with Next.js (App Router), TypeScript, and Tailwind CSS using shadcn/ui components. Maps use Leaflet.js with a custom OSRM routing integration. A custom lightweight Markdown renderer was built to reduce bundle size. The logo was designed in Krita, with public domain illustrations used across the UI.

Backend: Runs on Next.js API routes as serverless functions. Authentication is handled by Clerk using server-side auth() and middleware protection. Data is stored in Neon serverless PostgreSQL and accessed through Drizzle ORM.

AI Features: OpenAI powers the AI Sustainability Coach with streaming responses based on user data. OpenAI GPT-4o Vision processes food label images to extract serving size and nutrition data. Both run within the same Vercel serverless environment.

Chrome Extension: Built with Manifest V3 and connected via a token-based API, allowing users to log food directly from grocery and delivery websites.

Challenges we ran into

  • Deployment configuration: Managing Clerk environment variables between development and production required multiple iterations before stabilizing with Vercel CLI
  • Routing accuracy: OSRM returned similar travel times across transport modes, requiring enforced minimum speeds and custom eco-routing adjustments
  • Streaming AI responses: Implementing real-time streaming in Next.js App Router required careful handling of readable streams and incremental UI updates
  • Carbon Duel bug: Role misassignment caused incorrect leaderboard values, requiring deep debugging across API and frontend state

Accomplishments that we're proud of

  • Built a fully serverless, scalable full-stack app
  • Integrated real-time AI personalization based on actual user data
  • Created a gamified sustainability system that encourages daily engagement
  • Delivered a seamless cross-platform experience (web app + Chrome extension)

What we learned

Clerk and Vercel integrate cleanly once environment variables are properly configured, and Neon's serverless PostgreSQL is optimized for this deployment model. The biggest challenge was not technical, it was designing sustainability data in a way that feels meaningful and actionable in everyday life.

What's next for SustainableUrban

  • Expand AI insights with deeper behavioral analysis
  • Add mobile support and notifications
  • Improve carbon estimation accuracy with more detailed datasets
  • Introduce global leaderboards and community challenges
  • Enhance the 3D city with more interactive and customizable features

Built With

Share this project:

Updates