Inspiration
Climate change poses unprecedented challenges to global agriculture, with farmers struggling to access localized, actionable environmental information. We were inspired to create a platform that bridges the gap between complex climate data and practical farming decisions, making environmental intelligence accessible to agricultural communities worldwide.
What it does
EnviroSense AI is a comprehensive climate-smart agricultural platform that provides:
🌾 Core Climate Action Tools
- Drought-resistant crop recommendations with AI-powered suggestions based on local climate conditions
- Water conservation strategies with rainwater harvesting calculations and drought preparedness planning
- Solar panel optimizer with placement optimization, irradiance data, and ROI calculations
- Habitat protection with AI recommendations for protecting and restoring natural habitats
- Farm carbon calculator analyzing agricultural equipment and operations for sustainability improvements
- Impact scanner using AI vision technology to analyze objects and reveal environmental footprint
- AI climate advisor providing conversational AI mentoring and personalized climate action guidance
- Smart goal tracking with environmental goal setting and AI-calculated impact measurements
🌍 Storyblok-Powered Content Management
- Dynamic country-specific content and theming built with Storyblok CMS architecture
- Localized agricultural recommendations delivered through headless CMS (USA, India with rich content, global fallback system)
- Climate-adapted resource sections with structured content management
🤝 Professional Community Hub
- Expert agricultural insights managed through Storyblok content types
- Environmental events calendar with rich media content delivery
- Policy updates and environmental news with structured content management
🌐 Multilingual Support
- Storyblok's built-in internationalization for content translation
- Real-time language switching without page reloads
- Support for English and Hindi languages
♿ Comprehensive Accessibility Features
- Floating accessibility toolbar with always-available accessibility menu
- Context-aware AI assistant providing page-specific help and relevant assistance
- Voice recording and transcription for voice input capability with AI interactions
- Text-to-speech responses where AI responses can be read aloud
- Full keyboard navigation with shortcuts (Alt+1-9, Alt+H, Alt+B)
- Screen reader compatibility with semantic HTML structure
- Theme support with light and dark mode options
- Proper contrast and visual indicators
How we built it
Frontend Stack:
- Next.js 14 with TypeScript for robust development
- Tailwind CSS and shadcn/ui for modern, accessible UI components
- React hooks for state management and data fetching
Content Management:
- Storyblok headless CMS for location-based content delivery
- Custom Content Types:
resource_section,country_theme,community_update,event_item,news_item - Nested Block Structure:
resource_sectioncontainsresource_categoryblocks, each with multipleresource_itemblocks - Content Hierarchy:
resources/{country}/{feature}for agricultural content,themes/{country}for homepage theming,events-news/{country}/for community content - Rich Content Fields: Text, textarea, single-option dropdowns, date/time, asset management for images
AI Integration:
- Google Gemini API for climate action tools (crop recommendations, habitat protection, carbon calculations)
- AI vision technology for impact scanning
- Conversational AI for climate advisory
Architecture:
- API-first approach with Storyblok's Content Delivery API for CMS features
- Custom service layer for content transformation
- Responsive design with accessibility-first principles
- Supabase for authentication and data storage
Challenges we ran into
CMS Integration Complexity: Integrating Storyblok CMS into in a application with multiple AI-powered features.
Content Structure Design: Creating a flexible content hierarchy that supports both country-specific and feature-specific content
Multilingual Implementation: Implementing Storyblok's translation system for content localization while maintaining consistency across different languages.
Accessibility Integration: Ensuring comprehensive accessibility features work seamlessly with both AI tools and new CMS-powered content.
Accomplishments that we're proud of
✅ Successful CMS Integration: Successfully integrated Storyblok headless CMS into AI-powered climate platform
✅ Location-Aware Content: Built location-based content delivery system that adapts theming and recommendations based on user selection
✅ Professional Community Hub: Created comprehensive community engagement system with CMS-managed content and rich media support
✅ Comprehensive Accessibility: Implemented floating accessibility toolbar, voice recording, text-to-speech, and full keyboard navigation
✅ AI-Powered Climate Tools: Maintained and enhanced AI features including impact scanner, climate advisor, and goal tracking
✅ Multilingual Support: Implemented Storyblok translation system for content localization with real-time language switching
What we learned
Headless CMS Integration: Learned how to integrate Storyblok CMS into applications
Content Management Strategy: Understanding the balance between CMS-managed content and programmatic content for different use cases.
Accessibility Implementation: Developed comprehensive accessibility features including voice interaction and assistive navigation tools.
Hybrid Architecture: Discovered effective patterns for combining AI-powered features with CMS-delivered content.
What's next for EnviroSense AI
🔮 Enhanced CMS Features:
- Expand Storyblok content to more countries and regions
- Add more content types for specialized agricultural guidance
- Implement better content workflows for agricultural experts
🌍 Content Expansion:
- Partner with agricultural experts to create more CMS content
- Add region-specific farming calendars and seasonal advice
- Integrate local agricultural extension service information
📱 Mobile Accessibility:
- Mobile app with enhanced accessibility features
- Offline access to critical climate information
- Voice-first interaction for hands-free farming guidance
🤖 AI Enhancement:
- Improve AI tools with more accurate recommendations
- Add more climate action categories and tools
- Enhanced conversational AI with deeper agricultural expertise
Built With
- gemini
- nextjs
- react
- storyblok-cms
- supabase
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.