EcoLearn AI

Inspiration

Climate change is real, and we wanted a simple way to help users track their impact and adopt sustainable habits using a modern, interactive UI.

What it does

EcoLearn AI tracks your carbon footprint, provides AI-driven eco-tips, and visualizes your progress using Shadcn UI components for a sleek, responsive experience. To keep users motivated, we’ve added gamification features: earn badges for milestones, climb a leaderboard with friends, and celebrate your eco-journey.

How I built it

Frontend: React + Shadcn UI + TailwindCSS Backend: Node.js + Express + Prisma + SQLite AI: Gemini API for personalized tips and chatbot Auth: JWT-based login and session management Gamification: system + leaderboard logic powered by Prisma

Challenges I ran into

Integrating AI responses dynamically, managing TypeScript types, and ensuring smooth UI/UX with Shadcn components were challenging. Designing a fair badge/leaderboard system that feels rewarding but not discouraging also required thoughtful iteration.

Accomplishments that we're proud of

Fully functional, responsive UI with Shadcn components Real-time AI-powered guidance Clear carbon footprint visualization First version of gamification features (badges + leaderboard)** live and working

What I learned

Improved TypeScript and full-stack skills, plus learned how to integrate AI with a modern React + Shadcn UI frontend. I also learned how gamification can boost engagement, making sustainability fun and rewarding.

What's next for EcoLearn AI

Add richer gamification (streak tracking, challenges, and community quests), social sharing, and advanced AI tips to motivate eco-friendly behavior while keeping the interface intuitive with Shadcn UI.

Built With

• css
• express.js
• node.js
• prisma
• react
• shadcn
• sqlite
• ui