Logo
Product page
Login page
User dashboard
Upload a file page

🌱 ReLeaf - Snap, Sort, Save the Planet

🌟 Inspiration

Recycling contamination is a major environmental problem.
Confusion about what and how to recycle causes tons of recyclable materials to end up in landfills every year.

We wanted to create a powerful, AI-driven tool that provides immediate, accurate, and personalized recycling guidance to help address this issue — empowering individuals to make a direct impact.

🚀 What It Does

ReLeaf is an intelligent web application designed to make recycling easy, accurate, and rewarding.

📷 Scan Items

Upload images or videos of items you want to recycle.
The app uses Google Gemini AI to analyze media, identify objects, and determine recyclability.
Get specific, real-time recycling instructions for each item.

🧩 Track Progress

Persistent Recycling History: Save all scanned items to track your environmental impact.
Statistics Dashboard: Visualize your personal recycling stats and achievements.

🔍 QR Code Detection

Enhanced scanning with QR code recognition at multiple angles and orientations.

🎨 Customization

Dark/Light Theme Toggle: Customize the UI to your preference.
User Settings: Manage notification preferences, privacy, and appearance.

🛠️ How We Built It

Frontend

Vite + React + TypeScript
Tailwind CSS with shadcn-ui and Radix UI components
Framer Motion for animations
JSQR for QR code detection
@tanstack/react-query for efficient data fetching

Backend

Node.js + Express.js (with TypeScript)
Prisma ORM connected to a SQLite database
Multer and Sharp for secure and optimized file handling
JWT for authentication and session management

AI Integration

Google Gemini API for real-time media analysis.

⚡ Challenges We Ran Into

Building a fully secure custom backend to protect API keys and user data.
Migrating from Supabase to an independent, scalable authentication system.
Managing real-time feedback and multi-step asynchronous processing.

🏅 Accomplishments We're Proud Of

Developed a full-stack secure web app using cutting-edge AI tools.
Successfully deployed a personalized recycling tracker.
Built a statistical dashboard to visualize users' recycling contributions.
Created a smooth and responsive user experience with theme customization.

📚 What We Learned

The importance of secure backend architecture when working with external APIs.
Hands-on full-stack development, balancing frontend UX and backend robustness.
Advanced prompt engineering techniques for AI reliability.
Efficient management of file processing and database persistence.