Custom IoT Devices Management Platform in React
Updated: · 6 min. read
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.
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:
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
- Login / Sign in form
- Registration / Sign up form
- Email and user verification
- List of IoT devices
- Adding new IoT devices via the form with validations
- Fully responsive/mobile friendly design
- Charts with IoT sensors information
- Multilanguage support
- 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.
Here at Rascasone, we offer comprehensive design and development services. All our clients need to do is present their requirements, and we’ll handle everything else, from entry analysis through final testing.
Our goal was to develop a React front-end part of web application focused on meetings management.
Our goal was to implement the website for the luxury and sports cars dealer with Headless Vue CMS Strapi and Nuxt.js.