Custom IoT Devices Management Platform in React

Our goal was to implement the React frontend part for the IoT devices management platform.

The project to develop the IoT devices management platform took us 3 months. We started in March 2019 and finished in May 2019.

The client is a company called Iot Solution, which develops custom IoT devices.

Challenge for this project

The IoT devices management online system offers customers a way to manage their sensors and display sensor measurements in charts.

The main challenge was to develop smooth, fast and easy to use front-end web application, with the possibility to sign in, manage the IoT devices and see the charts with data.

Result

As a result, we delivered to IoT Solution a frontend React web app with REST API connection to the backend server.

Their customers can now see the sensor measurements in charts and have access to sensor information, such as sensor name, ID, battery and signal power, expiration date, transmission period, etc.

Customers can also modify the sensor’s transmission period to change the frequency of measurements.

Used technology and interesting libraries

For the task, we choose React with Redux and Amplify.

Some other interesting libraries on the project were:

• Chart.js for simple, clean and engaging HTML5 based JavaScript charts,
• React-intl to internationalize React apps,
• Moment.js to parse, validate, manipulate, and display dates and times in JavaScript,
• and Bootstrap to build responsive, mobile-first projects.

The team

The team for the React frontend web application consisted of:

• the project manager Stepanka,
• one React developer Simon,
• and one QA engineer Jakub.

Solution in details

1. Login / Sign in form
2. Registration / Sign up form
3. Email and user verification
4. List of IoT devices
5. Adding new IoT devices via the form with validations
6. Fully responsive/mobile friendly design
7. Charts with IoT sensors information
8. Multilanguage support
9. REST API connection to the backend server

1. Login / Sign in form

The web management offers user registration and authentication, which is handled by AWS Amplify framework. 

2. Registration / Sign up form

 

3. Email and user verification 

After all the data correctly entered the verification email is sent to the user.

There is a possibility to write confirmation instructions in multiple languages.

A verification email has the verification code, which needs to be copy-pasted into the verification form.

 

4. List of IoT devices

After signing in, the user can display registered sensors, add a new sensor, edit current sensor, or display sensor data in charts.

The main requirement for the UI / UX was to have everything very simple.

 

5. Adding new IoT devices via the form with validations

There is a possibility to add new devices via a form.

The form has several inputs with validations for the text, number fields and for the data types.

 

6. Fully responsive/mobile friendly design 

One of the main requirements was to have a fully responsive design.

This means the web user experience is the same for users using mobile devices.

 

7. Charts with IoT sensors information

There are lots of IoT sensor and device types.

These devices produce lots of different data, such as temperature or humidity information.

This information is then displayed in the charts.

 

8. Multilanguage support

The web app supports multiple languages. 

Currently in English and Czech languages, but more languages can be added any time in the future.

Do you have a next challenge for us?

In case you need a similar web management system or platform just contact us anytime and we can help you.