Skip to content

A React prototype for smart farming with zone monitoring, simulated sensor data, bilingual support, and an AI-ready chatbot. Built for the Nestlé Innovation Hackathon 2024.

License

Notifications You must be signed in to change notification settings

stevenmoraleszeta/demeter-prototype

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌾 Deméter - Agricultural Technology Platform

React License Version

Revoluciona la agricultura con tecnología avanzada

FeaturesInstallationUsage


✨ Introduction

Deméter is an advanced agricultural technology platform designed to transform farming through automation, data collection, and intelligent management systems. The platform empowers farmers with real-time monitoring, AI-powered insights, and comprehensive farm management tools to optimize crop production, reduce resource consumption, and promote sustainable agricultural practices.

Note: This project was presented in 2024 as a prototype at a Nestlé innovation contest hackathon, demonstrating the potential of technology-driven solutions for sustainable agriculture.

Project Philosophy

The essence of this project goes beyond demonstrating technical complexity. Rather, it represents one of many project ideas and prototype initiatives I have developed over the years. As a natural creative leader, I am ambitious, tenacious, organized, and passionate about acquiring and sharing knowledge. This project serves as a testament to my continuous pursuit of innovation and my commitment to transforming ideas into tangible solutions that can make a meaningful impact.

Key Features

  • 🗺️ Farm Management System - Interactive map visualization with zone-based monitoring
  • 📊 Real-time Data Collection - Sensor integration for temperature, humidity, and nutrient levels
  • 🤖 AI-Powered Chatbot - Agricultural guidance and recommendations (Designed for ChatGPT integration)
  • 🌍 Multi-language Support - Full internationalization with English and Spanish translations
  • 📱 Responsive Design - Modern, user-friendly interface accessible on all devices
  • 🌱 Sustainable Practices - Tools to minimize environmental impact and promote eco-friendly farming

🚀 Technologies Used

Frontend

  • React 18.3.1 - UI library
  • React Router DOM 6.25.1 - Client-side routing
  • React Modal 3.16.1 - Modal components
  • React Icons 5.2.1 - Icon library
  • Axios 1.7.3 - HTTP client
  • CSS3 - Styling and animations

Internationalization

  • i18next 25.6.2 - Internationalization framework
  • react-i18next 16.3.3 - React bindings for i18next
  • i18next-browser-languagedetector 8.2.0 - Automatic language detection
  • Supports English and Spanish languages

AI & Integration

  • OpenAI API 4.54.0 - AI chatbot integration (planned)

Development Tools

  • Create React App - Development environment
  • React Scripts 5.0.1 - Build tools
  • Testing Library - Unit and integration testing

⚙️ Installation

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn package manager
  • Git for version control

Setup Instructions

  1. Clone the repository

    git clone https://github.com/yourusername/demeter-prototype.git
    cd demeter-prototype
  2. Install dependencies

    npm install
  3. Configure environment variables

    cp .env.example .env

    Edit .env and add your API keys (if needed).

  4. Start the development server

    npm start

    The application will open at http://localhost:3000

Available Scripts

  • npm start or npm run dev - Runs the app in development mode
  • npm test - Launches the test runner
  • npm run build - Builds the app for production
  • npm run eject - Ejects from Create React App (irreversible)

🧩 Project Structure

demeter-prototype/
├── public/                 # Static assets
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── Components/         # Reusable components
│   │   ├── navbar/        # Navigation component
│   │   └── footer/        # Footer component
│   ├── Pages/             # Page components
│   │   ├── landingPage/   # Landing page
│   │   ├── DemeterMap/    # Farm management map
│   │   ├── DemeterAI/     # AI chatbot
│   │   ├── DemeterMenu/   # Main menu
│   │   ├── CanvasModel/   # Canvas visualization
│   │   └── Profile/        # Profile page
│   ├── Assets/            # Images and media
│   │   └── Img/
│   ├── App.js             # Main app component
│   ├── App.css            # Global styles
│   └── index.js           # Entry point
├── .env.example           # Environment variables template
├── .gitignore             # Git ignore rules
├── LICENSE                # License file
├── package.json           # Dependencies and scripts
├── vercel.json            # Vercel deployment configuration
└── README.md              # Project documentation

