🌱 NanaSprout: My Eco-Game Adventure

💡 What Inspired Me

Okay so basically, I was scrolling through TikTok (as one does) and kept seeing all these scary climate videos. Melting ice caps, wildfires, plastic in the ocean... it was lowkey depressing. And I thought — why isn't there a fun way to learn about this stuff?

School lectures about the environment? Boring. Reading articles? Also boring. But you know what's NOT boring? Games.

So I was like... what if I made a game where you actually have to make real-life eco decisions, but it's fun and has cool avatars and leaderboards and stuff? That's how NanaSprout was born! 🌿

🔨 How I Built It

I used React with Vite because it's super fast and I'm impatient lol. For the backend, I went with Supabase — it's like Firebase but cooler and has a generous free tier (broke student vibes 💀).

The coolest part? I used Cloudflare AI Workers to generate dynamic scenarios. It runs on the edge so it's crazy fast, and every time you play, the AI creates fresh eco-dilemmas based on real themes like food waste, energy conservation, and transport emissions. No two games are the same!

For the avatars, I made these adorable "Biosys Entities" using SVG animations with Framer Motion. They're basically little spirits that float and breathe — kinda like Ghibli characters! You can even upload your own photo and it gets wrapped in this magical glowing frame. ✨

Here's the stack if you're curious:

⚛️ React + Vite
🎨 Tailwind CSS
🗄️ Supabase (Auth + Database)
🤖 Cloudflare AI Workers (Edge AI)
✨ Framer Motion (animations)

📚 What I Learned

SO. MUCH.

Edge AI is insane — Cloudflare Workers are SO fast. Like, the responses come back almost instantly because it runs close to the user. No cold starts!
State management is hard — Passing data between components gave me headaches. Like why is avatar different from avatar_url?? (Bug that took me 2 hours to find 😭)
Mobile-first matters — My first design looked great on desktop but was completely broken on phones. Had to learn about overflow-hidden the hard way.
Animations make everything better — Seriously, adding little bounces and fades made the app feel 10x more polished.

😅 Challenges I Faced

AI prompt engineering — Getting the AI to return proper JSON instead of random text was like training a puppy. Had to be super specific with the prompts!
Supabase auth was confusing — Anonymous sign-in + profile creation took me like 3 tries to get right.
SVG animations are tricky — Making the avatars look cute AND animate smoothly was harder than I expected. Props to the Framer Motion docs though, they saved me.
Time zones — The daily themes are based on the day of the week, but I forgot that new Date() uses the user's local time. Oops!