Project: Fullstack IoT Application

IoT has many challenges. We built a Fullstack Web Application on top of AWS IoT Core with Typescript, NuxtJS, TailwindCSS and AWS Amplify in cooperation with a biotech startup.

📅2022-02-23

With the use of Internet of Things (IoT) and Artifical Intelligence (AI), our customer is building autonomous fish farms that can operate in any location. The founders of the biotech startup want to revolutionize methods of food production. In their artificial ecosystems, they produce fish from sunlight. In this concept, algae, water, sunlight and IoT support fish-farming in containers.

The system collects data via various sensors e.g. water temperature or O2 saturation. Video streams are recorded and AI models extract even more information to determine if the provided ecosystem needs to be adjusted. All this data needs to be persisted and visualized while also allowing target parameters to be set and overwritten by users.

This task is now resolved by the Full Stack Web Application we build together with our customer in 2021.

Tech Stack

AWS, Amplify, Nuxt(Vue), Typescript, Appsync(Graphql), DynamoDB(NoSQL), IoT Core

Datapoints / Unit / Month

432.400

Highlights

FullStack IoT Webapp, Digital Twin / Device Shadows

Build on top of the frontend framework NuxtJS / Vue we integrated various utilities to present all the available information to users in a convenient way.
Apache ECharts turned out to be an incredible tool to build most of the needed (interactive) visualizations while TailwindCSS allowed us to implement components close to what the Figma design for the application dictated.

The application is using many of the features provided by AWS Amplify such as integration with Authentication (Cognito), Storage (S3) and Hosting (Cloudfront). All data access is done via AppSync enabling features like subscriptions to efficiently update all Clients with the newest sensor data and device states.

Further we utilized custom CloudFormation templates to setup IoT rules to trigger ingestion lambdas for the sensor data via IoT Core.

Our technology choices allowed us to save a lot of development time that was reinvested into bringing more features to the first iteration of the Application.

Amplify was great to work with. The team building Amplify is very responsive on Github and Discord. While we encountered some quirks, most of the bad ones were actually mitigated over the last year:

The v2 graphql transformer now implements zero starting privileges . This has been strange to work with in the past as the resulting access rights were not always what was expected.
Custom resources needed to be added by editing the existing JavaScript cloudformation. Now you can use CDK integration to much easier provision additional resources that are not natively supported.

Future cooperations with the customer might include extending the sensor data storage to improve access times and cost, development of further UI components as well as support in extending the communications channel between Cloud Infrastructure and edge devices.

Project: Fullstack IoT Application

Sparked some interest? We …