Verdant (BoilerMake XII)
AI-powered eco-score platform with 3D globe visualization.
What I built
AI-powered platform that helps users track and improve their environmental impact through custom goals, a 3D eco-world, and community features. Built with Next.js 14 (App Router) and features a dynamic Three.js-powered globe that visually evolves based on user's eco-score, showing more greenery as users make progress toward sustainability goals.
Challenges
Integrating various technologies into a cohesive application was challenging, especially working alone within a tight timeframe. Encountered issues with Next.js's node_modules directory integration, which required troubleshooting and delayed development progress.
Architecture
Next.js 14 frontend with React and TypeScript, styled with Tailwind CSS and shadcn/ui components. Three.js handles 3D globe visualizations that update in real-time based on user data. Supabase provides authentication and PostgreSQL database storage. Google Gemini Pro powers personalized recommendations and calculates custom Eco-Score metrics. State management handled with React Context, and animations created with Framer Motion.
Results
Successfully created an engaging gamified experience that makes sustainability tracking fun and motivating. The Three.js-powered globe dynamically updates based on eco-scores, providing visual feedback that encourages long-term eco-friendly habits. The platform turns reducing one's carbon footprint into an immersive, game-like experience.