Web, iOS and Android apps for Phytech

Features

  • Interactive map
  • Data visualisation
  • Reports constructor

Platform

  • Web
  • iOS
  • Android

Technologies

  • React
  • React Native
  • Google Maps API
  • Web Workers

Scope

4 people
Web: 16 weeks
Mobile: 17 weeks

Release

March 2016

Phytech develops sensors for the agriculture.

We helped them build an application to help farmers increase their yield by monitoring the fields online and making informed farming decisions. We used React to built from scratch a rich single-page application, which displays real-time data from Phytech sensors installed on the fields. We also migrated the native iOS and Android apps to React Native.

Watch the video of the application in action:

Our people behind the project:
Vova Porton
Ilya Gelman
Alex Ilyaev
Boris Dinkevich

The interactive map’s level of detail depends on its zoom level:

Color-coded health of the plots
This plot is being irrigated now
Scrolling at the bottom bar reveals charts that show detailed values for a specific timeframe in a selected area.

Many elements have additional data that appears when the user interacts with them:

Hovering over a day shows detailed precipitation and irrigation
If a sensor is intalled, even the fruit size is available
The farmers construct custom reports with the flexible tables and charts. Create, rename, and arrange tabs with different subsets of data.
The integrated notifications connect the web and mobile applications.
A farmer in field can set a reminder on the phone to review a particular area later on a larger screen.

The application displays thousands of DOM elements and data points. We need to load the data timely in the background and unload it when it’s no longer needed. All server communication is done through a web worker to reduce load on main thread and make the UI responsive.

+1
Send
Share

More projects

Project management application for Proggio React; NodeJS; Redux; SVG; WebSockets;
Advanced analytics platform for ThetaRay AngularJS; Angular; MobX; RxJS; D3; SVG; AG Grid; HighCharts;
Moving planner for Unpakt AngularJS; Ruby on Rails; CoffeeScript;
Write us