Our PWA Web Application for viewing and controlling your farm from anywhere and everywhere.
Loved the project? Please visit our Website
CropWatch Web UI is a progressive web application (PWA) built with SvelteKit, designed for farmers, agronomists, and farm managers to monitor and control their farm operations remotely. It aggregates sensor data from soil and air devices, visualizes key metrics, and enables custom rule-based alerts to streamline decision-making.
- Dashboard: Customizable data cards and interactive charts for real-time insights.
- Mapping: Geospatial views of sensor locations using Leaflet.
- Alerts & Rules: Configure thresholds to trigger push notifications and highlight anomalies.
- PDF Reports: Export detailed device and trend reports via jsPDF and html2canvas.
- Localization: Multi-language support with svelte-i18n for English, Spanish, and Japanese.
- Field sensors collect environmental and soil metrics and send them to a Supabase backend.
- The UI uses @supabase/supabase-js for data retrieval and @supabase/ssr for server-side rendering.
- Reactive Svelte stores (@stencil/store) manage state and update UI components dynamically.
- Users define rules in the UI; when sensor data crosses thresholds, the system highlights issues in real time.
- On-demand PDF generation allows exporting reports for offline sharing or record-keeping.
We welcome contributions from developers, designers, and farmers alike to make CropWatch more robust and user-friendly:
- Enhance existing UI components or add new visualizations.
- Integrate new sensor types or third-party services.
- Improve performance, accessibility, and test coverage.
- Translate the application into additional languages.
Fork the repo, create a branch with your feature or fix, and submit a pull request. See the Contribute section below for details.
This repo aims to host a UI that everyone can update and add to so that we can make farming as easy as possible through the use of technology.
If you are interested, please create a PR to add your README profile here.
If you like this Repo, please click the ⭐
List of CropWatch UI categories mentioned below
Link : https://app.CropWatch.io
- Dashboard
- Locations
- Location Details
- Sensor Details
- Sensor Rules
- Sensor Settings
- Sensor Compare
- Settings Page with notations
- [-] Push Notifications
- [-] Real-Time Updates
- PWA Framework: Svelte, SvelteKit
- UI Components: @cropwatchdevelopment/cwui, bits-ui, @revolist/svelte-datagrid
- Styling: Tailwind CSS, @layerstack/tailwind, @tailwindcss/forms, @tailwindcss/typography
- State Management: @stencil/store
- Data Visualization: D3.js, ApexCharts
- Mapping: Leaflet
- PDF Generation: jspdf, pdfkit, html2canvas
- Localization: svelte-i18n,
- Backend & SSR: @supabase/supabase-js, @supabase/ssr
- Routing & Testing: Vite, Vitest, Playwright, @playwright/test, @testing-library/svelte, @testing-library/jest-dom
- Linting & Formatting: ESLint, Prettier, eslint-plugin-svelte, prettier-plugin-svelte, prettier-plugin-tailwindcss
- Build Tools: pnpm, TypeScript, Vite
Contributions are always welcome! Please create a PR to add your GitHub profile.
- Press: Ctrl + Shift + P, Then choose "Debug: JavaScript Debug terminal" from the prompt.
- In the terminal box that opens, type: pnpm dev
- Set your breakpoint and run the code!
I love knowing when something is wrong, that way I can fix it ASAP! However, please take care when submitting an issue, be clear about what is wrong, what you did to make it happen, and if possible include your device and browser where it happened.
This project is licensed under MIT license.
Give a ⭐️ if this project helped you!