📖 Usage

Farm Management System

  1. Navigate to /demeter/map to access the farm management interface
  2. Hover over different zones to view real-time data
  3. Click on sensors to check battery levels
  4. Use action buttons to water zones, view recommendations, and access statistics

AI Chatbot

  1. Navigate to /demeter/ai to access the agricultural chatbot
  2. Select a question from the dropdown menu
  3. Receive AI-powered recommendations and guidance
  4. Note: Currently uses static responses. ChatGPT API integration planned for future updates.

Profile

  1. Navigate to /profile to view developer information
  2. Learn more about the project creator and their background

Language Selection

  1. The application automatically detects your browser language
  2. Language preference is saved in localStorage
  3. Currently supports English (en) and Spanish (es)
  4. Language can be changed through the navigation interface

🚢 Deployment

Recommended Platforms

  • Vercel - Recommended for React applications (✅ Configured)

    • The project includes vercel.json with proper routing configuration
    • Simply connect your GitHub repository to Vercel
    • Vercel will automatically detect the build settings
    • Build command: npm run build
    • Output directory: build
    • Client-side routing is configured automatically
  • Netlify - Easy deployment with continuous integration

    npm run build
    # Drag and drop the build folder to Netlify
  • AWS Amplify - Scalable cloud deployment

    • Connect your GitHub repository
    • Configure build settings: npm run build
    • Set publish directory: build
  • Render - Simple deployment platform

    • Connect repository
    • Build command: npm install && npm run build
    • Start command: serve -s build

Environment Variables

Ensure the following environment variables are set in your deployment platform:

  • REACT_APP_API_URL - API endpoint URL (if applicable)
  • REACT_APP_OPENAI_API_KEY - OpenAI API key (for future chatbot integration)

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_URL=your_api_url_here
REACT_APP_OPENAI_API_KEY=your_openai_api_key_here

See .env.example for the complete template.


🤝 Contributing

This is a proprietary project. For collaboration inquiries, please contact the project owner.


📜 License

Copyright (c) 2024 Steven Morales Fallas

All rights reserved. Redistribution, modification, reproduction, sublicensing, or any form of transaction (including commercial, educational, or promotional use) involving this repository, its source code, or derived works is strictly prohibited without the explicit and personal written authorization of the Lead Developer, Steven Morales Fallas.

Unauthorized commercial use, resale, or licensing of this repository or its contents is strictly forbidden and will be subject to applicable legal action.

For full license details, see LICENSE file.


👤 Author

Steven Morales Fallas

  • Software Developer
  • Designer
  • Professor
  • Entrepreneur

"Las personas que están lo suficientemente locas como para pensar que pueden cambiar el mundo son las que lo hacen" - Steve Jobs


📝 Notes

  • This is a prototype/proof-of-concept project
  • The AI chatbot currently uses static responses; ChatGPT API integration is planned for future versions
  • The farm management system simulates real-time data for demonstration purposes
  • For production use, backend API integration would be required

🔮 Future Enhancements

  • ChatGPT API integration for dynamic AI responses
  • Backend API for real-time sensor data
  • User authentication and authorization
  • Database integration for farm data persistence
  • Mobile application development
  • Advanced analytics and reporting
  • Multi-language support (English & Spanish)
  • Integration with IoT sensor devices

Made with ❤️ by Steven Morales Fallas

LicenseAuthorContributing

About

A React prototype for smart farming with zone monitoring, simulated sensor data, bilingual support, and an AI-ready chatbot. Built for the Nestlé Innovation Hackathon 2024.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published