InvaSphere

Opening Page
Login Page
Scout Dashboard
Ad Component
Map
Reports List
Scout Profile
XP System
Ranger Dashboard
Ranger Profile

InvaSphere was inspired by the need to engage students in environmental monitoring while supporting forest rangers in managing real threats efficiently. We wanted a system that leverages gamification to teach sustainability while ensuring that professionals aren’t overwhelmed with irrelevant data.

What We Learned:

How to integrate serverless architecture with Supabase and Next.js.
How to use AI (Gemini 1.5 Flash) for image recognition in a real-time PWA.
How to implement role-based filtering and Row Level Security (RLS) to protect sensitive data.

How We Built It:

Frontend: Next.js 15 with React Server Components, Tailwind CSS, Mapbox GL JS for mapping.
Backend: Supabase PostgreSQL with PostGIS, RLS policies, Edge Functions on Vercel.
AI Integration: Gemini 1.5 Flash via Vercel AI SDK to detect species and hazards.
Gamification & Incentivization: XP system and achievements sponsored by Google AdSense for revenue

Challenges Faced

Ensuring scouts only see their own data while rangers see only threats.
Handling “unknown” or unidentifiable species gracefully in the AI workflow.
Supporting real-time updates and notifications across multiple users without performance bottlenecks.