Sage

Sage, the Eco-Trend Wizard is your magical guide to discovering the latest sustainability trends. We analyze discussions from Reddit, Twitter, and news sources to reveal emerging eco-movements.

Comment

Inspiration

We wanted to make an app that helps people find eco-friendly stuff near them but also make it fun. We used quest boards and a magical wizard theme to keep it fun and add a gamification element.

What it does

Sage is a sustainability app with a wizard theme. It has a few main features: Consultation - Chat with "Sage," an Mistral Powered AI wizard that gives you eco-friendly tips Quest Board - Daily challenges like "recycle 5 cans" that give you XP Realm Map - Uses your location to show eco-friendly places near you (farmers markets, thrift stores, recycling centers, etc.) on an embedded Google Map.

How we built it

We used React with Vite for the frontend. The styling is vanilla CSS with some animations to make it feel magical. For the map, we used Google Maps Embed API with the browser's Geolocation API to center it on you. The wizard chatbot uses Mistral AI to generate responses.

Challenges we ran into

Getting the map to work was frustrating at first, we had some dependency issues and had issues getting the map to look exactly how we wanted. We ended up having to use two APIs here. Implementing Mistral API and AI for the first time was also difficult since it was something we were inexperienced in.

Accomplishments that we're proud of

The whole thing actually works. The map finds your location and shows relevant eco-spots nearby The AI chatbot stays in character as a wizard pretty well

What we learned

How to use the Geolocation API How to integrate an AI API into a chatbot CSS animations can do a lot

What's next for Sage

Let Mistral generate personalized quests based on your location and what you've done before Complete user account functionality, add leaderboards, enterprise, and social aspects.

Built With

Share this project:

Updates