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_section contains resource_category blocks, each with multiple resource_item blocks
  • 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

Share this project:

Updates