Verdant

Verdant is an AI-powered platform that helps users track and improve their environmental impact. Through custom goals, a 3D eco-world, and community features, it turns sustainability into a game!

Comment

Inspiration

As someone who loves video games, I understand the appeal of gamification. With our world facing increasing environmental challenges, it's clear that human activity plays a significant role. Verdant aims to help individuals reduce their carbon footprint by empowering them to make sustainable choices, gamifying the process to encourage long-term eco-friendly habits.

What it does

Verdant is an AI-powered platform designed to help users track and improve their environmental impact. By setting personalized sustainability goals, users can see their progress through a dynamic, evolving 3D eco-world. The platform provides real-time feedback on sustainability, visualizes eco-scores with terrain changes, and encourages engagement through social features, creating an immersive experience that makes reducing one's carbon footprint fun and motivating.

How I built it

Verdant is built with Next.js 14 (App Router) for the frontend, using React and TypeScript for the interactive elements. Styling is handled with Tailwind CSS, and I used shadcn/ui for UI components. The 3D visualizations are powered by Three.js, and Supabase Auth is used for authentication. I relied on Supabase's PostgreSQL database for data storage, and AI integration is powered by Google Gemini Pro for personalized recommendations and the custom calculation of the "Eco-Score". State management is done using React Context, and animations are created with Framer Motion.

Challenges I ran into

One of the main challenges was integrating the various technologies into a cohesive app. Working alone made it difficult to implement all the desired functionality within the time frame. Additionally, I encountered issues with Next.js's node_modules directory, which wasn’t properly integrating into the web app as expected, causing some delays and troubleshooting.

Accomplishments that I am proud of

I'm especially proud of the Three.js-powered globe, which dynamically updates based on the user's eco-score, showing more greenery as users make progress. The app’s visual design and core functionality also came together well, providing an engaging experience for users.

What I learned

I learned a great deal about integrating multiple technologies into a single platform, specifically how to combine 3D visualization with real-time data updates. I also gained valuable experience with AI-driven goal setting and personalized feedback mechanisms.

What's next for Verdant

Next steps include finishing the social functionality, enabling users to add friends and interact with each other. I also plan to enhance the globe's visual aesthetics with additional illustrations and improvements. Adding a streak feature, where users earn rewards for completing tasks consecutively, will further gamify the app and encourage consistent engagement.

Built With

Share this project:

Updates